Chapter 2: Setting Up a React
Welcome to Chapter 2! Now that you've grasped the fundamental concepts of React, it's time to prepare your development environment to start building your own React applications. This chapter will guide you through installing the necessary tools and creating a React project using a popular tool called Create React App (CRA).
Prerequisites
Before we begin, ensure you have a text editor or code editor of your choice installed (e.g., Visual Studio Code, Sublime Text). Familiarity with basic JavaScript syntax is also beneficial.
Installing Node.js and npm
React applications rely on JavaScript for functionality. Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. Node.js also comes bundled with a package manager called npm (Node Package Manager) that helps you install and manage JavaScript libraries and tools. Head over to the official Node.js website (https://nodejs.org/en) to download and install the latest stable version of Node.js for your operating system.
Once installed, open your terminal or command prompt and type the following command to verify the Node.js and npm installations:
node -v
npm -v
These commands should output the installed versions of Node.js and npm. If you encounter any issues during installation, refer to the official Node.js documentation for troubleshooting steps.
Creating a React Project
Create React App (CRA) is a popular tool that simplifies the process of setting up a new React project. It includes all the necessary configurations, dependencies, and a development server out of the box. Let's use npm to install Create React App globally on your system:
npm install -g create-react-app
The "-g" flag in the command indicates a global installation, making the "create-react-app" command available from anywhere on your system. Now, navigate to your desired project directory in the terminal and run the following command to create a new React project named "my-react-app" (replace with your preferred name):
create-react-app my-react-app
This command will create a new directory named "my-react-app" with the basic React project structure. Navigate into the project directory using "cd my-react-app" and start the development server using:
npm start
This will launch a development server, typically at "http://localhost:3000/" by default, where you can view your React application running in the browser. Congratulations! You've successfully created your first React project.
Project Structure Overview
Let's take a quick look at the essential files and folders within your newly created React project:
- public/: This folder contains static assets like images, fonts, or favicons that your application might use.
- src/: The heart of your React application. This folder houses all your React components, JavaScript files, and other source code.
- App.js: The main component of your React application. It serves as the starting point for your UI.
- index.js: The entry point for your React application. It renders the root component (typically "App.js") to the DOM.
- package.json: This file lists all the dependencies your project uses and their versions. It also contains scripts for various tasks like starting the development server or building your application for production.
We'll delve deeper into these components and explore building your first React application in the following chapters. Stay tuned!
Read next: Building Blocks