Scribd
Upload
6 views2 pages

React_JS_Notes (2)

React is a JavaScript library for building user interfaces with reusable components. It covers creating apps with Vite or Create React App, using JSX for HTML-like syntax, managing data with state and props, handling events, and performing conditional rendering. The document includes examples for each concept to illustrate their usage in React applications.

Uploaded by

tiwari6973
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
6 views2 pages

React_JS_Notes (2)

React is a JavaScript library for building user interfaces with reusable components. It covers creating apps with Vite or Create React App, using JSX for HTML-like syntax, managing data with state and props, handling events, and performing conditional rendering. The document includes examples for each concept to illustrate their usage in React applications.

Uploaded by

tiwari6973
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/ 2

React JS Notes

Introduction to React
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI
components.

Creating a React App


You can create a React app using Vite or Create React App (CRA). Example with Vite:
npm create vite@latest my-app
cd my-app
npm install
npm run dev

JSX (JavaScript XML)


JSX allows you to write HTML-like code inside JavaScript. Example:
const element = <h1>Hello, world!</h1>;

Components
React components can be functional or class-based. Example functional component:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Props
Props are used to pass data to components. Example:
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
<Greeting name='Deepak' />

State
State is used to manage data inside a component. Example with useState:
import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

useEffect Hook
useEffect is used for side effects like fetching data. Example:
import { useEffect, useState } from 'react';
function DataFetcher() {
const [data, setData] = useState([]);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => setData(data));
}, []);

return <ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>;


}

Handling Events
React events are similar to HTML events but written in camelCase. Example:
function Button() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}

Conditional Rendering
You can render components conditionally. Example:
function UserGreeting(props) {
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}

Lists and Keys


Rendering lists in React requires a unique key. Example:
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map(num => <li key={num}>{num}</li>)}
</ul>
);
}

You might also like