Local Development Environment

Note

During this course, you will encounter challenges that provide a pre-configured development environment for the code. However, in the real world, all applications are developed on local machines. Therefore, it is crucial to know about setting up your local environment. This chapter focuses on establishing the local development environment for React.

To develop a React app locally on your machine, follow these steps:

1. Install Node.js and npm:
   • Visit the official Node.js website (https://nodejs.org).
   • Download the installer for your operating system and follow the installation instructions.
   • This will install Node.js and npm on your machine, which is required to run React.
2. Install a code editor:
   • Choose a code editor of your preference, such as Visual Studio Code (https://code.visualstudio.com).
   • Download and install the code editor on your computer.
   • This will be the tool you'll use to write your React code.
3. Create a project folder:
   • Create an empty folder on your computer to store your React project.
   • This folder will serve as the root directory for your project.
4. Open the code editor:
   • Open your chosen code editor.
   • Navigate to the project folder you created.
   • This lets you start working on your React project within the code editor.
5. Open the terminal:
   • Within the code editor, open the terminal or command line interface.
   • This is where you'll run commands to set up and manage your React project.
6. Set up the project:
   • In the terminal, run the command npx create-react-app .
   • This command initializes a new React project using the Create React App tool.
   • The . at the end ensures the project is created in the current folder.
7. Start the development server:
   • Run the command npm start in the terminal once the project is created.
   • This starts the development server and opens a live preview of your React app in the browser.
   • You can now see your app running and make changes to the code.
8. Customize the project:
   • Open the src folder in the code editor.
   • Delete all the default files created by Create React App if you don't need them.
   • Start building your React components and files within the src folder.
   • This is where you'll write your React code and create the structure of your app.

Following these steps, you'll have the React environment set up and ready to develop your application.