React is a popular JavaScript library for building user interfaces, particularly single-page applications. It allows developers to create large web applications that can change data without reloading the page. It is component-based, making it easy to manage and scale complex applications.
A React component is a self-contained module that renders some output. Components can be functional or class-based, but functional components are more common since the introduction of Hooks in React 16.8. Components are written using JSX (JavaScript XML), a syntax extension for JavaScript that resembles XML or HTML. It is not required, but it makes the code more readable and writable. JSX needs to be compiled to JavaScript using a tool like Babel.
React components return HTML via their render method (for class components) or directly (for functional components). React elements are the smallest building blocks of React apps, and they describe what you want to see on the screen. They are immutable and do not have their own rendering capability, hence they act as instructions for the React DOM to manage the actual DOM.
Here is an example of a functional component that renders HTML:
function Welcome() {
return <h1>Hello, World!</h1>;
}
The `ReactDOM.render()` method is used to render a React element into a root DOM node. For example, you can render the `Welcome` component into a `<div>` with an `id` of `root`:
ReactDOM.render(<Welcome />, document.getElementById('root'));
This method will render the `Welcome` component, and the resulting HTML will be:
<div id="root">
<h1>Hello, World!</h1>
</div>
Props are arguments passed into React components. They allow components to be reused with different values. Props are immutable, ensuring that a component cannot modify its own props. Here is an example of a component that receives props:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
In this example, the `Greeting` component will render “Hello, John!” into the root element.
The useState hook lets you add state to your functional components. It returns an array with two elements: the current state value and a function that lets you update it.
Here is an example of a functional component using useState to manage the state:
import React, { 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>
);
}
ReactDOM.render(<Counter />, document.getElementById('root'));
This Counter component has a button, and when clicked, it will update the count displayed on the screen.
In React, events are named using camelCase, and you pass event handlers as props to your components. Here's an example of handling a click event in a React component:
function Button() {
function handleClick() {
console.log('Button was clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
ReactDOM.render(<Button />, document.getElementById('root'));
React allows you to render different UIs based on conditions, which is known as conditional rendering. Here's an example using a ternary operator:
function Message({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
}
ReactDOM.render(<Message isLoggedIn={false} />, document.getElementById('root'));
In this example, depending on the `isLoggedIn` prop, the component will render a different message.
Rendering lists in React involves creating an array of elements. Each element needs a unique key prop. Here’s how you can render a list:
function NumberList({ numbers }) {
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));
The `useEffect` hook lets you perform side effects in your functional components. It is like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined in class components. Here’s an example where `useEffect` is used to fetch data from an API:
import React, { useEffect, useState } from 'react';
function User({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const data = await response.json();
setUser(data);
};
fetchData();
}, [userId]);
if (!user) return "Loading...";
return <div>{user.name}</div>;
}
ReactDOM.render(<User userId={1} />, document.getElementById('root'));
In this example, the component fetches a user by their ID and displays their name once the data is loaded.
This guide covers the fundamental aspects of rendering HTML using React, such as creating components using JSX, managing state and side effects with Hooks, rendering lists, conditional rendering, and handling events. These concepts are foundational in developing effective and efficient React applications.
To become proficient with React and its ecosystem, it is crucial to practice by building a variety of applications, read the official documentation, and stay updated with the community’s best practices and recommendations. Keep experimenting, learning, and building with React!
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here