Scribd
Upload
14 views

React Overview and Concepts

Uploaded by

ghadadridi0907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

React Overview and Concepts

Uploaded by

ghadadridi0907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like