How I Built My Single-Page React.js Web App.

Introduction

In my pursuit of becoming a front-end web developer, I embarked on the journey of creating a single-page React app for a school project, which I named "Dream Job." This application serves as a platform for connecting job seekers with job opportunities, enabling users to search for and apply to job listings while also allowing recruiters to post their job openings and receive applications from suitable candidates.

Objective

The primary goal behind developing this app was to serve my community and provide a solution to a common challenge. In many instances, people within my community frequently asked one another about job opportunities. As a web developer, I recognized the need to create a centralized platform where individuals could easily find job listings without relying on personal connections.

The Creation Process

Technology and Process

For this project, I focused on building the front-end of the application. To achieve the final result, I employed the following technologies:

React: As the core framework, React was my obvious choice, given that it was a school project.
React-Bootstrap: To streamline the development of forms and ensure the app's responsiveness across various devices.
React-toastify: To provide user feedback after performing actions.
Creating the React App

The journey began with setting up the basic file structure for the app using the create-react-app package. Here's the terminal command for initializing the project:

npx create-react-app my_phase2_project

Using React-Bootstrap
To leverage React-Bootstrap, you should also install the npm package:

npm install react-bootstrap

After installation, import the necessary components into your project, as demonstrated below:

Let's create a component called Component.js:

import React from "react";
import { Form, Button } from "react-bootstrap";

function Component() {
  // Other code
  return (
    <form>
      <Form.Group controlId="theId">
        <Form.Label className="name">Name</Form.Label>
        <Form.Control className="try" placeholder="Enter name" />
      </Form.Group>
      <Button>Send</Button>
    </form>
  );
}

In our Component.js, we imported Form and Button from react-bootstrap.
Ensure that you include the React-Bootstrap CSS at the top of your index.js file to prevent conflicts with your custom CSS:

In index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from "react";
// Other imports

Using React-toastify

React-toastify is the best tool to give feedback to a user after performing a task. As with the other technologies, we also need to import the package from npm.

steps:
Install the package using npm:

npm install --save react-toastify

Import the ToastContainer component and the corresponding CSS into your App component:

In App.js:

import React from "react";
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

function App() {
  // Other code
  return (
    <div>
      <ToastContainer />
      {/* Other components */}
    </div>
  );
}

In the App.js component, we imported ToastContainer from react-toastify, and we rendered it at the top of the other component.
Now, you can use React-toastify in any component by importing it and calling the toast function as shown below:

Let's use it inside our Component.js

import React from "react";
import { Form, Button } from "react-bootstrap";
import { toast } from "react-toastify";

function Component() {
  function send() {
    toast.success("Sent with success");
  }
  // Other code
  return (
    <form>
      <Form.Group controlId="theId">
        <Form.Label className="name">Name</Form.Label>
        <Form.Control className="try" placeholder="Enter name" onChange={handleChange} />
      </Form.Group>
      <Button onClick={send}>Send</Button>
    </form>
  );
}

Here, we imported the toast function from react-toastify. and we created a function called send that will be triggered anytime the user clicks on the Send button, and the successful message will appear. "Sent with success"

Controlling the inputs

One of the important things in learning React is to control the inputs and forms. In the beginning, it seems to be complicated, but in reality, it’s a simple process.
In this post, we will see how to control the inputs using the onChange event, and in the other post, we will discuss how to use the onSubmit event in react.

Let’s use the same component.js and control the inputs.

To effectively control input fields in React, we use the useState hook. Here's an example:

in the Component.js

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { toast } from "react-toastify";

function Component() {
  const [input, setInput] = useState({
    email: "",
    password: ""
  });


  function handleChange(event) {
    const value = event.target.value;
    const name = event.target.name;

    setInput({
      ...input,
      [name]: value
    });
  }


  function handleSubmit() {
    // Other code
    toast.success("Sent with success");
  }

  return (
    <form onSubmit={handleSubmit}>
      <Form.Group controlId="email">
        <Form.Label className="email">Email</Form.Label>
        <Form.Control className="try" placeholder="Enter email" name="email" onChange={handleChange} />
      </Form.Group>

      <Form.Group controlId="password">
        <Form.Label className="password">Password</Form.Label>
        <Form.Control className="try" placeholder="Enter password" name="password" onChange={handleChange} />
      </Form.Group>

      <Button type="submit">Send</Button>
    </form>
  );
}

Here, we create a second Form.group for the password field. We create a state called input using the useState hook that we imported from React.
we next seated the initial value of the input to be an object with the keys email and password and set them to empty strings.

We then created the callback function name handleChange to control and passed it to both inputs using the onChange event.
Inside handleChange, we created two constants, the value and the name, which track the input's value and name, respectively, while we start typing in.
Finally, we use the setState function: setInput, pass in the state, and associate the name and value using the spread operator.

Other React Hooks and Libraries Used
In addition to the above technologies, I also employed the following React hooks and libraries:

useHistory() hook for navigating users to other pages.
React Router (Switch, Route, BrowserRouter) for implementing the navigation bar.
For the navigation bar itself, I used React-Bootstrap components.
Here's an example of how to create a navigation bar using React-Bootstrap:

// Navbar.js
import React from "react";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";

function Navbar() {
  // Other code
  return (
    <Navbar bg="choosefrombootstrap">
      <Container>
        <Navbar.Brand>Your brand</Navbar.Brand>
        <Nav>
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

Ensure that the defined routes in your navigation bar correspond to the routes defined in your App.js file, as illustrated below:

// App.js
import React from "react";
import { ToastContainer } from "react-toastify";
import { Switch, Route } from "react-router-dom";
import 'react-toastify/dist/ReactToastify.css';

function App() {
  // Other code
  return (
    <div>
      <ToastContainer />
      <NavigationBar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/contact">
          <Contact />
        </Route>
      </Switch>
    </div>
  );
}

Lastly, wrap your entire app with BrowserRouter in the index.js file:

// index.js
import 'bootstrap/dist/css/bootstrap.css';
import React from "react";
import { createRoot } from "react-dom";
import { BrowserRouter } from "react-router-dom";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Conclusion
This marks the end of the first post of my learning in React. And there are some other parts, like how I used onSubmit and also how I authenticated the users. I will cover these points in the future.
As I built only the front end of the Dream Job App, I'm actively learning how to work in the back end because I would like to bring this app alive to make it useful.
So, if anyone is interested in helping to build the back end or make a suggestion, the project is on Github.
Your input and collaboration are greatly appreciated as I continue to learn and grow in the world of web development.

Thank you.