24 Date Jan React Js 2024

Date 23 jan 2024
_____________________________________________________________________________
What is React JS
React JS is a JavaScript Library for building front end application or user

interfaces (UI).
ReactJS allows us to create reusable UI components.
Component - Components are the building blocks of any React app.
It is created by Facebook.
Advantages of ReactJS
Reusable Components
Open Source
Efficient and Fast
Works in Browser
Large Community
Components
Components are the building blocks of any React app.

Components let you split the UI into independent, reusable pieces, and think about
each piece in isolation.
Components are like JavaScript functions. They accept arbitrary inputs (called
“props”) and return React elements describing what should appear on the screen.
Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example,
<div /> represents an HTML div tag, but <App /> represents a component requires App
to be in scope.
_____________________________________________________________________________
Date 24 jan 2024
step1 create folder in any drive
step2 open vscode
step3 open terminal
step4create react app
npx create-react-app myapp
step5
cd myapp
step 6 run
npm start
Note there are two types of components

(1)function component
It is a JavaScript function which accepts a single “props” object argument with

data and returns a React Element.
Syntax:-
function func_name ( ) {
return React Element;
}
Ex:-
function Student( ){
return <h1>Hello Rahul</h1>
}
(2)class component
A class component requires you to extend from React.Component. The class must
implement a render() member function which returns a React component to be
rendered, similar to a return value of a functional component. In a class-based
component, props are accessible via this.props.
Syntax:-
class class_name extends Component {
render( ){
return React Element
}
}
Ex:-
class Student extends Component {
render( ){
return <h1>Hello Rahul</h1>
}
}
program1
(1)App.js
function App(){
return(
<h1>welcome first React Program</h1>
}
export default App
(2)index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
_______________________________________________________________________
25 jan 2024
_______________________________________________________________________
29 jan2024 project1(To-Do List App)
step1 Task.js:
// src/Task.js
import React, { useState } from 'react';
const Task = ({ task, onDelete, onEdit, editingTask, onSaveEdit }) => {

const [editedText, setEditedText] = useState(task.text);
const handleSaveEdit = () => {

onSaveEdit(editedText);
};
return (
<div>
<span>{editingTask && editingTask.id === task.id ? (
<input
type="text"
value={editedText}
onChange={(e) => setEditedText(e.target.value)}
/>
) : (
task.text
)}</span>
<button onClick={() => onDelete(task.id)}>Delete</button>
{editingTask && editingTask.id === task.id ? (
<button onClick={handleSaveEdit}>Save</button>
) : (
<button onClick={() => onEdit(task)}>Edit</button>
)}
</div>
);
};
export default Task;
step2
TaskList.js:
// src/TaskList.js
import React from 'react';
import Task from './Task';
const TaskList = ({ tasks, onDelete, onEdit, editingTask, onSaveEdit }) => {

return (
<div>
{tasks.map((task) => (
<Task
key={task.id}
task={task}
onDelete={onDelete}
onEdit={onEdit}
editingTask={editingTask}
onSaveEdit={onSaveEdit}
/>
))}
</div>
);
};
export default TaskList;
step3 App.js:
jsx
// src/App.js
import TaskList from './TaskList';
import AddTask from './AddTask';
const App = () => {

const [tasks, setTasks] = useState([]);
const [editingTask, setEditingTask] = useState(null);
const handleAddTask = (text) => {

setTasks([...tasks, { id: Date.now(), text }]);
};
const handleDeleteTask = (taskId) => {

setTasks(tasks.filter((task) => task.id !== taskId));
setEditingTask(null);
};
const handleEditTask = (task) => {

// Set the task to be edited
setEditingTask(task);
};
const handleSaveEdit = (editedText) => {

// Update the task text and clear the editing state
setTasks(
tasks.map((task) =>
task.id === editingTask.id ? { ...task, text: editedText } : task
)
);
setEditingTask(null);
};
return (
<div>
<h1>To-Do List App</h1>
<AddTask onAdd={handleAddTask} />
<TaskList
tasks={tasks}
onDelete={handleDeleteTask}
onEdit={handleEditTask}
editingTask={editingTask}
onSaveEdit={handleSaveEdit}
/>
</div>
);
};
export default App;
**********************************31 jan 2024********************

step1 src/App.js
function App(){
return(
<h1>welcome</h1>
)
export default App
step2 terminal
npm start
step2 src/Task.js

const Task=()=>{
return(
<h1>hello</h1>
);
};
export default Task
step3 src/App.js
import Task from "./Task"
function App(){
return(
<Task/>
)
}
export default App
step4
npm start
step5 src/Task.js

const Task=()=>{
return(
<div>
<span>
<input type="text"/>
</span>
<button>Delete</button>
</div>
);
};
export default Task
step6
npm start
+++++++++++++++++++++++++++1 feb 2024+++++++++++++++++++++++++

src/Task.js

const Task=({ task, onDelete, onEdit, editingTask, onSaveEdit })=>{
const [editedText, setEditedText] = useState(task.text);
const handleSaveEdit=()=>{
onSaveEdit(editedText);
}
};
return(
<div>
<span>
<input type="text" value={editedText}
onChange={(e)=>setEditedText(e.target.value)}/>
</span>
<button>Delete</button>
</div>
);
};
export default Task

24 Date Jan React Js 2024

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

24 Date Jan React Js 2024

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

24 Date Jan React Js 2024

Uploaded by

Copyright:

Available Formats

Date 23 jan 2024

React JS is a JavaScript Library for building front end application or user

Component - Components are the building blocks of any React app.

Components are the building blocks of any React app.

step1 create folder in any drive

step2 open vscode

step3 open terminal

step4create react app

npx create-react-app myapp

Note there are two types of components

It is a JavaScript function which accepts a single “props” object argument with

<h1>welcome first React Program</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function

const Task = ({ task, onDelete, onEdit, editingTask, onSaveEdit }) => {

const handleSaveEdit = () => {

export default Task;

const TaskList = ({ tasks, onDelete, onEdit, editingTask, onSaveEdit }) => {

export default TaskList;

const App = () => {

const handleAddTask = (text) => {

const handleDeleteTask = (taskId) => {

const handleEditTask = (task) => {

const handleSaveEdit = (editedText) => {

export default App;

**********************************31 jan 2024********************

export default App

import React, { useState } from 'react';

import Task from "./Task"

import React, { useState } from 'react';

+++++++++++++++++++++++++++1 feb 2024+++++++++++++++++++++++++

import React, { useState } from 'react';

You might also like

**************31 jan 2024