DEV Community

Pranav Bakare
Pranav Bakare

Posted on

React Basics

Here’s an explanation of key React terminology with examples:

1. Component

A component is the building block of a React application. It’s a JavaScript function or class that returns a portion of the UI (User Interface).

Functional Component (common in modern React):

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Class Component (older style):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
Enter fullscreen mode Exit fullscreen mode

2. JSX (JavaScript XML)

JSX allows you to write HTML-like syntax inside JavaScript. It’s syntactic sugar for React.createElement().

Example:

const element = <h1>Hello, world!</h1>;

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');
Enter fullscreen mode Exit fullscreen mode

3. Props (Properties)

Props are how data is passed from one component to another. They are read-only and allow components to be dynamic.

Example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />
Enter fullscreen mode Exit fullscreen mode

4. State

State is a JavaScript object that holds dynamic data and affects the rendered output of a component. It can be updated with setState (class components) or the useState hook (functional components).

Example with useState in functional components:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Hooks

Hooks are functions that let you use state and other React features in functional components.

useState: Manages state in functional components.
useEffect: Runs side effects in functional components.

Example of useEffect:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}
Enter fullscreen mode Exit fullscreen mode

6. Virtual DOM

The Virtual DOM is a lightweight copy of the real DOM. React uses this to track changes and update the UI efficiently by only re-rendering the parts of the DOM that changed, rather than the entire page.

7. Event Handling

React uses camelCase for event handlers instead of lowercase, and you pass functions as the event handler instead of strings.

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}
Enter fullscreen mode Exit fullscreen mode

8. Rendering

Rendering is the process of React outputting the DOM elements to the browser. Components render UI based on props, state, and other data.

Example:

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

Enter fullscreen mode Exit fullscreen mode

9. Conditional Rendering

You can render different components or elements based on conditions.

Example:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
Enter fullscreen mode Exit fullscreen mode

10. Lists and Keys

In React, you can render lists of data using the map() method, and each list item should have a unique key.

Example:

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

Enter fullscreen mode Exit fullscreen mode

11. Lifting State Up

Sometimes, multiple components need to share the same state. You "lift the state up" to their nearest common ancestor so that it can be passed down as props.

Example:

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

These are the basic concepts that form the foundation of React development.

Top comments (0)