Scribd
Upload
2 views

React JS Notes

React is a JavaScript library developed by Facebook for building user interfaces using a component-based architecture and virtual DOM. Key concepts include JSX, components (function and class), props, state, and hooks such as useState and useEffect. Additional topics covered are event handling, conditional rendering, list rendering, routing with React Router, forms, lifting state up, and using React Developer Tools for debugging.

Uploaded by

taruncoder7
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
2 views

React JS Notes

React is a JavaScript library developed by Facebook for building user interfaces using a component-based architecture and virtual DOM. Key concepts include JSX, components (function and class), props, state, and hooks such as useState and useEffect. Additional topics covered are event handling, conditional rendering, list rendering, routing with React Router, forms, lifting state up, and using React Developer Tools for debugging.

Uploaded by

taruncoder7
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/ 3

React.

js Notes

1. Introduction

- React is a JavaScript library for building user interfaces.

- Developed by Facebook.

- Focuses on component-based architecture and virtual DOM.

2. Core Concepts

JSX:

- JavaScript + HTML/XML syntax.

Example: const element = <h1>Hello World</h1>;

Components:

- Function Component:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

- Class Component:

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

3. Props

- Short for properties.

- Passed from parent to child.

- Read-only.

Example: <Welcome name="John" />

4. State

- Manages local data inside a component.


React.js Notes

- Can change over time.

Example: const [count, setCount] = useState(0);

5. Hooks

- useState() - for state

- useEffect() - for side effects (API calls, etc.)

- useContext() - for global state

- More: useRef(), useMemo(), useReducer()

6. useEffect Example

useEffect(() => {

console.log("Component mounted or updated");

return () => {

console.log("Component unmounted");

};

}, [dependencies]);

7. Event Handling

Example:

<button onClick={handleClick}>Click Me</button>

8. Conditional Rendering

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

9. List Rendering

Example:

{items.map(item => <li key={item.id}>{item.name}</li>)}


React.js Notes

10. Routing (with React Router)

Install: npm install react-router-dom

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

</Routes>

</BrowserRouter>

11. Forms

Example:

<form onSubmit={handleSubmit}>

<input value={name} onChange={(e) => setName(e.target.value)} />

</form>

12. Lifting State Up

- Move state to the nearest common ancestor to share data between components.

13. React Developer Tools

- Chrome/Firefox extension for debugging React apps.

You might also like