Introduction to React and Key Concepts
1. Introduction to React
React is a JavaScript library developed by Facebook for building user interfaces. It focuses
on creating reusable components to manage the view layer of web applications efficiently.
Key Features of React
Component-Based Architecture: Applications are divided into small, reusable
pieces called components.
Virtual DOM: React uses a virtual DOM to efficiently update the real DOM only
when necessary.
Unidirectional Data Flow: Data flows from parent to child components, making
applications easier to debug and maintain.
JSX Syntax: JSX allows combining HTML with JavaScript for writing UI elements
in a familiar syntax.
2. Components, State, and Props
2.1 Components
Components are the building blocks of React applications. They can be categorized into:
1. Functional Components: Simple functions that return JSX. These are stateless by
default but can use hooks for state management.
2. Class Components: ES6 classes that extend [Link] and have access to
lifecycle methods and state.
Example of a Functional Component:
function Greeting() {
return <h1>Hello, World!</h1>;
}
Example of a Class Component:
class Greeting extends [Link] {
render() {
return <h1>Hello, World!</h1>;
}
}
2.2 State
State is an object that holds dynamic data in a component and determines how it behaves and
renders. State is managed within the component and can change over time using setState
(class components) or hooks (functional components).
Example:
class Counter extends [Link] {
constructor() {
super();
[Link] = { count: 0 };
}
increment = () => {
[Link]({ count: [Link] + 1 });
};
render() {
return (
<div>
<p>Count: {[Link]}</p>
<button onClick={[Link]}>Increment</button>
</div>
);
}
}
2.3 Props
Props (short for properties) are read-only data passed from a parent to a child component.
They are used to configure components and make them reusable.
Example:
function Welcome(props) {
return <h1>Hello, {[Link]}!</h1>;
}
// Usage
<Welcome name="John" />
3. Component Lifecycle Methods
Class components have lifecycle methods to control behavior during different stages of a
component’s life:
Mounting
constructor: Initializes state and binds methods.
componentDidMount: Invoked after the component is inserted into the DOM.
Updating
shouldComponentUpdate: Determines if a component should re-render.
componentDidUpdate: Invoked after the component is updated.
Unmounting
componentWillUnmount: Invoked before a component is removed from the DOM.
Example:
class LifecycleDemo extends [Link] {
componentDidMount() {
[Link]("Component mounted");
}
componentWillUnmount() {
[Link]("Component will unmount");
}
render() {
return <h1>Lifecycle Methods</h1>;
}
}
4. React Hooks and Routers
4.1 React Hooks
Hooks allow functional components to manage state and side effects. Common hooks
include:
useState: Manages state in functional components.
useEffect: Performs side effects like data fetching or DOM manipulation.
useContext: Shares state across components without props drilling.
Example of useState and useEffect:
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
[Link] = `Count: ${count}`;
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
4.2 React Router
React Router is a library for managing navigation in React applications. Key components
include:
BrowserRouter: Wraps the application and enables routing.
Route: Defines a path and component to render.
Link: Creates navigable links.
Example:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
5. Class Components and Functional Components
5.1 Class Components
Stateful components with access to lifecycle methods.
Require more boilerplate code.
5.2 Functional Components
Stateless by default, but can use hooks for state.
Preferred for their simplicity and cleaner syntax.
Example Comparison: Class Component:
class Welcome extends [Link] {
render() {
return <h1>Hello, {[Link]}!</h1>;
}
}
Functional Component:
function Welcome(props) {
return <h1>Hello, {[Link]}!</h1>;
}
6. Working with Forms in ReactJS
Forms in React are handled using controlled components where form elements are bound to
state.
Example:
class Form extends [Link] {
constructor() {
super();
[Link] = { name: "" };
}
handleChange = (event) => {
[Link]({ name: [Link] });
};
handleSubmit = (event) => {
[Link]();
alert(`Submitted Name: ${[Link]}`);
};
render() {
return (
<form onSubmit={[Link]}>
<label>
Name:
<input type="text" value={[Link]}
onChange={[Link]} />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
7. Using React Hooks for State Management
React hooks simplify state management in functional components. Common use cases
include:
7.1 Managing Simple State with useState
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
7.2 Managing Side Effects with useEffect
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("[Link]
.then((response) => [Link]())
.then((data) => setData(data));
}, []);
return <div>{data ? [Link](data) : "Loading..."}</div>;
}
