Scribd
Upload
5 views3 pages

Experiment 6 Observation Format

The document outlines the steps to create a To-Do application using React and deploy it on GitHub. It includes objectives such as understanding React's structure, state management with hooks, and detailed procedures for setup and deployment. The conclusion confirms the successful development and deployment of the application.

Uploaded by

dandamshravanthi0205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

Experiment 6 Observation Format

The document outlines the steps to create a To-Do application using React and deploy it on GitHub. It includes objectives such as understanding React's structure, state management with hooks, and detailed procedures for setup and deployment. The conclusion confirms the successful development and deployment of the application.

Uploaded by

dandamshravanthi0205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Experiment 6

Create a ToDO application in react with necessary components and deploy it into github

Aim:

To develop a To-Do application using React and deploy the application on GitHub.

Objective:

1. To understand the structure and lifecycle of a React application.


2. To learn the implementation of state management using React hooks (useState).
3. To deploy the application on GitHub.

Procedure:

Step 1:
Install Node.js from https://nodejs.org/en.

Step 2:
Create the new folder and open in VS Code

Step 3:
Create a new React application using the command:
npx create-react-app todo-app
after that change the directory
cd todo-app

Step 4:
Create a components like App.js, ToDoList.js and write the code

Step 5:

Open the terminal and run the program by typing “npm start”.

Step 6:

Deploy to GitHub:
Initialize a Git repository in the project folder.
Push the project to a new GitHub repository:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/<your-repo-name>.git
git push -u origin main
Theory:

React Components
There are two types of components in React.

• Class Components.

• Functional Components.

Class Components:
It Manages state and lifecycle methods.

Sytax:

class Welcome extends Component {

render() {

return <h1>Hello, {this.props.name}!</h1>;

Functional Components
It is a simple JavaScript function.

It can manage state and lifecycle using hooks.

Introduced in React 16.8

Sytax:

function Welcome(props) {

return <h1>Hello</h1>;

Hooks:

It is introduced in React 16.8

It is used to manage the states and side effects ( previously this is possible only in class components)

Basic Hooks:

• useState()

• useEffect()

• useContext()

useState()
It is used to add state management to functional components.
useState returns an array with two elements the current state value and a function to update
the state.

Syntax
const [state, setState] = useState(initialValue);

state: A variable that holds the current state value.

setState: A function that is used to update the state.

initialValue: The initial value of the state, which can be any JavaScript value (like a string,
number, object, array, etc.)

map method in js
map() goes through each item in an array.

• It runs a function on each item.

• It makes a new array with the results.

• It doesn’t change the original array.

Example:
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

filter method in js
filter() checks each item in an array.

• It keeps the items that pass a test (return true).

• It creates a new array with only the items that passed.

• It doesn’t change the original array.

Example:
const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);

Conclusion:

The To-Do application was successfully developed and deployed on GitHub

You might also like