Scribd
Upload
11 views2 pages

ReactJS Beginner Notes 11 Pages

ReactJS is a JavaScript library for building user interfaces with reusable components. Key concepts include JSX for writing HTML in JavaScript, props for passing data to components, state for managing component data, and hooks like useEffect for handling side effects. Additionally, React Router is used for navigation between components.

Uploaded by

dekija2631
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
11 views2 pages

ReactJS Beginner Notes 11 Pages

ReactJS is a JavaScript library for building user interfaces with reusable components. Key concepts include JSX for writing HTML in JavaScript, props for passing data to components, state for managing component data, and hooks like useEffect for handling side effects. Additionally, React Router is used for navigation between components.

Uploaded by

dekija2631
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

ReactJS Beginner Notes

1. What is ReactJS?

React is a JavaScript library developed by Facebook for building user interfaces. It enables the creation of

reusable UI components.

2. Setting Up React

Use 'npx create-react-app my-app' to set up a React project. Navigate to the folder and use 'npm start' to run

it.

3. JSX

JSX stands for JavaScript XML. It allows HTML to be written within JavaScript code. Example:

const element = <h1>Hello</h1>;

4. Components

React is component-based. A component can be a function or class. Function component:

function Greet() {

return <h1>Hello</h1>;

5. Props in React

Props are inputs to components. Example:

<Greet name='John' />

Inside Greet: [Link]

6. State in React

State is data managed within a component. Use useState hook:

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

7. Handling Events
ReactJS Beginner Notes

React uses camelCase for events:

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

8. Conditional Rendering

Render elements based on conditions:

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

9. Lists and Keys

Use map to render lists:

[Link](s => <li key={[Link]}>{[Link]}</li>)

10. useEffect Hook

The useEffect hook runs side effects in functional components:

useEffect(() => {

fetchData();

}, []);

11. React Router (Basics)

For routing, use React Router:

<Route path='/home' element={<Home />} />

It enables navigation between components.

You might also like