Net Ninja Full Modern React Tutorial: study plan and how long it takes
The Net Ninja playlist is 32 videos and 3.2 hours long. Here's how long it takes at different paces, a week-by-week schedule built from the real videos, and a planner that turns it into your own daily plan.
32 videos · 3.2 hours · Net Ninja
The Net Ninja's Full Modern React Tutorial builds a blog app with function components and hooks: templates and dynamic values, click events, state, outputting lists, props, useEffect, fetching data from a JSON server, custom hooks, the React Router, forms and deleting posts.
At just over three hours, it's one of the fastest ways to get productive with React.
Who it's for: JavaScript developers who want a quick, clear introduction to modern React.
How long does it take?
The full playlist is 3.2 hours across 32 videos. Here's roughly how many days that is at different daily watch times and speeds, counting video time only:
| Daily time | At 1x | At 1.5x | At 2x |
|---|---|---|---|
| 30 min a day | 7 days | 5 days | 4 days |
| 1 h a day | 4 days | 3 days | 2 days |
| 2 h a day | 2 days | 2 days | 1 days |
Make your own schedule
The playlist link is already filled in. Press Plan, set how much time you have each day and your speed, and you'll get a day-by-day schedule with a finish date and a calendar file. It reads the live playlist, so new videos are included.
Week-by-week schedule
A sample plan at 30 minutes a day and normal speed, using whole videos so none is split across days. That's 1 week in total. For a different pace, start date or speed, use the planner above.
Week 1Videos 1–32 · 3h 14m
Day 1 · 26m
- 1Full React Tutorial #1 - Introduction6m
- 2Full React Tutorial #2 - Creating a React Application13m
- 3Full React Tutorial #3 - Components & Templates7m
Day 2 · 26m
- 4Full React Tutorial #4 - Dynamic Values in Templates6m
- 5Full React Tutorial #5 - Multiple Components6m
- 6Full React Tutorial #6 - Adding Styles7m
- 7Full React Tutorial #7 - Click Events7m
Day 3 · 30m
- 8Full React Tutorial #8 - Using State (useState hook)7m
- 9Full React Tutorial #9 - Intro to React Dev Tools4m
- 10Full React Tutorial #10 - Outputting Lists7m
- 11Full React Tutorial #11 - Props9m
- 12Full React Tutorial #12 - Reusing Components3m
Day 4 · 30m
- 13Full React Tutorial #13 - Functions as Props5m
- 14Full React Tutorial #14 - useEffect Hook (the basics)4m
- 15Full React Tutorial #15 - useEffect Dependencies4m
- 16Full React Tutorial #16 - Using JSON Server5m
- 17Full React Tutorial #17 - Fetching Data with useEffect8m
- 18Full React Tutorial #18 - Conditional Loading Message4m
Day 5 · 25m
- 19Full React Tutorial #19 - Handling Fetch Errors8m
- 20Full React Tutorial #20 - Making a Custom Hook9m
- 21Full React Tutorial #21 - The React Router8m
Day 6 · 29m
- 22Full React Tutorial #22 - Exact Match Routes5m
- 23Full React Tutorial #23 - Router Links4m
- 24Full React Tutorial #24 - useEffect Cleanup7m
- 25Full React Tutorial #25 - Route Parameters8m
- 26Full React Tutorial #26 - Reusing Custom Hooks5m
Day 7 · 29m
- 27Full React Tutorial #27 - Controlled Inputs (forms)9m
- 28Full React Tutorial #28 - Submit Events3m
- 29Full React Tutorial #29 - Making a POST Request5m
- 30Full React Tutorial #30 - Programmatic Redirects4m
- 31Full React Tutorial #31 - Deleting Blogs4m
- 32Full React Tutorial #32 - 404 Pages & Next Steps4m
Tips for finishing
- Finish it in a week at 30 minutes a day, building the blog alongside the videos.
- Afterwards, rebuild the app from scratch without the videos; it's the best test of what you learned.