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.
