React is a widely used library for building user interfaces, particularly single-page applications where you need a fast, interactive user experience. In React, the UI is broken down into components, which are JavaScript functions or classes that return UI elements. Components can manage their state and can be composed to make complex UIs.
Components are the building blocks of a React application. There are two types of components: Class components and Functional components.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
JSX (JavaScript XML) is a syntax extension for JavaScript, which looks similar to XML or HTML. It's used with React to describe what the UI should look like.
const element = Hello, world!;
To render an element into the DOM, you use `ReactDOM.render()`
const element = Hello, World;
ReactDOM.render(element, document.getElementById('root'));
Components can receive arbitrary inputs called “props”. They can be strings, numbers, objects, functions, or other components.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));
State allows React components to change their output over time in response to user actions, network responses, etc.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
React elements can have event handlers assigned to them, allowing you to respond to user interactions.
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
React elements can represent collections of items, which can be created from arrays using the JavaScript `map()` function.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return ;
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
React makes form handling straightforward by providing mechanisms to handle user input.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
When several components need to share state, it is recommended to lift the state up to their closest common ancestor.
function Calculator(props) {
const [temperature, setTemperature] = React.useState('');
function handleTemperatureChange(value) {
setTemperature(value);
}
return (
<div>
<TemperatureInput
temperature={temperature}
onTemperatureChange={handleTemperatureChange} />
</div>
);
}
React encourages composition over inheritance to reuse code between components. Composition allows you to keep the components encapsulated and make them more flexible.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
ReactDOM.render(
<WelcomeDialog />,
document.getElementById('root')
);
Create a simple to-do application. This app should allow users to add new tasks, mark tasks as completed, and filter tasks (All, Active, Completed).
Create Component Structure:
Implement Components:
function TodoApp() {
const [todos, setTodos] = React.useState([
{ id: 1, text: 'Learn React', completed: false },
{ id: 2, text: 'Build a Todo App', completed: false },
]);
const [filter, setFilter] = React.useState('All');
// Define other component methods here...
return (
<div>
<AddTodoForm /* pass required props */ />
<TodoList /* pass required props */ />
<FilterButton /* pass required props */ />
</div>
);
}
// Define other components here...
ReactDOM.render(<TodoApp />, document.getElementById('root'));
The above exercise is quite elaborate and will help you understand various aspects of React like state management, component composition, event handling, and conditional rendering. After completing the exercise, you should have a good grasp of building applications 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