2024
[HOW TO CREATE REACT APP?]
Prepared By: SUCHIKA PATEL
SDJ International College,Palsana
Creating a New React App
Step 1: Open Terminal
Open VS Code terminal or Command Prompt.
Step 2: Create React App
Run the command to create a new React app:
npx create-react-app [your-project-name]
Example:
npx create-react-app signup-signin
Step 3: Navigate to Project Directory
Change directory to your project folder:
cd [your-project-name]
Example:
cd signup-signin
Step 4: Open Project in VS Code
If you're using the VS Code terminal, open the project in VS Code:
code .
Step 5: Start the React App
Start the development server:
npm start
Setting Up Your React App
Step 6: Update App.js
Open App.js and modify the <div> tag to add a heading:
function App() {
Advanced Web Designing Page 2
SDJ International College,Palsana
return (
<div>
<h1>SIGNUP PAGE</h1>
</div>
);
}
export default App;
Step 7: Clear Default Styling
Open index.css and App.css, and remove all content. In App.css, add:
body {
background-color: aliceblue;
}
Creating Signup Page
Step 8: Create Signup Folder and Files
In the src folder, create a new folder named Signup and within it, create two files:
a. Signup.css
b. Signup.jsx.
Step 9: Setup Signup.jsx
Add the following content to Signup.jsx:
import React from 'react';
import "./Signup.css";
const Signup = () => {
return (
<div className="addUser">
<h3>Sign Up</h3>
<form className="addUserForm">
<div className="inputGroup">
<label htmlFor="name">Name:</label>
<input type="text" placeholder="Enter your name" id="name"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="email">Email:</label>
<input type="text" placeholder="Enter email" id="email"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="password">Password:</label>
Advanced Web Designing Page 3
SDJ International College,Palsana
<input type="password" placeholder="Enter password" id="password"
autoComplete="off" />
</div>
<button type="submit" className="btn btn-success">SIGN UP</button>
</form>
<div className="login">
<p>Already have an account?</p>
<button type="button" className="btn btn-primary">LOGIN</button>
</div>
</div>
);
}
export default Signup;
Step 10: Style Signup Page
Add the following content to Signup.css:
.addUser {
margin: 50px;
background-color: white;
width: 25%;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.065);
}
.addUserForm .inputGroup {
width: 100%;
display: flex;
flex-direction: column;
}
.addUserForm .inputGroup label {
margin: 10px 0;
}
.addUserForm .inputGroup input {
margin-top: 5px;
padding: 10px;
}
.inputGroup button {
margin-top: 10px;
}
.login {
margin-top: 30px;
text-align: center;
}
.login .btn {
width: 70px;
}
Advanced Web Designing Page 4
SDJ International College,Palsana
.addUser h3 {
text-align: center;
font-weight: bold;
color: darkcyan;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
Adding Bootstrap
Step 11: Install Bootstrap
Install Bootstrap via npm:
npm install bootstrap
Step 12: Add Bootstrap to Project
In index.html, add the following links in the <head> section:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.mi
n.js"
></script>
Setting Up Routing
Step 13: Install React Router
Install react-router-dom:
npm install react-router-dom
Step 14: Configure Routes in App.js
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Signup from './Signup/Signup';
function App() {
return (
<Router>
<div className="App">
Advanced Web Designing Page 5
SDJ International College,Palsana
<Routes>
<Route path="/" element={<Signup />} />
</Routes>
</div>
</Router>
);
}
export default App;
Creating Login Page
Step 15: Create Login Folder and Files
In the src folder, create a new folder named Login and within it, create two files:
a. Login.css
b. Login.jsx.
Step 16: Setup Login.jsx
Add the following content to Login.jsx:
import React from 'react';
import "./Login.css";
const Login = () => {
return (
<div className="addUser">
<h3>Sign In</h3>
<form className="addUserForm">
<div className="inputGroup">
<label htmlFor="email">Email:</label>
<input type="text" placeholder="Enter email" id="email"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="password">Password:</label>
<input type="password" placeholder="Enter password" id="password"
autoComplete="off" />
</div>
<button type="submit" className="btn btn-primary">SIGN IN</button>
</form>
<div className="signup">
<p>Don't have an account?</p>
<button type="button" className="btn btn-primary">SIGN UP</button>
</div>
</div>
);
}
export default Login;
Advanced Web Designing Page 6
SDJ International College,Palsana
Step 17: Style Login Page
Add the following content to Login.css (same as Signup.css):
.addUser {
margin: 50px;
background-color: white;
width: 25%;
padding: 40px;
border-radius: 10px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.065);
}
.addUserForm .inputGroup {
width: 100%;
display: flex;
flex-direction: column;
}
.addUserForm .inputGroup label {
margin: 10px 0;
}
.addUserForm .inputGroup input {
margin-top: 5px;
padding: 10px;
}
.inputGroup button {
margin-top: 10px;
}
.signup {
margin-top: 30px;
text-align: center;
}
.signup .btn {
width: 70px;
}
.addUser h3 {
text-align: center;
font-weight: bold;
color: darkcyan;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
Step 18: Update Routes in App.js
Modify App.js to include the Login route:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
Advanced Web Designing Page 7
SDJ International College,Palsana
import Signup from './Signup/Signup';
import Login from './Login/Login';
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route path="/" element={<Signup />} />
<Route path="/login" element={<Login />} />
</Routes>
</div>
</Router>
);
}
export default App;
Step 19: Update Navigation Links
Update Signup.jsx to use the Link component from react-router-dom:
import React from 'react';
import { Link } from 'react-router-dom';
import "./Signup.css";
const Signup = () => {
return (
<div className="addUser">
<h3>Sign Up</h3>
<form className="addUserForm">
<div className="inputGroup">
<label htmlFor="name">Name:</label>
<input type="text" placeholder="Enter your name" id="name"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="email">Email:</label>
<input type="text" placeholder="Enter email" id="email"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="password">Password:</label>
<input type="password" placeholder="Enter password" id="password"
autoComplete="off" />
</div>
<button type="submit" className="btn btn-success">SIGN UP</button>
</form>
<div className="login">
<p>Already have an account?</p>
<Link to="/login" className="btn btn-primary">LOGIN</Link>
</div>
</div>
);
}
Advanced Web Designing Page 8
SDJ International College,Palsana
export default Signup;
Step 20: Update Login.jsx Navigation Links
Update Login.jsx to use the Link component:
import React from 'react';
import { Link } from 'react-router-dom';
import "./Login.css";
const Login = () => {
return (
<div className="addUser">
<h3>Sign In</h3>
<form className="addUserForm">
<div className="inputGroup">
<label htmlFor="email">Email:</label>
<input type="text" placeholder="Enter email" id="email"
autoComplete="off" />
</div>
<div className="inputGroup">
<label htmlFor="password">Password:</label>
<input type="password" placeholder="Enter password" id="password"
autoComplete="off" />
</div>
<button type="submit" className="btn btn-primary">SIGN IN</button>
</form>
<div className="signup">
<p>Don't have an account?</p>
<Link to="/" className="btn btn-primary">SIGN UP</Link>
</div>
</div>
);
}
export default Login;
Final Steps
Your basic signup/signin React app setup is now complete. You can further customize the
components and styles as needed.
Advanced Web Designing Page 9
