# Exploring React Basic Terminologies !!

**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.

```jsx
// 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.

```jsx
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.

```jsx
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.

```jsx
// 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.

```jsx
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.

```jsx
  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.