Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

React Course - Beginner's Tutorial for React JavaScript Library [2022]

via freeCodeCamp

Overview

Learn React by building eight real-world projects and solving 140+ coding challenges. By the end of the course, you will be able to build web apps in modern React using functional components and hooks. The course covers topics such as JSX, setting up a local React environment, working with props and state, conditional rendering, forms in React, making API calls, and using useEffect. The teaching method involves hands-on project-based learning with code available for each lesson. This course is designed for beginners who want to learn React and build interactive user interfaces.

Syllabus

Introduction.
What we’ll learn.
Fun facts about react link: https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1.
First react.
First React Practice .
Local Setup (the quick way).
Why React?.
JSX.
Goodbye, CDNs!.
Thought Experiment.
Project 1 Part 1 - MarkUp.
Pop Quiz!.
Components.
Setup a local React environment w/ Create React App.
Babel, Bundler, Build.
Create React app: https://create-react-app.dev/.
How to install Node.js.
Use nvm or nvm-windows.
How to install Node.js.
Styles and images with CRA.
Quick Mental Outline of Project .
Quick Figma Walkthrough.
Project Setup.
Navbar and Styling .
Main Section.
Color The Bullets.
Add Background Logo.
Section 1 Solo Project.
Digital Business Card https://scrimba.com/links/figma-digital-business-card-sp.
Share your work https://scrimba.com/links/solo-project-tweet https://scrimba.com/links/discord-i-built-this.
Section 1 Recap .
Section intro & Figma File .
Project Setup: NavBar & Hero.
Project Card Component.
Problem - Not Reusable.
Props.
Prop Quiz (Get it?).
Destructuring Props.
Props practice.
Passing in non-string Props.
Project: Pass props to component.
Review - Array.map().
React render array.
Mapping Components.
Map Quiz.
Loading Images from .map().
Projects.
Spread objects as props.
Section 2 solo project.
Travel journal: https://scrimba.com/links/figma-travel-journal-sap.
Share your work.
Section 2 recap.
Section into and figma file.
Meme Generator: Header & Form.
Project Analysis.
Event Listeners.
Project: Get random meme.
Our current conundrum.
Props vs. State.
useState.
Changing State.
useState - Counter Practice.
useState - Changing state with a callback Function.
hanging State Quiz!.
Project: Assign images to the meme generator.
Challenge: Ternary Practice & flipping State back and forth.
Complex State.
Project: Refactor State.
Passing state as props.
Setting state from child components.
Passing data around.
Boxes Challenge.
Conditional Rendering.
React forms intro.
Watch for input changes in React.
Form inputs practice.
Forms state object.
Controlled inputs.
Forms in React.
Project: add text to image.
Making API Calls.
Intro to useEffect .
useEffect().
Project:get memes from API.
State and Effect Practices.
useEffect cleanup function.
Using an sync function inside useEffect.
Section3 recap.
Section 4 Intro.
Warm-up:Add Dark/Light modes to ReactFacts Site.
Notes App Intro.
Notes App Development.
Tenzies Project Intro.
Tenzies Setup & Game Development.
Hold dice part 3.
End game.
Tenzies: New Game & Extra Credit ideas.
Section 4 Solo Project.
quiz https://scrimba.com/links/figma-quizzical.
OTDB API https://opentdb.com/api_config.php.
Congrats on completing Module 1!.

Taught by

freeCodeCamp.org

Reviews

Start your review of React Course - Beginner's Tutorial for React JavaScript Library [2022]

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.