New React Project & Install Bootstrap | Full-Stack CRUD App with Node JS, & React | MERN Stack | #2

Are you ready to start a new project using the MERN stack? In this article, we will walk you through how to set up a new React project, install Bootstrap, and create a full-stack CRUD app with Node JS and React.

Setting up a new React project

To start a new React project, you will need to have Node and NPM installed on your machine. Once you have those installed, you can use the following commands to create a new React project:


$ npx create-react-app my-frontend-app
$ cd my-frontend-app
$ npm start


This will create a new React project called my-frontend-app and start a development server where you can view your app in the browser.

Installing Bootstrap

Now that you have a new React project set up, you can install Bootstrap to easily style your app. To install Bootstrap, run the following command in your project directory:


$ npm install bootstrap


Once Bootstrap is installed, you can import it into your project by adding the following line to your index.js file:


import 'bootstrap/dist/css/bootstrap.min.css';


Creating a full-stack CRUD app with Node JS and React

Now that you have your frontend set up with React and Bootstrap, it’s time to create a backend using Node JS. You can use Express to create a REST API for your app, and MongoDB to store your data.

Once your backend is set up, you can start building out your frontend to make requests to your backend API. You can use Axios to make HTTP requests from your React app to your Node JS backend.

Conclusion

By following the steps outlined in this article, you can create a new React project, install Bootstrap, and create a full-stack CRUD app with Node JS and React. This will give you a solid foundation for building larger, more complex applications using the MERN stack.