Learn how to build full stack web applications using the MERN stack, encompassing MongoDB, Express.js, React, and Node.js.

Become a Node.js Developer

This module will cover full stack web development using the MERN stack, which includes MongoDB, Express.js, React, and Node.js. Starting with the foundational setup of server-side architecture and client-side environments, it covers essential topics such as MVC patterns, RESTful API creation, and user authentication with JSON Web Tokens. 

We’ll learn to build and style responsive client applications, manage business logic, and implement CRUD operations on both the server and client sides. The module concludes with practical deployment techniques and supplementary resources for a comprehensive learning experience.

Full Stack Development with MERN

We can apply what we’ve learned so far by generating a basic React application that can be used as a boilerplate to build an even more complex application. To begin, let’s create a directory called frontend in the root directory of the project and navigate to it:
   ```
   mkdir frontend
   cd frontend
   ```



## Code `Hello World` using React

There are many ways to [add React to a website](https://reactjs.org/docs/add-react-to-a-website.html), but let’s use the most popular method, “_Create React App_.”  The `create-react-app` package is an `npm` package that is considered the best way to start building a new React project.

We install the `create-react-app` package and run the following command:

   ```js
   npx create-react-app .
   ```
   > **Note:** We use `npx`, not `npm`. That’s not a typo! The package runner `npx` comes with `npm` greater than or equal to 5.6.

Once the application is ready, the message `Happy hacking!` is printed to the terminal. Then we can start coding and customizing our application. We’ll use the `npm start` command to run the following application which will allow us to see the starter application generated by `create-react-app`.

> **Note:** We can access the running application by clicking the link next to “Your app can be found at.”



# Code `Hello World` using React

There are many ways to [add React to a website](https://reactjs.org/docs/add-react-to-a-website.html), but let’s use the most popular method, “_Create React App_.”  The `create-react-app` package is an `npm` package that is considered the best way to start building a new React project.

We install the `create-react-app` package and run the following command:

   ```js
   npx create-react-app .
   ```
   > **Note:** We use `npx`, not `npm`. That’s not a typo! The package runner `npx` comes with `npm` greater than or equal to 5.6.

Once the application is ready, the message `Happy hacking!` is printed to the terminal. Then we can start coding and customizing our application. We’ll use the `npm start` command to run the following application which will allow us to see the starter application generated by `create-react-app`.

> **Note:** We can access the running application by clicking the link next to “Your app can be found at.”


Let’s apply what we’ve learned so far about React.

The Server Side

User Authentication with a JSON Web Token

Set up the Client-side Environment

Develop the Client-side

Business Logic

Server-side Routes

Client-side Routes

Appendix

Conclusion

Code `Hello World` using React