A Beginner’s Journey into the MERN Stack: Introduction to MERN and React Setup

Hello readers! I’m Muhammad Muneeb, and in this post, I’m excited to share my experience and insights as I start learning the MERN stack. I’m currently diving deep into this stack as part of my learning journey at Aptech, and I’ll be documenting each step along the way. This blog post is part of a series where I’ll be breaking down everything I learn.

In today’s post, I’ll be providing an introduction to the MERN stack and guiding you through the very first session of React. So, without further ado, let’s get started!

What is the MERN Stack?

Before jumping into React, let’s understand what the MERN stack actually is.

MERN is an acronym for a set of four JavaScript technologies that work together to build full-stack web applications. Here’s what each technology in the stack represents:

1. MongoDB: A NoSQL database that stores data in flexible, JSON-like documents. It’s a source-available, cross-platform, document-oriented database. MongoDB doesn’t use schemas (though optional schemas can be defined), allowing for a more dynamic and flexible data structure.
2. Express.js: A web application framework for Node.js that helps build RESTful APIs. It simplifies the development of the back-end by providing utilities to handle HTTP requests, middleware, routing, and more.
3. React: A JavaScript library developed by Facebook, primarily used for building dynamic user interfaces (UI). React allows developers to create reusable components that help structure complex UIs with minimal code.
4. Node.js: A runtime environment that enables developers to use JavaScript for back-end development. It allows JavaScript to run on the server side, making it possible to write both the client-side and server-side code in the same language.

Setting Up Your Project

Now that we have a brief overview of the MERN stack, let’s get started with setting up React in your project!

1. Installing Node.js

The first step is to install Node.js. This will allow you to run JavaScript outside the browser and is essential for building MERN stack projects.

You can easily download the latest version of Node.js from its official website. Once installed, you’ll be able to run commands in your terminal to manage your project.

2. Creating a React Project

Once Node.js is installed, it’s time to create your React project. To do this, you can use the following command:

npm create vite

Or, to always use the latest version of Vite:

npm create vite@latest

This command will create a Vite-powered React project. After running it, you’ll be asked to choose a name for your project folder. You can either choose a custom name or accept the default “vite-project.”

3. Installing Dependencies

After the project folder is created, navigate to it using the following command:

cd vite-project

Next, install the dependencies by running:

npm install

This command will install all necessary packages for your React project. Depending on your internet speed and system configuration, this process may take a few minutes. The project will likely install up to 281 packages, so be patient!

4. Opening the Project

Once the dependencies are installed, you can open the project in your code editor. If you’re using Visual Studio Code, the command to open your project is:

code .

5. Running the Development Server

To see your React project in action, run:

npm run dev

This will start the development server and generate a local link that you can open in your browser. By default, you should see a simple counter app created by Vite. It’s a great starting point to begin building your application.

Understanding the Folder and File Structure

As we explore the project structure, you’ll find that there are three main folders in the root directory:

1. node_modules: This folder contains all the installed dependencies. You’ll see it grow as you install additional packages throughout the project.
2. public: This folder contains assets like the default Vite logo.
3. src: This is where the magic happens. The src folder holds the primary files for your React app. Inside, you'll find:

• assets: A folder where you can store images to use in your project.
• App.jsx: This is the main component of your app where you’ll write most of your React code.
• App.css: The CSS file used to style App.jsx.
• index.css: A global stylesheet used to add utility classes, such as those from Tailwind CSS (if you choose to install it later).
• main.jsx: The entry point for the application. It renders the App.jsx component and handles routing, if applicable.

Additionally, there are other files like index.html, which is the template file that loads in the browser, and package.json and package-lock.json, which manage dependencies.

The vite.config.js file will be modified if you decide to install Tailwind CSS or any other tools, but we’ll cover that in future posts.

Wrapping Up

And there you have it! We’ve covered the basics of setting up the MERN stack with React and understanding the project structure. This concludes the first session on React, and I’m excited to dive deeper in the next blog post.

Stay tuned for tomorrow’s post, where we’ll go over how to install Tailwind CSS in a React project, along with more React basics. Thanks for reading, and I look forward to sharing more with you!