Program 12: Creating a React application for a student management system with

registration, login, contact, and about pages involves several steps. Below, I’ll outline
how to set up this application

Step 1: Set Up the Project

1. Install Node.js: Make sure you have Node.js installed on your computer. You can download
it from nodejs.org.

2. Create a New React Application: Open your terminal and run:

npx create-react-app student-management-system

cd student-management-system

npm install react-router-dom

Step 3: Create Components

In the src directory, create a folder named components and add the following files: Registration.js,
Login.js, Contact.js, About.js, and Home.js.

CODE:

src/components/Registration.js

import React from 'react';

const Registration = () => {

return (

<div>

<h2>Registration Page</h2>

<form>

{/* Form fields for registration */}

</form>

</div>

);

};

export default Registration;

src/components/Login.js

import React from 'react';

const Login = () => {

return (

<div>

<h2>Login Page</h2>

<form>

{/* Form fields for login */}

</form>

</div>

);

};

export default Login;

src/components/Contact.js

import React from 'react';

const Contact = () => {

return (

<div>

<h2>Contact Page</h2>

<p>Contact information here...</p>

</div>

);

};

export default Contact;

src/components/About.js

import React from 'react';

const About = () => {

return (

<div>
 <h2>About Page</h2>

<p>Information about the student management system...</p>

</div>

);

};

export default About;

src/components/Home.js

import React from 'react';

const Home = () => {

return (

<div>

<h2>Home Page</h2>

<p>Welcome to the Student Management System</p>

</div>

);

};

export default Home;

Step 4: Set Up Routing

Modify src/App.js to include routing.

src/App.js

import React from 'react';

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

import Home from './components/Home';

import Registration from './components/Registration';

import Login from './components/Login';

import Contact from './components/Contact';

import About from './components/About';

const App = () => {

return (

<Router>

<div>

<nav>

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/registration">Registration</Link></li>

<li><Link to="/login">Login</Link></li>

<li><Link to="/contact">Contact</Link></li>

<li><Link to="/about">About</Link></li>

</ul>

</nav>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/registration" element={<Registration />} />

<Route path="/login" element={<Login />} />

<Route path="/contact" element={<Contact />} />

<Route path="/about" element={<About />} />

</Routes>

</div>

</Router>

);

};

export default App;

Step 5: Run the Application

In your terminal, navigate to the project directory and run:

npm start
Program 13:

Create a service in react that fetches the weather information from

openweathermap.org and the display the current and historical weather information
using graphical representation using chart.js in vs code

Steps to follow:

Open windows power shell

Step 1: Open PowerShell as Administrator

1. Press Windows + X and select Windows PowerShell (Admin) or Windows Terminal (Admin)
if you have the updated terminal.

2. Confirm the UAC prompt to proceed with administrative privileges.

Step 2: Change the Execution Policy

Run the following command to set the execution policy to allow scripts to run:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

You might be prompted to confirm the change. Type Y and press Enter

Step 3: Verify the Policy Change

You can check the current execution policy by running:

Get-ExecutionPolicy –List

Ensure that RemoteSigned is set for the CurrentUser.

Step 4: Run the serve Command Again

Now that the execution policy is set, you should be able to run the serve command without issues:

serve -s build

Alternative: Using npx for Local Serve

If you prefer not to change your execution policy, you can use npx to run serve without globally
installing it

npx serve -s build

1. Set Up the Project:

 Ensure you have Node.js and npm installed.

 Create a new React project using create-react-app.

 Install Axios for making HTTP requests and Chart.js for creating charts.

2. Create an OpenWeatherMap Account:

  Sign up at OpenWeatherMap.

 Get your API key.

3. Install Dependencies:

 Navigate to your project directory and install Axios and Chart.js:

npm install axios chart.js react-chartjs-2

1. Set Up the React Application:

 Create components for fetching and displaying weather data.

 Use Chart.js to create graphical representations of the weather data.

Here's a step-by-step guide:

Step 1: Create the Project

Open your terminal and run:

npx create-react-app weather-app

cd weather-app

npm install axios chart.js react-chartjs-2

Step 2: Create the Weather Service

Create a new file src/services/weatherService.js and add the following code to fetch weather data:

import axios from 'axios';

const API_KEY = 'your_openweathermap_api_key';

const BASE_URL = 'https://api.openweathermap.org/data/2.5';

