Learn React

Name: Learn React
Rating: 5 (3 reviews)

via Scrimba

Go to class Write review

Details

Go to class

Provider

Scrimba
Pricing

Free Online Course
Languages

English
Duration & workload

12 hours
Sessions

On-Demand
Level

Intermediate

Found in

Overview

The ultimate React 101 - the perfect starting point for any React beginner. Learn the basics of modern React by solving 140+ interactive coding challenges and building eight fun projects.

Local setup
Why React?
JSX
ReactDOM.render()
Custom components
Organizing components
Reusable components
JS inside JSX
Props
Destructuring props
Rendering arrays
Mapping components
Key prop
Passing objects as props
Spreading objects as props
Props vs state
useState
useState array destructuring
Changing state
Complex state
Refactoring state
Passing state as props
Local state
Unified state
Conditional rendering
React forms
Forms input
Forms state object
Submitting forms in React
Making API calls
useEffect
Async functions inside useEffect
Local storage with React
Lazy state initialization

Syllabus

Build a React info site

1. Introduction to React
2. What we'll learn
3. First React
4. First React Practice
5. Local setup (the quick way)
6. Libraries/Frameworks
7. Why React? It's Composable!
8. Why React? It's declarative
9. JSX
10. Drag and Drop Deploy with Netlify
11. Get detailed reviews of your React projects â Scrimba Bootcamp
12. Goodbye, CDNs!
13. UPDATE: New React 18 createRoot API
14. Thought experiment: use .append() instead of ReactDOM.render()?
15. Project part 1 - markup (Update)
16. Pop quiz!
17. Custom Components
18. Custom Components part 2
19. Custom Components Quiz
20. Parent/Child Components
21. Styling with Classes
22. Organize components
23. Run React locally with Vite
24. Quick mental outline of project
25. Project setup
26. Quick Figma Walkthrough
27. Navbar & Styling
28. Main Section
29. Color the bullets
30. Add background logo
31. Why are Solo Projects important?
32. Solo Project (PRO) - Digital Business Card
33. Deploy Your React App with Netlify
34. Get a code review!
35. React Section 1 Recap

Build an AirBnb Experiences clone

1. Section intro & Figma file
2. Project setup: Navbar
3. Project setup: Hero
4. Project: Card Component
5. Update: A11Y Audit
6. Problem - not reusable
7. Props Part 1: Understanding the Concept
8. Props Part 2: Reusable Components
9. Aside: JS inside JSX
10. Props part 3: Create a contact component
11. Props part 4: receiving props in a component
12. Prop quiz! (Get it?? ð)
13. Destructuring props
14. Props practice
15. Passing in non-string props
16. Project: pass props to card component
17. Review - array .map()
18. React renders arrays
19. Mapping components
20. Map quiz!
21. Loading images from .map()
22. Project: Map experiences data into components
23. Project: key prop
24. Project: Sold Out Badge
25. Project: Pass object as props
26. Project: Spread object as props
27. Solo Project (PRO) - Travel Journal
28. React Section 2 Recap

Build a meme generator

1. Section Intro & Figma file
2. Meme Generator: Header
3. Meme Generator: Form
4. Update: Accessibility Audit
5. Project analysis
6. Event Listeners
7. Project: Get random meme
8. Our current conundrum
9. Props vs. State: Props
10. Props vs. State: State
11. Props vs. State Quiz!
12. useState
13. useState array destructuring
14. Changing state
15. useState - Counter practice
16. useState - Changing state with a callback function
17. Changing state quiz!
18. Project: Add images to the meme generator
19. Challenge: ternary practice
20. Challenge: flipping state back and forth
21. A11y Update - replace div
22. Complex state: arrays
23. Complex state: objects
24. Complex state: updating state objects
25. Project: Refactor state
26. Passing state as props
27. Setting state from child components
28. Update: addressing a11y issues
29. Passing data around
30. Boxes challenge part 1
31. Dynamic styles
32. Boxes challenge part 2
33. Boxes challenge part 3.1 - local state
34. Boxes challenge part 3.2 - unified state
35. Boxes challenge part 4
36. Boxes challenge part 5
37. Boxes update: a11y fixes
38. Conditional rendering: &&
39. Conditional rendering: && practice
40. Conditional rendering: ternary
41. Conditional rendering practice
42. Conditional rendering quiz!
43. React forms intro
44. Watch for input changes in React
45. Form inputs practice
46. Forms state object
47. Form state object practice
48. Controlled inputs
49. Forms in React: Textarea
50. Forms in React: Checkbox
51. Forms in React: Radio buttons
52. Forms in React: Select & Option
53. Forms in React: Submitting the form
54. Accessible labels - useId
55. Forms quiz!
56. Sign up form practice
57. Project: Add text to image
58. Making API calls
59. Intro to useEffect
60. useEffect() syntax and default behavior
61. useEffect dependencies array
62. useEffect quiz!
63. useEffect for fetching data
64. useEffect: when to use dependencies
65. Project: Get Memes from API
66. State and Effect practices
67. useEffect cleanup function
68. Using an async function inside useEffect
69. React Section 3 Recap

