Course Content
Mastering React
1. Introduction to React
What is React?Web Application ArchitecturesVirtual DOM and Browser DOMJSXRender Element to DOM TreeChallenge: Render ElementComponentsChallenge: Functional ComponentsConditional RenderingChallenge: Render Content ConditionallyRender a Data CollectionChallenge: Render Collection"Introduction to React" Section Sum Up
Mastering React
Setting 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:
- Choose a location on the machine where we want to create the project folder. It can be anywhere we prefer, such as the desktop or a specific directory.
- Right-click in the desired location and select "New Folder" from the context menu.
- Give the folder a name. This will serve as the root folder for our React project, so let's make it informative and relevant to the project's purpose. For example,
store-app
,posts-app
,learning-system-app
, etc.
For example let's create the empty folder with the name movies-app
.

Step 4: Open folder in the code editor
We need to open the folder movies-app
with the help of the code editor.
Steps to follow:
- Open the code editor. In our case it is Visual Studio Code (VS Code).
- Click the explorer icon in the top left corner of the Visual Studio Code

- Click the "Open Folder" button

- Look for the
movies-app
folder on the machine and select it. After completing this step, ensure that the folder name appears in the VS Code interface.

Everything was clear?
Section 4. Chapter 3