Setting Up React

Your Development Toolkit

Before you can build with React, you need to set up your workshop. This means installing a couple of essential tools that do the heavy lifting behind the scenes. The main tool you'll need is Node.js, which comes with a sidekick called npm.

Installing Node.js and npm

Node.js is a JavaScript runtime environment. That's a technical way of saying it allows you to run JavaScript code outside of a web browser. When you install Node.js, you automatically get npm, which stands for Node Package Manager. Think of npm as a librarian for your code; it helps you find, install, and manage the software packages (or 'dependencies') your project needs to work.

npm

noun

A package manager for the JavaScript programming language that helps developers share and reuse code. It is the default package manager for the JavaScript runtime environment Node.js.

You might already have Node.js and npm installed on your computer. You can check by opening your terminal (or Command Prompt on Windows) and running these commands:

# Check for Node.js version
node -v

# Check for npm version
npm -v

If you see version numbers (like v20.11.1 or 10.2.4), you're all set. If you get an error, you'll need to install them. The best way is to download the installer directly from the official Node.js website. We recommend grabbing the LTS (Long-Term Support) version, as it's the most stable.

Creating Your First React App

With the tools in place, you can now create a React application. The official and most recommended way to do this is with a tool called Create React App. It sets up a complete, optimized React project for you with a single command, saving you from complex configuration.

Navigate in your terminal to the directory where you want to store your project. Then, run the following command:

npx create-react-app my-first-app

You can replace my-first-app with any name you like for your project, as long as it doesn't contain capital letters.

This command might take a few minutes to complete. It's downloading the necessary templates and installing all the packages your new app needs. Once it's finished, navigate into your new project's directory and start the development server:

# Move into the new project folder
cd my-first-app

# Start the development server
npm start

Your web browser should automatically open to http://localhost:3000 and display the default React welcome page. Congratulations, you've just built and run your first React app!

Understanding the Project Structure

Now, let's look at the files and folders that Create React App generated. Open the my-first-app folder in your code editor. It might look like a lot at first, but you'll only work with a few of these files regularly.

Here are the most important parts:

node_modules/: This folder contains all the external code (packages) your project depends on. You will never need to edit anything in here.
public/: This folder holds static assets. The most important file here is index.html. This is the single HTML page that your React app is loaded into.
src/: This is where you'll spend almost all of your time. The src (source) folder contains the actual JavaScript code and CSS for your React application.

Within src/, two files are critical:

index.js: This is the main entry point for your application. It finds the <div> in public/index.html and tells React to render your main component inside it.
App.js: This is the root component of your application. It's the first piece of React code that gets rendered on the screen. This is where you'll start building your user interface.

That's it for the initial setup. Now you have a running React application and a basic understanding of where the key files are located.

React Web App Fundamentals