How to create a Basic React Web Application from Scratch

Download and install node: https://nodejs.org/en/download

Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Setup: Start by setting up your React application. You can use create-react-app for this:

npx create-react-app my-app

Routing: Install react-router-dom for routing in your application.

npm install react-router-dom

Architecture wise, typically, you would need to create following:

Components: Create the necessary components. You'll need at least SignIn, SignUp, Dashboard, and SideNav components.

State Management: You might want to use a state management library like Redux or the Context API to manage the user's authentication state across the app.

Form Handling: For handling forms, you can use libraries like formik or react-hook-form.

Typical Node folder structure:

my-app/
  node_modules/
  public/
    index.html
    favicon.ico
  src/
    components/
      SignIn.js
      SignUp.js
      Dashboard.js
      SideNav.js
    App.js
    index.js
  package.json
  package-lock.json
  README.md

node_modules/: This folder contains all the packages that your project depends on. These packages are installed via npm.

public/: This folder contains static files like index.html and favicon.ico. The index.html file is the page template.

src/: This folder contains all your JavaScript code. It's where you'll spend most of your time.

components/: This is a subfolder inside src/ where you store all your React components. This includes SignIn.js, SignUp.js, Dashboard.js, and SideNav.js.

App.js: This is the main component that wraps all other components.

index.js: This is the JavaScript entry point. It renders the App component into the root div in index.html.

package.json: This file contains metadata about your project, like the project's name, version, and dependencies.

package-lock.json: This file is automatically generated and contains the exact dependency tree that was installed. It ensures that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

README.md: This file contains information about your project and instructions on how to use it.

To create the SignIn and SignUp components, you would create SignIn.js and SignUp.js files inside the components/ folder. Then, you can import these components into App.js or any other component where you want to use them.

Basic SignUp.js code:

import React from 'react';
import '../styles/SignUp.css';

function SignUp() {
  return (
    <div className="signup">
      <h2>Sign Up</h2>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Email:
          <input type="email" name="email" />
        </label>
        <label>
          Password:
          <input type="password" name="password" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default SignUp;

Basic SignIn.js code:

import React from 'react';
import '../styles/SignIn.css';

function SignIn() {
  return (
    <div className="signin">
      <h2>Sign In</h2>
      <form>
        <label>
          Email:
          <input type="text" name="email" />
        </label>
        <label>
          Password:
          <input type="password" name="password" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default SignIn;

App.css and App.js code for SignIn and SignUp:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.welcome-message {
  flex-grow: 1;
  color: #FD0;
  text-align: center;
}

h1.welcome-message {
  padding-top: 50px;
  padding-bottom: 25px;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.signin, .signup {
  width: 300px;
  margin: 25px auto;
}

.signin form, .signup form {
  display: flex;
  flex-direction: column;
}

.signin label, .signup label {
  margin-bottom: 10px;
}

.signin input, .signup input {
  margin-bottom: 20px;
}

import React from 'react';
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';

function App() {
  return (
    <div className="App">
      <SignIn />
      <SignUp />
    </div>
  );
}

export default App;

Please execute following to fix any vulnerabilities in your app:

npm audit fix --force

To check the rendered app on browser, execute:

npm start

Go yo browser: http://localhost:3000/

Add Navigation items at the top in root file by:

First, create a Navbar component:

import React from 'react';
import { Link } from 'react-router-dom';
import '../styles/Navbar.css';
import logo from '../logo.svg'; // replace with the path to your logo

function Navbar() {
  return (
    <nav className="navbar">
      <Link to="/"><img src={logo} alt="Logo" className="logo" /></Link>
      {/* <h1 className="welcome-message">Welcome to My App</h1> */}
      <div className="links">
        <Link to="/signup">Sign Up</Link>
        <Link to="/signin">Sign In</Link>
        <Link to="/blog">Blog</Link>
        <Link to="/pricing">Pricing</Link>
      </div>
    </nav>
  );
}

export default Navbar;

Next, create a Navbar.css file to style your navigation bar:

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 0 0;
  }

  .logo {
    width: 50px;
    height: 50px;
  }


  .links {
    display: flex;
    justify-content: space-around;
    /* flex-grow: 1; */
    width: 50%
  }

  .navbar a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
  }

  .navbar a:hover {
    color: #ddd;
  }

Finally, import the Navbar component in your App.js file:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import Home from './components/Home';
import './App.css';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
          {/* Add more routes as needed */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

You can also add some styling for SignIn and SignUp and the App should be up and running, with Home page, Sign-in/Sign-Up pages and their routes defined.

Will add Context, State Management, Form Handling in my next Article, to make this App production ready.