Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 12-hour journey to master React, one of the most popular front-end JavaScript libraries for building user interfaces. Build eight real-world projects and solve over 140 coding challenges while learning modern React patterns like functional components and hooks. Explore essential concepts including JSX, components, props, state management with useState, and side effects with useEffect. Set up a local development environment using Create React App, and dive into practical projects such as building an Airbnb Experiences clone, a meme generator, a notes app, and a Tenzies game. Gain hands-on experience with API integration, form handling, and conditional rendering. Complete solo projects to reinforce your skills, and finish with a quiz application using the Open Trivia Database API. By the end of this course, you'll be equipped to create modern, interactive web applications using React.

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!.