DEV Community: Eli Brown-Henderson

How to set up React Router

Eli Brown-Henderson — Sun, 06 Jun 2021 21:12:48 +0000

One of the most advantageous parts of using the JavaScript library, React, is the existence of the virtual DOM. The virtual DOM makes Single Page Applications so powerful with its dynamic loading.

Because React is only concerned with the state of its components, If set up correctly, it only re-renders the components that need to be updated. This makes it possible for dynamic rendering to happen.

If you want to switch pages in a react application there are ways to do it dynamically, such as conditional rendering of a “Page”. Conditional rendering is useful for small, non-complex applications. For more robust applications that may have a more intricate tree structure, there is a more powerful tool.

React Router is a library for handling routing in React. It is more powerful than conditional rendering by allowing the developer to use, redirection, parameters, dynamic URL’s, and Props.

For the sake of this tutorial, we will only go over setting up the basics for a React application to use React Router.

To begin, You need to create a new React application of course. If You don’t know how to do this, check out my tutorial on setting up a react application here.

Once you have your application all set up, We are going to set up the application to make it as basic as possible.

We first will go into the project’s src directory and remove every file inside.

Next, we are going to make 5 simple files, App.js, index.js, Page1.js, Page2.js, and Page3.js.

After this is finished, we will set up the index.js to render the App.js function.

Next, we will set up the App.js component, and the Page components.

Page1.js

Page2.js

Page3.js

Now that this step is complete, we will install the react-router-dom dependency so we can set up React Router. We just need to open the terminal in the directory where our react project is and use the command 'npm install react-router-dom'.

Once we’ve done this, we can start setting up react-router.
In the App component, we need to import some components from react-router.
These components are Browser Router, Switch, and Route
We also need import the Page components, and wrap them in routes.

With this done, we can now set up our Router.
The router will allow any components inside of it to be routed.

Inside the routes we need to set the route paths that determine which component will be rendered.

With this done, We can now start the application and go to any of the routes that we set up, and the components will be rendered.
the 3 routes are

localhost:3000

localhost:3000/page2

localhost:3000/page3

We are essentially finished but we can take it a couple of steps further to really drive it home.

We can add links to each of the pages so that we can switch pages whenever we need to. All we need for this, is to import Link from react router.

page 1

page 2

page 3

Now we have a directory on every page

Finally, If we wanted to have a navigation bar at the top of the page for every page, we don't need to add it to every page component, we only need to add it at the top of the router in the app component.

Now We have a 'navbar' on every page!

This is all we need to get started with using react router. Now you should be able to setup simple routes, and links. You can build on this knowledge to create redirections, histories, directories, navbars, and much more.

Setup a new React Application

Eli Brown-Henderson — Sun, 06 Jun 2021 19:48:00 +0000

React is one of the most popular JavaScript libraries for creating interactive user interfaces.
It makes it easy to integrate your HTML with JavaScript by using JSX.

It is extraordinarily easy to get started using React with minimal knowledge of web-pack, or babble by using create react app. Setting up quickly allows you to get straight into learning to develop react applications, and exploring the concept of the Virtual DOM without having to worry about setting up a bunch of building tools and dependencies.

To Get started with using React, you should first make sure that you have an updated version of node on your system.

You can check your node version by using the command node -v in your terminal.

Once you are sure that you have a properly updated version of node, you can get started with creating your React application.

Next, you can create a new directory, then open your terminal and cd into that directory.

After you have entered the directory that you are going to create your application in, you can enter the command npx create-react-app demo

This will create a new directory inside of your project directory with the name demo, the demo directory contains your newly created React project.

It is useful to create the directory inside of the project directory if you would like to set up a back-end, or service directory in your project.

If you just want to create the React project directly in the directory that you created, you have to make sure that the directory has all lowercase letters and no spaces(Failure to do this will result in an error when trying to create the react project). You then enter the command npx create-react-app.

The ‘.’ allows the project to be created in the current directory.

All that is left is to start the project.
Cd into the new project with your terminal, and enter the command npm start

The react project will start and open up in your current browser.

Now you can get to learning more about developing react applications.

Connecting to a local MogoDB

Eli Brown-Henderson — Mon, 31 May 2021 05:32:40 +0000

For this tutorial, I suggest some basic knowledge in using express and NodeJS.
I also suggest having using postman and MongoDB compass.

Connecting

