Scribd
Upload
40 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
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
40 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
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/ 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