Scribd
Upload
0 views3 pages

Advance React

The document provides an overview of a React application that demonstrates key concepts such as JSX syntax, functional components, props, state management, event handling, and API fetching. It includes a sample code for a user management app that allows adding users through a form and displays them in a user card format. Additionally, it outlines steps to run the application using Create React App and explains where each React concept is applied in the code.

Uploaded by

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

Advance React

The document provides an overview of a React application that demonstrates key concepts such as JSX syntax, functional components, props, state management, event handling, and API fetching. It includes a sample code for a user management app that allows adding users through a form and displays them in a user card format. Additionally, it outlines steps to run the application using Create React App and explains where each React concept is applied in the code.

Uploaded by

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

✅ Concepts Covered:

JSX syntax

Functional components

Props and State

Event handling

Conditional rendering

Lists and key prop

Controlled components (forms)

useEffect for side effects

useState and useEffect hooks

Basic API fetch (simulated with setTimeout)

Component composition

import React, { useState, useEffect } from 'react';

function UserCard({ name, age }) {


return <div style={{border: '1px solid #ccc', margin: '5px', padding: '10px'}}>
<h3>{name}</h3>
<p>Age: {age}</p>
</div>;
}

function App() {
const [users, setUsers] = useState([]);
const [form, setForm] = useState({ name: '', age: '' });
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');

// Simulate API call on mount


useEffect(() => {
setTimeout(() => {
setUsers([
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 }
]);
setLoading(false);
}, 1000);
}, []);

// Handle form input change


const handleChange = e => {
const { name, value } = e.target;
setForm(prev => ({ ...prev, [name]: value }));
};

// Handle form submission


const handleSubmit = e => {
e.preventDefault();
if (!form.name || !form.age) {
setError('All fields are required.');
return;
}
const newUser = {
id: users.length + 1,
name: form.name,
age: parseInt(form.age)
};
setUsers([...users, newUser]);
setForm({ name: '', age: '' });
setError('');
};

return (
<div style={{ padding: 20 }}>
<h1>React Basics to Advanced</h1>

<form onSubmit={handleSubmit}>
<input name="name" value={form.name} onChange={handleChange}
placeholder="Name" />
<input name="age" value={form.age} onChange={handleChange}
placeholder="Age" type="number" />
<button type="submit">Add User</button>
</form>
{error && <p style={{color: 'red'}}>{error}</p>}

{loading ? <p>Loading users...</p> : (


users.map(user => (
<UserCard key={user.id} name={user.name} age={user.age} />
))
)}
</div>
);
}

export default App;

📦 How to Run This


Make sure you have Node.js and npm installed.

Create a new app using Create React App:

bash
Copy code
npx create-react-app react-basics
cd react-basics
Replace the content of src/App.js with the code above.

Run the app:

bash
Copy code
npm start
🧠 Features Explained:
Concept Where it's Used
JSX <h1>React Basics</h1>
Functional components App, UserCard
Props UserCard({ name, age })
useState const [users, setUsers] = ...
useEffect Simulate fetching data
Controlled form value and onChange on inputs
Conditional rendering loading ? and error &&
Lists with keys users.map(...) with key
Event handling onChange, onSubmit

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy