Scribd
Upload
6 views

react bootcamp

The document outlines a three-day introductory course on React.js, covering topics such as components, state, props, event handling, and lifecycle methods. It includes practical examples and code snippets to illustrate concepts, culminating in a mini project to build a to-do list app. The course emphasizes the creation of dynamic user interfaces using React's features and best practices.

Uploaded by

megh94001
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

react bootcamp

The document outlines a three-day introductory course on React.js, covering topics such as components, state, props, event handling, and lifecycle methods. It includes practical examples and code snippets to illustrate concepts, culminating in a mini project to build a to-do list app. The course emphasizes the creation of dynamic user interfaces using React's features and best practices.

Uploaded by

megh94001
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

Day 1: Introduction to React.

js and Component Basics


Module 1: What is React.js?
Introduction to React.js
Overview of React.js as a JavaScript library for building user interfaces
Real-life Example: Websites like Facebook use React to create dynamic and
interactive UIs.
Module 2: Setting Up a React Project
Creating a React App with Create React App (CRA)
Install create-react-app and set up your first React project:
npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Real-life Example: Creating a simple app setup to work like a workspace or kitchen
for building your app.
Module 3: React Components
What are Components?
React components are reusable pieces of UI.
Code Example:
function Welcome() {
return <h1>Hello, World!</h1>;
}

export default Welcome;

Real-life Example: Components are like building blocks in LEGO, small reusable
parts that come together to form a structure.
Module 4: JSX – The Syntax of React
Introduction to JSX
JSX is a mix of HTML and JavaScript:
const name = "John";
const element = <h1>Hello, {name}!</h1>;

Real-life Example: Like writing a recipe card where you mix ingredients (HTML) and
instructions (JavaScript) in one place.
Day 2: State, Props, and Event Handling
Module 1: Understanding Props
What are Props?
Props are arguments passed into components.
Code Example:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return <Greeting name="Alice" />;
}

export default App;

Real-life Example: Props are like ingredients being passed to different stations in
a kitchen.
Module 2: Introduction to State
What is State?
State allows React components to change and re-render based on data.
Code Example using useState:
import React, { useState } from "react";

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

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}

export default Counter;

Real-life Example: State is like a shopping cart that changes as you add items.
Module 3: Handling Events in React
Event Handling
Handling user interactions like button clicks.
Code Example:
function Button() {
const handleClick = () => {
alert("Button was clicked!");
};

return <button onClick={handleClick}>Click Me!</button>;


}

export default Button;

Real-life Example: A button that adds an item to a shopping cart.


Module 4: Conditional Rendering
Conditional Rendering in JSX
Rendering components based on a condition.
Code Example:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

function App() {
return <Greeting isLoggedIn={false} />;
}

export default App;


Real-life Example: Displaying a "Logged In" or "Guest" message based on the user’s
login status.
Day 3: Lists, Forms, and Lifecycle Methods
Module 1: Rendering Lists
Rendering Lists in React
Using .map() to render a list of items.
Code Example:
function ItemList() {
const items = ['Apple', 'Banana', 'Orange'];

return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}

export default ItemList;

Real-life Example: Displaying a list of items in a grocery app.


Module 2: Building Forms in React
Handling Form Input
Code Example:
import React, { useState } from "react";

function Form() {
const [name, setName] = useState("");

const handleSubmit = (event) => {


event.preventDefault();
alert(`Form submitted: ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={name} onChange={(e) =>
setName(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
);
}

export default Form;

Real-life Example: A registration form for signing up for an event.


Module 3: Introduction to React Lifecycle
React Component Lifecycle
Introduction to useEffect hook.
Code Example:
import React, { useEffect, useState } from "react";
function DataFetcher() {
const [data, setData] = useState(null);

useEffect(() => {
fetch("<https://api.example.com/data>")
.then((response) => response.json())
.then((data) => setData(data));
}, []);

return (
<div>
<h1>Fetched Data:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}

export default DataFetcher;

Real-life Example: Fetching and displaying data when the component loads.
Module 4: Mini Project To-Do List App
In this mini project, students will build a basic to-do list app to reinforce the
concepts learned over the three days. This project includes components, state,
props, event handling, and conditional rendering.
Project Features:
Add New Task: User can input a task and add it to the list.
Mark Task as Completed: Each task has a button to mark it as complete.
Delete Task: User can delete a task from the list.
Code Example for To-Do List App:
import React, { useState } from "react";

function TodoApp() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState("");

const addTask = () => {


if (input) {
setTasks([...tasks, { text: input, completed: false }]);
setInput("");
}
};

const toggleComplete = (index) => {


const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
};

const deleteTask = (index) => {


const newTasks = tasks.filter((task, i) => i !== index);
setTasks(newTasks);
};

return (
<div>
<h1>To-Do List</h1>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Add new task"
/>
<button onClick={addTask}>Add Task</button>

<ul>
{tasks.map((task, index) => (
<li key={index}>
<span
style={{ textDecoration: task.completed ? "line-through" : "none" }}
>
{task.text}
</span>
<button onClick={() => toggleComplete(index)}>
{task.completed ? "Undo" : "Complete"}
</button>
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}

export default TodoApp;

You might also like