Course Content
React Mastery
React Mastery
1. Introduction to React Fundamentals
What is React?SPAs vs. MPAs in Web DevelopmentHow React Works with the Virtual DOMIntroducing JSX in ReactCreating Complex JSX Elements Rendering Elements in ReactChallenge: Rendering ElementReact ComponentProps in ReactChallenge: Functional ComponentsConditional RenderingChallenge: Conditional Rendering - Chat NotificationChallenge: Conditional Rendering - Bank AlertRendering a Data CollectionChallenge: Rendering a Data CollectionIntroduction to React Section Sum-Up
2. Styling in React Apps
Introduction to Styling in ReactInline StylesInline Styles in PracticeChallenge: Inline StylesStyling with the CSS FileStyling with the CSS File in PracticeChallenge: Styling with the CSS FileStyling with the CSS ModulesFile Folder Structure OrganizationChallenge: CSS ModulesStyling in React Section Sum-Up
3. React Hooks and Context
Introduction: React Hooks and ContextuseState HookChallenge: Toggling VisibilityuseRef HookChallenge: Creating a Form ComponentuseEffect HookChallenge: Fetching and Displaying DatauseMemo HookChallenge: Car List FilteringContextContext in PracticeChallenge: World of Astronomy AppReact Hooks and Context Section Sum Up
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: 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;
- Create a New Folder: Right-click in the chosen location and select "New Folder" from the context menu;
- 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?
Thanks for your feedback!
Section 4. Chapter 3