Learn React by building eight real-world projects and solving 140+ coding challenges. You can also follow this course interactively on Scrimba: https://scrimba.com/learn/learnreact

React is one of the most popular front-end JavaScript libraries for building user interfaces. After completing this course, you will be able to build web apps in modern React, using patterns like functional components and hooks.

✏️ This teacher is Bob Ziroll, Head of Education at Scrimba.

Code is available on the Scrimba course page for each lesson.

Scrimba on YouTube: https://www.youtube.com/c/Scrimba
Bob on Twitter: https://twitter.com/bobziroll

0:00 Introduction
5:27 What we’ll learn
7:03 Fun facts about react link: https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1
9:08 First react
https://reactjs.org/docs/cdn-links.html
17:13 First React Practice
19:04 Local Setup (the quick way)
21:03 Why React?
30:38 JSX
40:19 Goodbye, CDNs!
44:27 Thought Experiment
49:57 Project 1 Part 1 – MarkUp
57:44 Pop Quiz!
59:55 Components
1:33:07 Setup a local React environment w/ Create React App
1:33:53 Babel, Bundler, Build
1:34:47 Create React app: https://create-react-app.dev/
1:35:56 How to install Node.js
1:36:06 Use nvm or nvm-windows
1:36:33 How to install Node.js
1:41:30 Styles and images with CRA
https://create-react-app.dev/docs/adding-images-fonts-and-files/
https://create-react-app.dev/docs/using-the-public-folder/
1:46:03 Quick Mental Outline of Project
1:50:00 Quick Figma Walkthrough
https://www.youtube.com/watch?v=ybc2gkvjMDs&feature=youtu.be
1:51:43 Project Setup
https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1
1:59:00 Navbar and Styling
2:06:18 Main Section
2:14:04 Color The Bullets
2:16:30 Add Background Logo
2:20:50 Section 1 Solo Project
2:22:23 Digital Business Card https://scrimba.com/links/figma-digital-business-card-sp
2:24:05 Share your work https://scrimba.com/links/solo-project-tweet https://scrimba.com/links/discord-i-built-this
2:24:45 Section 1 Recap
https://scrimba.com/links/discord-today-i-did

Build an AirBnb Experiences Clone
2:27:26 Section intro & Figma File
https://scrimba.com/links/figma-airbnb-experiences
2:31:40 Project Setup: NavBar & Hero
2:43:11 Project Card Component
2:50:32 Problem – Not Reusable
2:52:29 Props
3:18:42 Prop Quiz (Get it?)
3:23:10 Destructuring Props
3:27:05 Props practice
3:36:12 Passing in non-string Props
3:40:11 Project: Pass props to component
3:47:08 Review – Array.map()
3:55:37 React render array
4:00:10 Mapping Components
4:04:46 Map Quiz
4:08:26 Loading Images from .map()
4:10:02 Projects
4:32:34 Spread objects as props
4:36:30 Section 2 solo project
4:37:14 Travel journal: https://scrimba.com/links/figma-travel-journal-sap
4:39:24 Share your work
4:39:52 Section 2 recap

Build a Meme Generator
4:41:37 Section into and figma file
https://scrimba.com/links/figma-meme-generator
4:45:48 Meme Generator: Header & Form
4:57:13 Project Analysis
4:58:20 Event Listeners
5:04:31 Project: Get random meme
5:10:15 Our current conundrum
5:18:26 Props vs. State
5:32:13 useState
5:37:57 Changing State
5:41:03 useState – Counter Practice
5:45:51 useState – Changing state with a callback Function
5:51:12 hanging State Quiz!
5:53:44 Project: Ass images to the meme generator
5:56:43 Challenge: Ternary Practice & flipping State back and forth
6:06:37 Complex State
6:27:46 Project: Refactor State
6:31:59 Passing state as props
6:37:54 Setting state from child components
6:44:25 Passing data around
6:50:53 Boxes Challenge
7:28:46 Conditional Rendering
7:48:49 React forms intro
7:52:17 Watch for input changes in React
7:56:49 Form inputs practice
7:59:13 Forms state object
8:07:18 Controlled inputs
8:11:35 Forms in React
8:47:04 Project: add text to image
8:51:05 Making API Calls
8:55:08 Intro to useEffect
https://reactjs.org/docs/hooks-effect.html
9:00:54 useEffect()
9:42:46 Project:get memes from API
9:33:00 State and Effect Practices
9:40:05 useEffect cleanup function
9:46:00 Using an sync function inside useEffect
9:49:14 Section3 recap

Build a Notes app and Tenzies Game
9:51:34 Section 4 Intro
https://scrimba.com/links/figma-reactfacts-light-dark
https://scrimba.com/links/figma-tenzies-game
9:54:09 Warm-up:Add Dark/Light modes to ReactFacts Site
10:00:50 Notes App Intro
10:10:47 Notes App Development
10:44:17 Tenzies Project Intro
https://scrimba.com/links/figma-tenzies-game
10:45:38 Tenzies Setup & Game Development
11:24:35 Hold dice part 3
11:28:39 End game
https://github.com/alampros/react-confetti#readme
11:40:31 Tenzies: New Game & Extra Credit ideas
11:44:15 Section 4 Solo Project
11:45:53 quiz https://scrimba.com/links/figma-quizzical
11:47:26 OTDB API https://opentdb.com/api_config.php
Check out the class components crash course: https://scrimba.com/playlist/pBpayAz
11:49:32 Congrats on completing Module 1!

source

37 Comments

  1. Many thanks for sharing our course, freeCodeCamp! ❤️⚡️

    The fully interactive version of the course is available here (it's completely free!): 👉https://scrimba.com/learn/learnreact ⚛️

    We also share tutorials & career advice for new devs over on our YouTube channel, so give us a follow if that sounds like it's up your street 🛣✨

  4. For the mapping components (04:00) I used img={imagesPath(`${item.img}`)} to display my images and worked great without moving my images to public folder.

    Pd: this is the best react course ever! congrats!

  7. I'm over 9 hours in and still going strong!!! Thanks for such high quality content, amazing tutorial! Definitely TAKE IT SLOW, and TAKE BREAKS. Every side challenge is gold!

    For those doing this locally with react-app, it's well worth the effort to set up each project and challenge from scratch. You'll become fluid in no time I promise 😉

  19. 1:29:40 Because I don't know what are those Dependecies and how to make react work without having it in index.html as <script>, I can't use import React from "react".

    So I can't use separated files as header.js, footer.js because to make them exportable I need to use imort react but I can't. And I get error: require is not defined.

    Where you told somewhere in 30 minutes of tutorial that I don't have to do it if I don't know how.

  27. I am at 1:31 and when I place the Header inside its own file and import it, the page does not load. Like nothing loads in the HTML, if I delete both the import statement and the <Header /> then the page loads fine but without the header. I cannot figure out why this happens.

Leave A Reply

Please enter your comment!
Please enter your name here