Day 23 of My React.js Learning Journey 🚀 | JSX and Components

Today, I learned about JSX in React, component-based architecture, and the two types of React components: class components and functional components. I also got introduced to Hooks and the useState Hook.

1. What Is JSX?

Today, I learned about JSX in React, component-based architecture, and the two types of React components: class components and functional components. I also got introduced to Hooks and the useState Hook.

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows us to write HTML-like markup inside JavaScript code.

Although JSX looks similar to HTML, it follows some different rules.

Example

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

export default App;`

Here, JSX allows us to write

markup directly inside a JavaScript function.

Important: JSX lets us create our own React components, such as . It does not allow us to invent arbitrary HTML tags and automatically make them work.

1. React's Component-Based Architecture

React uses a component-based architecture. This means we can divide a user interface into small, reusable components.

For example, an e-commerce website can contain:

• Navbar component
• Product component
• Cart component
• Footer component

Example

`function Welcome() {
return

Welcome to React!

;
}

function App() {
return (

);
}

export default App;`

Here, the Welcome component is reused twice inside the App component.

3. What Is the Root in React?

`jsx
`import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(

);
``

Here:

• document.getElementById('root') finds the HTML element with the ID root.
• createRoot() creates a React root.
• .render() displays the App component inside that element.

4. Types of React Components

There are two commonly discussed types of React components.

Class Components

`Class components use JavaScript classes and extend React.Component.
import { Component } from 'react';

class Welcome extends Component {
render() {
return

Hello, React!

;
}
}

export default Welcome;`

Class components are still supported, but they are less commonly used in new React code.

Functional Components

Functional components are JavaScript functions that return React elements.

`function Welcome() {
return

Hello, React!

;
}

export default Welcome;`

Functional components are the preferred approach for most new React components.

5. What Are Hooks?

Hooks are special React functions that let functional components use React features such as state.

useState() — manages state.

6. What Is useState?

useState is a React Hook that allows a component to store information and update its UI when that information changes.

Example: Like Button 👍

import { useState } from 'react';

function LikeButton() {
const [likes, setLikes] = useState(0);

return (

Likes: {likes}

  <button onClick={() => setLikes(likes + 1)}>
    Like 👍
  </button>
</div>

);
}

export default LikeButton;`

`What I Learned Today

• JSX stands for JavaScript XML.
• JSX lets us write HTML-like markup inside JavaScript.
• React uses reusable components to organize user interfaces.
• React has class components and functional components.
• Functional components and Hooks are commonly used in modern React development.
• useState manages state and helps update the UI.
• The React root is where React renders and manages the application UI.