Step 1: Set up a new React project
Open your terminal or command prompt.
Run the following command to create a new React project:
npx create-react-app weather-app
Once the project is created, navigate into the project directory:
cd weather-app
Step 2: Install required packages
In the project directory, install the necessary packages by executing the following command
npm install
We will use the Axios library to make HTTP requests to the OpenWeatherMap API.
Step 3: Create all components
LabPrograms\14\todo-app> npm start
package.json
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.css
.App {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
}
.todo-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 2rem;
}
.todo-form {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.todo-input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.todo-button {
padding: 0.5rem 1rem;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.todo-button:hover {
background-color: #45a049;
}
.todo-list {
list-style: none;
padding: 0;
margin: 0;
}
.todo-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem;
border-bottom: 1px solid #eee;
}
.todo-item:last-child {
border-bottom: none;
}
.todo-item input[type="checkbox"] {
margin-right: 0.5rem;
}
.todo-item span {
flex: 1;
}
.delete-button {
padding: 0.25rem 0.5rem;
background-color: #ff4444;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.delete-button:hover {
background-color: #cc0000; }
App.js
import React, { Component, useState } from 'react';
import './App.css';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
function App() {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
if (text.trim() !== '') {
const newTodo = {
id: Date.now(),
text: text,
completed: false
};
setTodos([...todos, newTodo]);
}
};
const toggleTodo = (id) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div className="App">
<div className="todo-container">
<h1>Todo List</h1>
<TodoForm onSubmit={addTodo} />
<TodoList
todos={todos}
onToggle={toggleTodo}
onDelete={deleteTodo}
/>
</div>
</div>
);
}
export default App;
index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Components/TodoForm.js
import React, { useState } from 'react';
function TodoForm({ onSubmit }) {
const [text, setText] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSubmit(text);
setText('');
};
return (
<form onSubmit={handleSubmit} className="todo-form">
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Add a new todo..."
className="todo-input"
/>
<button type="submit" className="todo-button">
Add
</button>
</form>
);
}
export default TodoForm;
Components/TodoList.js
import React from 'react';
function TodoList({ todos, onToggle, onDelete }) {
return (
<ul className="todo-list">
{todos.map(todo => (
<li key={todo.id} className="todo-item">
<input
type="checkbox"
checked={todo.completed}
onChange={() => onToggle(todo.id)}
/>
<span
style={{
textDecoration: todo.completed ? 'line-through' : 'none'
}}
>
{todo.text}
</span>
<button
onClick={() => onDelete(todo.id)}
className="delete-button"
>
Delete
</button>
</li>
))}
</ul>
);
}
export default TodoList;
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Todo List Application created using React"
/>
<title>Todo List App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Uploading a Project to GitHub Using Git
Introduction
Git is a powerful version control system that allows developers to track changes, collaborate, and
manage project history efficiently. This guide provides step-by-step instructions on how to
upload a project to GitHub using Git.
Prerequisites
Before proceeding, ensure you have the following:
A GitHub account (Sign up at GitHub).
Git installed on your computer. To check, run git --version in your terminal. If not
installed, download it from git-scm.com.
A project folder containing the files you wish to upload.
Step 1: Configure Git
Before using Git, configure it with your credentials:
1. Set your username:
2. git config --global user.name "Your Name"
3. Set your email (use the same email associated with your GitHub account):
4. git config --global user.email "
[email protected]"
5. Verify the configuration:
6. git config --list
Step 2: Create a New Repository on GitHub
1. Log in to your GitHub account.
2. Click the + icon in the top-right corner and select New repository.
3. Enter a repository name and an optional description.
4. Select the repository’s visibility (Public or Private).
5. Do not initialize the repository with a README, .gitignore, or license.
6. Click Create repository.
Step 3: Initialize Git in Your Project
1. Open a terminal or command prompt.
2. Navigate to your project directory using:
3. cd /path/to/your/project
4. Initialize Git in the directory:
5. git init
Step 3: Add and Commit Files
1. Add all project files to Git tracking:
2. git add .
3. Commit the changes with a descriptive message:
4. git commit -m "Initial commit"
Step 4: Link the Local Repository to GitHub
1. Copy the repository URL from GitHub (e.g.,
https://github.com/yourusername/repository.git ).
2. Add the remote repository:
3. git remote add origin https://github.com/yourusername/repository.git
4. Verify the remote URL:
5. git remote -v
Step 5: Push the Project to GitHub
1. Push the committed changes to GitHub:
2. git branch -M main
3. git push -u origin main
4. You may be prompted to enter your GitHub credentials.
Conclusion
Your project is now successfully uploaded to GitHub. You can view it by navigating to your
repository URL in a web browser. Git allows you to track changes, collaborate, and manage
project history efficiently.
Next Steps
Clone your repository on another machine: git clone
https://github.com/yourusername/repository.git
Make and push changes:
git add .
git commit -m "Updated feature"
git push origin main
Pull the latest changes from GitHub:
git pull origin main
