Setting Up React

Course: React JS & Tailwind CSS - Full Course

Introduction

Hello and welcome to ReactStack's Intro to React Course. In this course, we'll teach you the fundamentals of React as well as provide challenges and projects along the way to reinforce the knowledge and get you out of "tutorial hell".

By the end of this course you’ll have a fully working Single Page App (SPA) that you can actually put online for the world to see. Along the way, we’ll be building mini-challenges and components that all fit together into the final app.

Although this course is designed for complete beginners, it's recommended that you have some fundamental knowledge of HTML, CSS and JavaScript before getting into React. You don't need to be an expert in those fields, but knowing the fundamentals will make React much easier to understand.

So without further ado, let's get your development environment set up so you can get started coding!

Overview

In this section, we’ll:

  1. Install a code editor (Visual Studio Code), Node.js and npm).
  2. Create our very first React app using Vite (a build tool).
  3. Run the app in your browser and make your first change.
  4. Add a code formatter (Prettier) so our code looks neat without us thinking about it.

By the end of this section, you’ll already have React running on your machine.

Step 1: Install VS Code and Node If you aren't using a code editor already, I recommend getting Visual Studio Code (VS Code). It's a very popular editor with a great extension marketplace. However, what editor you use is completely up to you and your preference.

Next, you'll need to install Node.js to get React running locally. Node.js also comes with npm (Node Package Manager), which is how we install extra tools and packages.

  • Go to: https://nodejs.org/en
  • You’ll see two versions:
    • LTS (Long-Term Support) — more stable, good for most people.
    • Current — has the latest features, but might be less stable.

For beginners, I recommend LTS.

Download the installer and get through the installation process. To confirm you have everything set up, open up VS Code, view the terminal (ctrl + `) and type

node -v

You should see a version number, which means it's been installed.

Step 2: Create React App With Vite

Go to the folder where you want to store your React App. Then open up VS Code terminal (if you haven't already) and navigate to the folder where you want your react app. For a simpler approach, you can just drop the folder into VS Code.

Then in your terminal, type the following and hit enter:

npm create vite@latest my-first-react-app

Here, "my-first-react-app" is the folder name. You can choose your own and "@latest" makes sure you get the newest version of Vite.

After running the command, Vite will ask to select a framework. Choose React. It will then ask to select a variant. Choose JavaScript.

Vite will then create your project folder.

Step 3: Run the App

After Vite creates your folder, it will prompt you go into your project folder and install dependencies by typing the following in the terminal: cd my-first-react-app npm install

Once all of the packages are installed, run: npm run dev

The console should say something like:

 VITE v7.1.2  ready in 248 ms

  ➜  Local:   http://localhost:5173/

Open that link in your browser and you'll see your React app running!

Congratulations! You've set up your React app!

Now for those of you curios about what Vite is, feel free to read on, if not just skip to the next step. Vite is essentially a toolbox we use to quickly start and run modern JavaScript apps, especially React apps.

Without bogging you down with too many details, when you write a React app, you’re not just writing plain HTML, CSS, and JavaScript, you're writing JSX.

JSX is a special syntax that looks like HTML inside JavaScript. Browsers can’t run JSX directly, it needs to be converted into regular JavaScript first and that’s where Vite comes in. There's a bit more going on underneath the hood, but for now just know that Vite helps bundle, transpile, and run our code.

Step 4: Install Extensions

This step isn't necessary, but will help make writing code much smoother. Search and install the following extensions if you want:

Prettier Code Formatter - Prettier automatically formats your code so it looks neat and consistent every time you save a file. No more arguing with yourself over “Should I use single quotes or double quotes?” or “How many spaces should I indent?"

Note: After installing prettier, hit (ctrl + ,) in VS Code and search "Format on Save" and check the box to enable auto formatting when you save.

ESLint - ESLint is like a spellchecker, but for JavaScript and React code. It scans your code for potential errors and gives you hints (or warnings) before you even run it. You'll see little red squigglies under potential problematic code. It'll help enforce best practices so your code stays clean and consistent.

ES7+ React/Redux/React-Native snippets - This is the least important of the three, but really helps with boosting productivity. This extension essentially provides code snippets for repetitive code. It'll save you time typing the same boilerplate code over and over. We'll see it in action later in the course.

Now, these extensions aren't necessary for writing code, but they do help increase the quality of life when it comes to writing code.

Overview

You did it! Now that you have your development environment set up, you're ready to start writing code. From here, we’ll start learning React piece by piece, building your skills, and putting it all together in a project.

Back to Course