course content

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

2. Styling

Inline StylesInline Styles in PracticeChallenge: Inline StylesStyling with the CSS FileStyling with the CSS File in PracticeChallenge: Styling with the CSS FileCSS ModulesFile Folder Structure OrganizationChallenge: CSS Modules"Styling" Section Sum Up

3. React Hooks and Context

Introduction: React Hooks and ContextuseState HookChallenge: useState HookuseRef HookChallenge: useRef HookuseEffect HookChallenge: useEffect HookuseMemo HookChallenge: useMemo HookContextContext in PracticeChallenge: Context"React Hook and Context" Section Sum Up

4. React in the Real World

Setting Up EnvironmentCode EditorSetting Up the Project FolderTerminalStart the Project"React in the Real World" Section Sum Up

Mastering React

Setting Up the Project FolderSetting 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 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.
  2. Right-click in the desired location and select "New Folder" from the context menu.
  3. 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.

content

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
content
  • Click the "Open Folder" button
content
  • 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.
content

Everything was clear?

Section 4. Chapter 3