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 React, { useState } from 'react';
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
import React, { useState } from 'react';
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
import React, { useState } from 'react';
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
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>
<input type="text" value={editedText}
onChange={(e)=>setEditedText(e.target.value)}/>
</span>
<button>Delete</button>
</div>
);
};
export default Task