export const fetchCurrentWeather = async (city) => {

try {

const response = await axios.get(`${BASE_URL}/weather`, {

params: {

q: city,

appid: API_KEY,

units: 'metric',

},

});

return response.data;
 } catch (error) {

console.error("Error fetching the current weather data:", error);

};

export const fetchHistoricalWeather = async (city) => {

try {

const response = await axios.get(`${BASE_URL}/onecall/timemachine`, {

params: {

q: city,

appid: API_KEY,

units: 'metric',

dt: Math.floor(Date.now() / 1000) - 86400, // 24 hours ago

},

});

return response.data;

} catch (error) {

console.error("Error fetching the historical weather data:", error);

};

Step 3: Create the Weather Component

Create a new component src/components/Weather.js and add the following code to display the
weather data:

import React, { useState, useEffect } from 'react';

import { Line } from 'react-chartjs-2';

import { fetchCurrentWeather, fetchHistoricalWeather } from '../services/weatherService';

const Weather = () => {

const [currentWeather, setCurrentWeather] = useState(null);

const [historicalWeather, setHistoricalWeather] = useState(null);

const [city, setCity] = useState('London');

useEffect(() => {

const fetchWeatherData = async () => {

const currentData = await fetchCurrentWeather(city);

setCurrentWeather(currentData);

const historicalData = await fetchHistoricalWeather(city);

setHistoricalWeather(historicalData);

};

fetchWeatherData();

}, [city]);

const data = {

labels: historicalWeather ? historicalWeather.hourly.map((_, index) => index) : [],

datasets: [

label: 'Temperature (°C)',

data: historicalWeather ? historicalWeather.hourly.map(hour => hour.temp) : [],

fill: false,

backgroundColor: 'rgba(75,192,192,1)',

borderColor: 'rgba(75,192,192,1)',

},

],

};

return (

<div>

<h1>Weather in {city}</h1>

{currentWeather && (

<div>

<p>Temperature: {currentWeather.main.temp} °C</p>

<p>Weather: {currentWeather.weather[0].description}</p>
 </div>

)}

<Line data={data} />

</div>

);

};

export default Weather;

Step 4: Modify App Component

Modify src/App.js to include the Weather component:

import React from 'react';

import Weather from './components/Weather';

import './App.css';

function App() {

return (

<div className="App">

<header className="App-header">

<h1>Weather App</h1>

</header>

<Weather />

</div>

);

export default App;

Step 5: Run the Application

Run your React application with:

npm start
Program 14:

Create a TODO application in react with necessary components and deploy it into
github. in vs code

Sure, let's create a simple TODO application using React and deploy it to GitHub. Here are the steps:

1. Set up the React project

2. Create necessary components

3. Implement the TODO application logic

4. Deploy the application to GitHub

Step 1: Set Up the React Project

First, you need to set up a new React project. Open your terminal and run the following commands:

npx create-react-app todo-app

cd todo-app

code .

Step 2: Create Necessary Components

We'll create three components:

 App: The main component

 TodoList: To display the list of TODOs

 TodoItem: To display a single TODO item

 TodoForm: To add a new TODO

1. App Component

Open src/App.js and replace its content with the following:

import React, { useState } from 'react';

import TodoList from './components/TodoList';

import TodoForm from './components/TodoForm';

import './App.css';

function App() {

const [todos, setTodos] = useState([]);

const addTodo = (text) => {

const newTodos = [...todos, { text, completed: false }];

 setTodos(newTodos);

};

const toggleTodo = (index) => {

const newTodos = [...todos];

newTodos[index].completed = !newTodos[index].completed;

setTodos(newTodos);

};

const deleteTodo = (index) => {

const newTodos = [...todos];

newTodos.splice(index, 1);

setTodos(newTodos);

};

return (

<div className="App">

<h1>TODO List</h1>

<TodoForm addTodo={addTodo} />

<TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />

</div>

);

export default App;

2. TodoList Component

Create a new file src/components/TodoList.js and add the following content:

import React from 'react';

import TodoItem from './TodoItem';

function TodoList({ todos, toggleTodo, deleteTodo }) {

 return (

<ul>

{todos.map((todo, index) => (

<TodoItem

key={index}

todo={todo}

index={index}

toggleTodo={toggleTodo}

deleteTodo={deleteTodo}

/>

))}

</ul>

);

export default TodoList;

3. TodoItem Component

Create a new file src/components/TodoItem.js and add the following content:

import React from 'react';

function TodoItem({ todo, index, toggleTodo, deleteTodo }) {

return (

<li>

<span

style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}

onClick={() => toggleTodo(index)}

>

{todo.text}

</span>

<button onClick={() => deleteTodo(index)}>Delete</button>

</li>
 );

export default TodoItem;

4. TodoForm Component

Create a new file src/components/TodoForm.js and add the following content:

import React, { useState } from 'react';

function TodoForm({ addTodo }) {

const [value, setValue] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

if (!value) return;

addTodo(value);

setValue('');

};

return (

<form onSubmit={handleSubmit}>

<input

type="text"

value={value}

onChange={(e) => setValue(e.target.value)}

placeholder="Add a new TODO"

/>

<button type="submit">Add</button>

</form>

);

}
export default TodoForm;

Step 3: Implement the TODO Application Logic

The logic for adding, toggling, and deleting TODOs is already implemented in the App component.
Each component is responsible for a specific part of the application:

 TodoForm handles adding new TODOs.

 TodoList displays all TODOs.

 TodoItem displays and manages individual TODO items.

Step 4: Deploy the Application to GitHub

1. Initialize a Git repository and commit your code:

git init

git add .

git commit -m "Initial commit"

2. Create a new repository on GitHub and follow the instructions to push your code. Typically, it will
look something like this:

git remote add origin https://github.com/yourusername/todo-app.git

git branch -M main

git push -u origin main

3. Deploy to GitHub Pages

To deploy your React app to GitHub Pages, you need to install the gh-pages package and add a few
scripts to your package.json.

Install the gh-pages package:

npm install gh-pages --save-dev

Add the following properties to your package.json file:

"homepage": "https://yourusername.github.io/todo-app",

Add the following scripts to the scripts section of your package.json:

"predeploy": "npm run build",

"deploy": "gh-pages -d build",

Now, deploy your app:

npm run deploy

Your TODO application should now be live on GitHub Pages at https://yourusername.github.io/todo-

app.