learnwithajitmore

• ReactJS is an open-source JavaScript library for building fast and

interactive user interfaces.
• Developed by Facebook in 2011
• Currently the most popular library for building user interfaces

• React is way ahead of its major competitors i.e. Angular and Vue JS

learnwithajitmore
 • The entire react application can be modeled as a set of independent, isolated &
reusable components

Topbar

Card Card Card Card

AdSection Card Card Card Card

Card Card Card Card

Footer

• These components are put together to design a complex layout i.e. components are the
building blocks of react application.

learnwithajitmore
 Logo
Topbar
MenuItem
User Avatar

Cards AdSection

learnwithajitmore
 App

Topbar AdSection Grid

Logo Menu Avatar Card

Thumbnail Title

• React is used to design Views (V of MVC architecture)

• React can be used in parts of existing web app
learnwithajitmore
Facebook Prime Video Netflix Instagram Twitter

learnwithajitmore
• Web application design approach.

• Technique for creating fast and dynamic web pages.

• Update parts of a web page, without recreating and reloading the whole page again.

• Parts of web pages are updated asynchronously by exchanging small amounts of

data with the server behind the scenes using AJAX or web-socket.

learnwithajitmore
• This way of using React can be OK for testing purposes, but for production you will need to
set up a React environment.
learnwithajitmore
• The create-react-app tool installs all the libraries and packages required to build a
React Application.

• It creates a default configuration for our react project.

• It also adds some starter files in the newly created application.

• npm is the node package manager for JavaScript. It helps you manage all the 3rd party
packages and libraries that you will be installing for your application. It is installed
automatically when you install NodeJS.

• npx is the node package execute (runner). It is used to download and run a package
temporarily.

node -v
npm -v
npx create-react-app first-react-app
npm start
learnwithajitmore
React JS History
• Current version of React.JS is V18.2.0 (14th June 2022).

• Initial Release to the Public (V0.3.0) was in July 2013.

• React.JS was first used in 2011 for Facebook's Newsfeed feature.

• Facebook Software Engineer, Jordan Walke, created it.

• Current version of create-react-app is v5.0.1 (April 2022).

• create-react-app includes built-in tools such as webpack, Babel, and ESLint.

learnwithajitmore
What is JSX?
• JSX is a syntax extension to JavaScript.

• It allows us to define React elements using syntax that looks very similar to HTML.

• It is used to define the look of the UI.

• That is, it is used to define the structure of React Components.

learnwithajitmore
function App() {
return (
<div className="App">
<h1>Todo List</h1>
</div>
);
}

function App() {
return (
<div className="App">
<h1>Todo List</h1>
<ul>
<li>Todo Item</li>
</ul>
</div>
);
}
What are Components?
• Components are building block of any react application.

• We use components to separate different parts of our user interface.

• Components are responsible to handle different parts of our application.

learnwithajitmore
React Component Rules
• Every component must begin with a capital letter.

• Once a component is declared, it can be written and used very similarly to an HTML
element.
• If a component or element doesn’t have child elements, it must be self-closing.

• Every component we make must return JSX elements and components (which must
also, ultimately, be composed of JSX).

learnwithajitmore
function App() {
return (
<div className="App">
<h1>Todo List</h1>
<TodoList/>
</div>
);
}

function TodoList(){

}
function App() {
const todos = [
{id:1, text:"Wash dishes", done: false},
{id:2, text:"Do laundry", done: false},
{id:3, text:"Take shower", done: false}
]

return (
<div className="App">
<h1>Todo List</h1>
<TodoList/>
</div>
);
}

function TodoList(){

}
Pass Data to Components with Props
• Props are custom attributes we can add to React components to pass data to our
components.
• We receive our prop data as an object argument.

learnwithajitmore
function App() {
const todos = [
{id:1, text:"Wash dishes", done: false},
{id:2, text:"Do laundry", done: false},
{id:3, text:"Take shower", done: false}
]

return (
<div className="App">
<h1>Todo List</h1>
<TodoList todos={todos}/>
</div>
);
}

function TodoList(props){
console.log(props)
}
function App() {
const todos = [
{id:1, text:"Wash dishes", done: false},
{id:2, text:"Do laundry", done: false},
{id:3, text:"Take shower", done: false}
]

return (
<div className="App">
<h1>Todo List</h1>
<TodoList todos={todos}/>
</div>
);
}

function TodoList(props){
return (
<ul>
{
props.todos.map(item =>(
<li>{item.text}</li>
))
}
</ul>
);
}
function TodoList(props){ React needs to keep
return ( track of the order of
<ul> each of the items in our
{
list. It does so with the
props.todos.map(item =>(
<li key={item.id}>{item.text}</li> help of a special React
)) prop called a key.
}
</ul>
);
}

function TodoList({todos}){ Get Individual Props

return ( with Destructuring
<ul>
{
todos.map(item =>(
<li key={item.id}>{item.text}</li>
))
}
</ul>
);
}
Add New Todo List Items function App() {
const todos = [
{ id: 1, text: "Wash dishes", done: false },
{ id: 2, text: "Do laundry", done: false },
{ id: 3, text: "Take shower", done: false }
];

return (
<div className="App">
<h1>Todo List</h1>
<TodoList todos={todos}/>
<AddTodo/>
</div>
);
}

