Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Setting Up the Project Folder | React in the Real World
React Mastery
course content

Course Content

React Mastery

React Mastery

1. Introduction to React Fundamentals
2. Styling in React Apps
3. React Hooks and Context
4. React in the Real World

bookSetting Up the Project Folder

Step 3: Create the project folder

Now that we have all the necessary external tools, we can start creating the project. The task is to create a new empty folder specifically for the project, where nothing else will be stored.

Steps to follow:

  1. Choose a Location: Select a location on your machine where you want to create the project folder. It can be anywhere you prefer, such as your desktop or a specific directory;
  2. Create a New Folder: Right-click in the chosen location and select "New Folder" from the context menu;
  3. Name the Folder: Give the folder a meaningful name. This will serve as the root folder for your React project, so choose an informative and relevant name for your project's purpose. For example, you can name it movies-app,store-app, posts-app, learning-system-app, etc.

For example let's create the empty folder with the name movies-app.

Step 4: Open the Folder in Your Code Editor

To start working on the project, you need to open the movies-app folder in your code editor, whether it's Visual Studio Code or another editor of your choice.

Follow these steps:

  • Launch your code editor. In our example, we'll use Visual Studio Code (VS Code);
  • Click on the explorer icon located in the top-left corner of the VS Code interface;
  • Click the "Open Folder" button in the explorer panel;
  • Look for the movies-app folder on the machine and select it. After completing these steps, you should see the folder name, movies-app, displayed in your code editor's interface.

Now that your project folder is set up and opened in your code editor, you're ready to start building your React application!

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 3
some-alt