React Overview and Concepts
This document provides an overview of essential and advanced React concepts to help you refresh
your knowledge. Topics include components, JSX, props, state, lifecycle methods, hooks, context,
advanced routing, and state management with examples.
---
React Basics
1. Components
Components are the building blocks of React applications. They can be defined as either functional
or class components.
Example of a Functional Component:
```javascript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
```
Example of a Class Component:
```javascript
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
2. JSX
JSX stands for JavaScript XML. It allows you to write HTML elements in JavaScript and place them
in the DOM without using functions like appendChild().
Example:
```javascript
const element = <h1>Hello, world!</h1>;
```
You can also embed expressions and conditionally render content using JSX.
3. Props
Props (short for properties) allow components to receive data and functions as inputs.
Example:
```javascript
function Greet(props) {
return <p>Hello, {props.name}</p>;
```
You can also set default values and use destructuring for cleaner code.
4. State
State is an object that determines how a component renders and behaves. It is managed using the
`useState` hook in functional components.
Example with useState:
```javascript
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>
);
```
5. Lifecycle Methods
Class components have lifecycle methods like componentDidMount, componentDidUpdate, and
componentWillUnmount to manage behavior on mount, update, and unmount.
Example:
```javascript
class Timer extends React.Component {
componentDidMount() {
this.interval = setInterval(this.tick, 1000);
componentWillUnmount() {
clearInterval(this.interval);
render() {
return <div>Timer</div>;
}
```
Functional components use the `useEffect` hook for similar lifecycle behavior.
Advanced React Concepts
6. Context API
The Context API allows you to share values between components without passing props. It's useful
for managing global state.
Example:
```javascript
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
function ThemedButton() {
const theme = React.useContext(ThemeContext);
return <button className={theme}>I am styled by theme context!</button>;
```
7. React Router
React Router enables navigation between different components in an app. It uses
<BrowserRouter>, <Switch>, and <Route> components.
Example:
```javascript
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
```
For additional topics, like custom hooks, code splitting, and error boundaries, React's documentation
offers in-depth guidance. This document provides an overview, and you are encouraged to explore
more advanced use cases and scenarios for a deeper understanding.
---
This document serves as a foundational and refresher guide for building robust React applications.
