React Beginner Notes by ChatGPT
1. React Setup
React is a JavaScript library for building interactive user interfaces, especially Single Page Applications.
To start using React:
- Install Node.js (includes npm)
- Use VS Code as the code editor
- Create a project using:
npx create-react-app my-app
cd my-app
npm start
This command starts a development server on http://localhost:3000
2. JSX (JavaScript XML)
JSX allows you to write HTML-like syntax in JavaScript, which gets compiled to React.createElement() calls.
Syntax Example:
const name = "Pawan";
return <h1>Hello, {name}!</h1>;
Rules:
- Return only one parent element
- Use `className` instead of `class`
- Wrap JS expressions in {}
3. Components
React Beginner Notes by ChatGPT
Components are reusable UI blocks. React has two types:
1. Functional Components:
function Welcome() {
return <h2>Hello!</h2>;
2. Class Components (less used today):
class Welcome extends React.Component {
render() {
return <h2>Hello!</h2>;
To use a component:
import Welcome from './Welcome';
<Welcome />
4. Props (Properties)
Props are inputs to a React component. They are passed from parent to child.
Example:
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
Usage:
<Greeting name="Pawan" />
React Beginner Notes by ChatGPT
This will render: Hello, Pawan!
5. useState Hook
useState is a React Hook to create state variables in functional components.
Syntax:
const [count, setCount] = useState(0);
To update the state:
setCount(count + 1);
Example (Counter):
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Increment</button>;
6. Event Handling
React handles events like onClick, onChange, onSubmit.
Example:
function handleClick() {
alert("Clicked!");
<button onClick={handleClick}>Click Me</button>
Input example:
React Beginner Notes by ChatGPT
const [name, setName] = useState("");
<input onChange={(e) => setName(e.target.value)} />
7. useEffect Hook
useEffect lets you run side effects (API calls, subscriptions, etc.)
Syntax:
useEffect(() => {
// side effect
}, [dependencies]);
If dependencies are empty, runs only once on component mount.
Example:
useEffect(() => {
fetch("https://api.example.com")
.then(res => res.json())
.then(data => setData(data));
}, []);
8. API Fetching Example
Component fetches data from an API and displays it.
useEffect(() => {
fetch("https://randomuser.me/api/")
.then(res => res.json())
.then(data => setUser(data.results[0]));
React Beginner Notes by ChatGPT
}, []);
Render logic:
{user ? <p>{user.name.first}</p> : <p>Loading...</p>}
Output:
- Initially shows "Loading..."
- After data loads: "Name: Sarah Miller" + photo
9. Deployment (Vercel)
Steps to deploy React app on Vercel:
1. Push project to GitHub
2. Login to vercel.com via GitHub
3. Import GitHub repo
4. Click Deploy (Vercel auto-detects React)
5. Get live link: https://your-project.vercel.app
Later changes are automatically redeployed after git push.