function AddTodo() {
return (
<form>
<input placeholder="Add todo" />
<button type="submit">Submit</button>
</form>
);
}
learnwithajitmore
Handle Form Submission

function AddTodo() {
function handleAddTodo() {}

return (
<form onSubmit={handleAddTodo}>
<input placeholder="Add todo" />
<button type="submit">Submit</button>
</form>
);
}

learnwithajitmore
Prevent Default Form Behaviour Default, the page is refreshed

function AddTodo() {
function handleAddTodo(event) {
event.preventDefault();
}

return (
<form onSubmit={handleAddTodo}>
<input placeholder="Add todo" />
<button type="submit">Submit</button>
</form>
);
}

learnwithajitmore
Access Form Data on Submit With the help of the property event.target.elements

function AddTodo() {
function handleAddTodo(event) {
event.preventDefault();
const text = event.target.elements.addTodo.value;
const todo = {
id: 4,
text,
done: false
};
}

return (
<form onSubmit={handleAddTodo}>
<input name="addTodo" placeholder="Add todo" />
<button type="submit">Submit</button>
</form>
);
}

learnwithajitmore
 State State is a means of managing our application data and also allows React to
update our UI (user interface) in response to data changes.

import React from "react"

function App() {
const [todos, setTodos] = React.useState( [
{id:1, text:"Wash dishes", done: false},
{id:2, text:"Do laundry", done: false},
{id:3, text:"Take shower", done: false}
]);

return (
<div className="App">
<h1>Todo List</h1>
<TodoList todos={todos}/>
<AddTodo setTodos={setTodos}/>
</div>
);
}

learnwithajitmore
useState returns an array with two elements:
• The initial value we called useState with (our array of todos) and this becomes our
state variable
• A special function that allows us to update what is stored in the state variable

learnwithajitmore
function AddTodo({setTodos}) {
function handleAddTodo(event) {
event.preventDefault();
const text = event.target.elements.addTodo.value;
const todo = {
id: 4,
text,
done: false
};
setTodos(prev => prev.concat(todo))
}

return (
<form onSubmit={handleAddTodo}>
<input name="addTodo" placeholder="Add todo" />
<button type="submit">Submit</button>
</form>
);
}

learnwithajitmore
function AddTodo({ setTodo }) {
const input = React.useRef();
function handleAddTodo(event) {
event.preventDefault();
const text = event.target.elements.addTodo.value;
const todo = {
id: 4,
text: text,
done: false
};
setTodo((prev) => prev.concat(todo));
input.current.value = "";
}
return (
<form onSubmit={handleAddTodo}>
<input name="addTodo" placeholder="Add todo" ref={input} />
<button type="submit">Submit</button>
</form>
);
}

learnwithajitmore
function TodoList({todos}){
return (
<ul>
{
todos.map(item =>(
<li
style={{
textDecoration: 'line-through'
}}
key={item.id}>{item.text}</li>
))
}
</ul>
);
}

learnwithajitmore
function TodoList({todos}){
return (
<ul>
{
todos.map(item =>(
<li
style={{
textDecoration: item.done ? 'line-through' : ''
}}
key={item.id}>{item.text}</li>
))
}
</ul>
);
}

learnwithajitmore
function TodoList({todos}){
function handleToggleTodo(item){}
return (
<ul>
{
todos.map(item =>(
<li
onClick={()=>handleToggleTodo(item)}
style={{
textDecoration: item.done ? 'line-through' : ''
}}
key={item.id}>{item.text}</li>
))
}
</ul>
);
}

learnwithajitmore
function TodoList({todos, setTodos}){
function handleToggleTodo(item){
const updatedTodos = todos.map((t) => t.id === todo.id ? { ...t,
done: !t.done } : t );
setTodos(updatedTodos)
}
return (
<ul>
{
todos.map(item =>(
<li
onClick={()=>handleToggleTodo(item)}
style={{
textDecoration: item.done ? 'line-through' : ''
}}
key={item.id}>{item.text}</li>
))
}
</ul>
);
}

learnwithajitmore
function TodoList({ todos, setTodos }) {
function handleToggleTodo(todo) {
const updatedTodos = todos.map((t)=>t.id === todo.id ?
{...t, done: !t.done}: t);
setTodos(updatedTodos);
}

if (!todos.length) {
return <p>No todos left!</p>;
}

return (
<ul>
{todos.map((todo) => (
<li onClick={() => handleToggleTodo(todo)}
style={{ textDecoration: todo.done ? "line-through" :
""}} key={todo.id}>
{todo.text}
<DeleteTodo todo={todo} setTodos={setTodos} />
</li>
))}
</ul>
);
}

learnwithajitmore
function DeleteTodo({ todo, setTodos }) {
function handleDeleteTodo() {
const confirmed = window.confirm("Do you want to delete
this?");
if (confirmed) {
setTodos((prevTodos) => {
return prevTodos.filter((t) => t.id !== todo.id);
});
}
}

return (
<span
onClick={handleDeleteTodo}
role="button"
style={{
color: "red",
fontWeight: "bold",
marginLeft: 10,
cursor: "pointer"
}}
>x</span>
);
}

learnwithajitmore