When creating a new node CRUD application that uses mongodb, it is important to test your endpoints by using live data. But, when you need your application to be connected quickly to the database, you don't want to spend your time waiting on a new cluster to be deployed. Also, if you are using a paid plan for your projects, and you want to test your application before setting the project up, this will be good for simple data storage.

Make sure that MongoDB is installed

The first thing we need to do, is to make sure that MongoDB is installed on our machine. If we enter the command
mongod --version
we should see the version of MongoDB server we have.
mongo -version
Will allow you to check the shell version.

If you get errors when entering these commands in your command line, you may need to configure or install mongoDB on your machine.

Using MongoDB compass

This is a MongoDB GUI that allows you to admin your Database projects locally, you could do this using atlas, but using this GUI is great to quickly connect to and admin your clusters.

You can download it here MongoDV Compass

Create a new node project

If you already have MongoDB installed, you can proceed to create a new node project.

In your command line, create a new directory
here we can call it, localConn

mkdir localconn

and cd into it
cd localconn

In that new directory, run the command
npm init -y
This will allow you create a new node project with the default names.

We can open the directory in our code editor and make a new file called server.js

Install dependencies

In our command line, we need to install the dependencies needed for the database and node server to work

For this simple demo, we can install express and mongoose
express allows us to host our server,
and mongoose allows us to easily interact with MongoDB

Setup the project

We first need to import our dependencies

const express = require('express'); 
const mongoose = require('mongoose');

Next, we need to initialize the express server with
const app = express()

Then we need a variable with the port number that we want the app to listen on
const port = 3001

We then need the server to actually listen on the port

we add at the end of the server.js file

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

Test the server

We can start the server with
npm start
We will need to restart the server after making changes.

Create a model to use

We need some data to add to our Mongo Database, for this demo we can use a simple User object.

We just need to make a new file called User.js and create the User model.

const mongoose = require("mongoose");

const userSchema = mongoose.Schema({
  name: {
    type: String,
  },
  age: {
    type: Number,
  },
});

module.exports = mongoose.model("User", userSchema);

Then we need to import the model into the server file.
The module import should now look like this.

const User = require('./User')
const express = require('express')
const mogoose = require('mongoose')
const app = express(); 
const port = 3001;

We then need to enable the ability for the server to use JSON objects

app.use(express.json())

Connect the to local MongoDB

Now we just have to connect to the DataBase

mongoose
  .connect("mongodb://localhost:27017/demoApp", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("connected via mongodb");
  })
  .catch((err) => console.log(err));

Here we are using the .then() syntax because the connection returns a promise.

With this, we are able to connect the DB with the name 'demoApp'.

Create a route to make a new User doc

Now to make a new user and add it to the database,
we can make a new post route.

app.post("/user", async (req, res) => {
  const { name, age } = req.body;
  try {
    const newUser = new User({
      name,
      age,
    });

    newUser.save();
    res.json(newUser);
  } catch (error) {
    res.status(500).json(error);
  }
});

This pulls the name and body fields from the req.body object.

We then make a new user with the name and age, and save it to the db.

We can then start the server
npm start

We can then actually create the new user, using postman we can send the information

Connect to compass

To check on our Database we can connect to the compass app. We can take the connection string that we used to connect the mongodb and enter it into the compass connection field.
mongodb://localhost:27017/demoApp

Check the DB

You should see your new DB under the name demoApp, once you click that you should now have a new user collection in the DB. Once you enter that, you can see the new User.

Conclusion

With this you can see that creating and testing a new DB can be quick and easy, with a small bit of setup you can test a full CRUD application.

Here is what the final code should look like

Server.js

const User = require("./User");
const express = require("express");
const mongoose = require("mongoose");
const app = express();
const port = 3001;

app.use(express.json());

mongoose
  .connect("mongodb://localhost:27017/demoApp", {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("connected via mongodb");
  })
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("server running");
});

app.post("/user", async (req, res) => {
  const { name, age } = req.body;
  try {
    const newUser = new User({
      name,
      age,
    });

    newUser.save();
    res.json(newUser);
  } catch (error) {
    res.status(500).json(error);
  }
});

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

User.js

const mongoose = require("mongoose");

const userSchema = mongoose.Schema({
  name: {
    type: String,
  },
  age: {
    type: Number,
  },
});

module.exports = mongoose.model("User", userSchema);