How to Set Up a React Front-End for a Full-Stack Application

Building your first React front-end full-stack application is easy. This React front-end beginner’s tutorial will cover creating a new React app. We’ll also share some recommendations before diving into your first full-stack application project. 

If you need a complete React front-end and MERN stack tutorial, skip this article and sign-up for Shaun Wassell’s CBT Nuggets MERN Stack: Tutorial for Beginners class instead. It’s a crash course aimed at developers that can be completed in less than two hours. You’ll spend as much time reading this article as you will watching the first three videos of his course. 

An Overview of Setting Up React Front-end for Full-Stack Applications

In this video, CBT Nuggets trainer Shaun Wassell covers each of the steps to follow to set up your front-end for an eventual full-stack application in React. Watch along as Shaun creates a new project, verifies installations, and creates the first components for an eventual to-do list application.

How to Create a New React App

Creating a new React project is easy. So, pay attention. We’re going to fly through these steps fast. First, open your preferred command-line environment. Then, navigate to the directory where your React front-end project will live. Once in that directory, enter the command below:

npx create react-app NameOfApp

Replace ‘NameOfApp’ with the name of your project. For instance, if your first React front-end project is a to-do app, the new HelloWorld tutorial of the dev community, your project name might be ‘SuperAwesomeTodoFunList.’ For this example, the full command mentioned above will be ‘npx create react-app SuperAwesomeTodoFunList.’

Give the React CLI a few moments to create your new React project. It will download all the dependencies required for a base React app, configure some settings like a Git ignore file, and stage your React app for development. 

The Create React-App CLI application will create a new folder with your project's name inside the directory where the ‘npx create react-app’ command was initiated. That folder will contain everything for a stock React front-end single-page application (SPA). That includes configuration files, a base folder structure, and scripts. So go ahead and navigate to that folder now that your project has been created. 

How to Start a React App

This might be a good time to poke around your new React front-end application. Once you’re done looking through your new project, let’s start the development build for your React app. Do this by running the command below from the root folder of your React project (the folder just created from the steps above). 

npm run start

That command does a lot of heavy lifting, and explaining what ‘npm run start’ does in detail is beyond the scope of this article. The only thing you need to understand now is that the ‘npm run start’ command launches the development version of your React application so you can view it in your web browser. 

Once Node launches your React app, it will print the URL for your dev app in the command line. Copy and paste that URL into your web browser. You should see a website with a grey background and a spinning logo. Now you’re ready to start coding.

What Else You Should Know Before Creating a React Front-end Application

We could write an entire book on everything you need to know before writing a single line of code in your first React project, but we need to keep this article short for SEO reasons. With that said, here are the absolute basics I wish I had known before learning to build React apps.

Always Verify Node Versions

React depends on Node. Likewise, Node is the tool of choice for most MERN stack projects. You’ll need to install Node before getting started. While learning the MERN stack, use the latest version of Node available. If Node is already installed on your computer, check what version you have installed with the ‘node -v’ command in your command-line environment. 

Learn NVM

You’ll quickly learn that most projects you work with won’t use the latest Node version, however. Like all things in the software development world, projects don’t update libraries and tools until needed. Making things more confusing, you may work on projects in parallel that require different versions of Node. On top of that, NPM packages also target specific versions of Node.

Research a tool called NVM. It’s built specifically for changing your Node environment on the fly. Learn how to use NVM. It will save your bacon in the future. 

Download Compass

Compass is to Mongo, as SQL Workbench is to MySQL. The faster you understand it, the better your life will be. So, download Compass as soon as Shaun covers Mongo in his tutorial, and learn how to use it immediately. 

Start Learning React Concepts Today!

That was tons of fun! You’ve learned a lot in this article and are on your way to building your first MERN stack application. Learning how to build SPAs is a valuable skill set, and once you’re proficient, building production-ready web apps, proof of concepts, and demos is incredibly easy. 

You’re not done yet, however. At this point, your React front-end application is ready for development, but you need to learn how to create reusable components, organize your project, and fetch data to hydrate your app. What does any of that even mean? Ask Shaun Wassell. We mentioned his MERN stack beginner tutorial at the top of this article.  After Shaun's Learn the MERN Stack: Tutorial for Beginners training, you’ll understand how to make a simple full-stack application, work with the MERN stack, manage Mongo databases, and deploy everything to a production environment.