How I Built My Single-Page React.js Web App.
Tags: javascript, beginners, programming, react
Published: 2023-10-01 15:05:17

**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`: 

```JSX
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
``` JSX
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:
```JSX
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

```JSX
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

```JSX
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:

```JSX
// 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:

```JSX
// 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:

```JSX
// 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](https://github.com/Kandedriva/final_project).
Your input and collaboration are greatly appreciated as I continue to learn and grow in the world of web development.

Thank you.