Build a notes app and Tenzies game

1. Section 4 Intro
2. Warm-up: Add Dark/Light modes to ReactFacts site
3. Notes App: Intro
4. Notes App: Features to add
5. Notes App: Sync notes with localStorage
6. Lazy State Initialization
7. Notes App: Note summary title
8. Notes App: Bump recent note to the top
9. Notes App: Delete note
10. Update to Notes app - adding Firebase! ð¥
11. Updating to Vite
12. Small refactors
13. Local Setup
14. Firebase Intro & Setup
15. Firebase Code Setup
16. onSnapshot - part 1
17. onSnapshot - part 2
18. Create new blank note
19. Delete Note
20. Update note - part 1
21. Update note - part 2
22. Challenge: createdAt and updatedAt
23. Challenge: sort notes
24. Debouncing updates - part 1
25. Debouncing updates - part 2
26. Debouncing updates - part 3
27. Tenzies Project Intro
28. Tenzies: Setup
29. Tenzies: Die components
30. Tenzies: Generate array of 10 random numbers
31. Tenzies: Map array to Die components
32. Tenzies: Roll dice button
33. Tenzies: Change dice to objects
34. Tenzies: Styling held dice
35. Tenzies: Hold dice part 1
36. Tenzies: Hold dice part 2
37. Tenzies: Hold dice part 3
38. Tenzies: End game part 1
39. Tenzies: End game part 2
40. Tenzies: End game part 3
41. Tenzies: New Game
42. Tenzies: Extra Credit Ideas
43. Solo Project (PRO) - Quizzical
44. Check out the class components crash course!

Reviews

5.0 rating, based on 3 Class Central reviews

Start your review of Learn React

Dhawal Shah @dhawal

The course is really good, but what makes it really unique is the Scrimba platform. You do everything without leaving the browser and no need to setup a local environment. The whole window is a IDE and the video is basically some talking and typing…

The course is really good, but what makes it really unique is the Scrimba platform. You do everything without leaving the browser and no need to setup a local environment.

The whole window is a IDE and the video is basically some talking and typing things out in the IDE. What makes it magical is that at any point you can just pause the "video", jump in to the IDE and start making code changes. Overlayed on the IDE is a small browser window where you can see the output.

The way the course is designed is that you also get some amount of hands on practice. Through out the course the instructor lays out challenges where you basically pause the course, and try it out yourselves. You can play the course again to see the instructors solution.

The course is based on a React 17 and at the time of writing this review the current version is React 18. Not sure if that really makes a big difference.
Nils

I'm very satisfied with this course offered by Scrimba. I've taken it as part of the Frontend Developer Path from their platform. The well-balanced combination of challenges, practice exercises and comprehensive explanations has helped me easing into React. The interactive platform provided by Scrimba has created a great and fun learning experience. Compared to other online and offline courses and resources, Scrimba stands out as it allows me to concentrate on the content without worrying about the setup. It has been very easy to do a few scrims before work in the morning without spinning up and IDE and copy+pasting code around, allowing me to learn highly efficient and time-effective.
Cristiano Valente

I really like Scrimba's way of teaching. It's a 100% hands on, there are not grades but rather personal accountability with fun projects and the repetition necessary to really have all concepts integrated.

I wish universities would use the kind of pedagogy.