Understanding React Basic Terminologies

In this blog, we will explore some of the fundamental terminologies in React using simple code examples. We'll create functional components to keep it straightforward, and you'll find console.log comments to help you understand what's happening behind the scenes.

1. Component

A component is a building block of a React application. It's a function or class that returns a piece of the user interface.

// Functional Component
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// Usage
const element = <Greeting name="Alice" />;
console.log(element); // <h1>Hello, Alice!</h1>

2. JSX (JavaScript XML)

JSX allows us to write HTML-like code within JavaScript to describe UI elements.

const element = <h1>Hello, World!</h1>;
console.log(element); // <h1>Hello, World!</h1>

3. Rendering

Rendering refers to displaying a React component on a web page.

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

4. Props (Properties)

Props are a way to pass data from a parent component to a child component.

// Parent Component
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// Usage
const element = <Greeting name="Bob" />;
console.log(element); // <h1>Hello, Bob!</h1>

5. State

State allows a component to manage dynamic data that can change over time.

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

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

6. Event Handling

React allows you to define event handlers for DOM events.

  const handleClick = () => {
    console.log('Button Clicked!');
  };

  <button onClick={handleClick}>Click Me</button>;

These are the fundamental terms in React. By understanding them, you can create interactive and dynamic user interfaces efficiently. React's simplicity and power make it a popular choice for web development. Now, you're ready to dive deeper into React and build more complex applications.