Learn React in 100 Days

Lenora Porter
Jun 10 · 10 min read

Learning a new coding language can be daunting, stressful, and lonely. How would I know? Well, in 2015, I attended a 9-week coding bootcamp and learned Ruby on Rails. When I went on interviews, no one was impressed with my Ruby on Rails knowledge. I was told, “We are looking for Swift, PHP, or Objective-C developers”. I had to regroup, create a curriculum, and focus on learning the skills the industry demanded. I couldn’t afford attending another bootcamp so I taught myself. It would have been nice to hold on to the money I spent at the bootcamp but I decided to charge it to the “Invest In Yourself” game. Side note: Do research on the in-demand skills in your city before investing time or money into learning a coding language.

These days, I really believe new learners can get very far by leaning on online resources. The only thing that’s missing is the community aspect. The self-taught phenomena sounds cool but in actuality we are all community-taught individuals relying on the collective to push forward. This is why I was so excited when Marlon Avery let me know about his ReactJS journey. He wanted an accountability partner and I was all in! As we planned the curriculum, he said “Lenora, do you think our community (Instagram or Twitter) would enjoy something like this? Do you think we should open it up to everyone?” Well, a few clicks later, we were staring at a slack community called #Code100. Code100 is an accountability tool where techies would come together, go through tutorials weekly, and learn in a judgement-free zone. We believe we all need a consistent community who supports and understand each other. Special shout out to the people who keep the community going: Marlon Avery, Derrick White Jr., and Tom Rasmussen.

Within two weeks, Code100 gained 400+ members across 40+ countries. One word: WOAH! I am so thankful for this community and I can’t wait to learn more languages with them!

If you would like to join the React journey, I’ve included our 15-week plan below.

⬅️ Prerequisites before learning React:

  • Functions are first-class citizens in JavaScript
  • bind(), apply(), and call()
  • scopes and closures
  • this
  • Object Methods
  • Array Methods
  • Prototypical Inheritance -> ES6 Class
  • Callbacks and Promises
  • Event Loop
  • Event Bubbling
  • Regular Expressions
  • Error Handling
  • JavaScript ES6 and beyond
  • Hoisting, Memoization
  • Declarative vs imperative programming
  • Functional vs object-oriented programming

🔑 Main React Topics to understand:

📋 What’s the plan?

  • Code for a minimum of an hour a day
  • Tweet/IG Post your progress daily with the hashtag: #React100
  • Mon-Fri: Tutorials & Learning
  • Weekends: Build a small React project

#️⃣ Hashtags:

🎯 Goal:

  • Successfully complete 100 Days Of React
  • Complete 15 React projects

📖 Reading Resources:

  1. https://reactjs.org/
  2. https://vasanthk.gitbooks.io/react-bits/
  3. https://www.fullstackreact.com/
  4. http://shop.oreilly.com/product/0636920049579.do

🎬 Tutorial Resources:

  1. https://egghead.io/browse/frameworks/react
  2. https://teamtreehouse.com/tracks/learn-react
  3. https://www.leveluptutorials.com/tutorials/tag/react
  4. https://tylermcginnis.com/courses/react-fundamentals/
  5. https://reactforbeginners.com/
  6. https://www.udemy.com/react-redux/
  7. https://advancedreact.com/
  8. https://frontendmasters.com/learn/react/
  9. https://learn.freecodecamp.org/front-end-libraries/react
  10. Bonus: https://www.edx.org/course/cs50s-mobile-app-development-with-react-native

💻 30 React Project Ideas:

  1. Emoji Search
  2. Pokedex
  3. Shopping Cart
  4. React Powered Hacker News Client
  5. Github Battle App
  6. Timestamped Notes App
  7. Progressive Web Tetris
  8. Calculator
  9. Product Comparison Page
  10. Hacker News Clone React/GraphQL
  11. Bitcoin Price Index
  12. Builder Book
  13. GFonts Space
  14. Trending GIFs from Giphy
  15. Mini Netflix — https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes
  16. Bingo Game https://holidaymoviebingo.netlify.com
  17. Simple real-time search
  18. Basic To-Do List App
  19. Javascript Calculator
  20. Current Weather
  21. Random Quote Generator
  22. Tic-Tac-Toe Game
  23. Simon Game
  24. Twitch TV API
  25. Pomodoro Clock
  26. Wikipedia Viewer
  27. Recipe Box App
  28. Camper Leaderboard
  29. React Markdown Previewer
  30. Dungeon Crawler
  31. [BONUS] Bookstore: Online book store built over react-redux and Bootstrap for UI. https://github.com/ajayns/react-projects
  32. [BONUS] Group Trip Manager: Manage and keep track of your group trips. https://github.com/ajayns/react-projects
  33. [BONUS] Property Finder: Search for and list properties. https://github.com/ajayns/react-projects
  34. [BONUS] Reddit Clone: Learn about how APIs work by building a react-redux-thunk project that calls the RedditAPI to fetch posts from selected subreddits. https://github.com/ajayns/react-projects

Week 1

Note: Treehouse offers a 7-day free trial

  • React Basics
  • React Components
  • Using Create React App
  • React Context API
  • React Router 4 Basics
  • What is new in React 16
  • Data Fetching in React
  • Deploy a React App

You don’t have access to Treehouse?


Weekend project: Mini Netflix

Week 2

Weekend project: React To-Do App with React Hooks

Week 3

Weekend project: Q&A (Questions & Answers)

Week 4

Weekend project: Build an Airbnb Clone with React and ElasticSearch

Week 5

  • Course Introduction & Philosophy
  • What we’ll be building
  • Why use React?
  • ReactDOM & JSX
  • ReactDOM & JSX Practice
  • React Functional Components
  • React Functional Components Practice
  • Move Components into Separate Files
  • React Parent/Child Components
  • React Parent/Child Components Practice
  • Todo App — Phase 1
  • Styling React with CSS Classes
  • Some Caveats
  • JSX to Javascript and Back
  • React Inline Styling with the Style Property
  • Todo App Phase 2
  • React Props Part 1: Understanding the concept
  • React Props Part 2: Reusable Components
  • React Props Tutorial
  • Props and Styling Practice
  • Mapping Components
  • Mapping Components Practice
  • React Todo App: Phase 3

Weekend project: Build a React.js chat app:

Week 6

  • Class-based components
  • Class-based components Practice
  • React State Tutorial
  • React State Practice
  • React State Practice 2
  • React Todo App: Phase 4
  • Handling Events in React
  • React Todo App: Phase 5
  • React setState: Changing the state
  • React Todo App: Phase 6
  • Lifecycle Methods Part 1
  • Lifecycle Methods Part 2
  • React Conditional Render
  • React Conditional Render Part 2
  • React Conditional Render Practice
  • React Todo App Phase 7
  • Fetching data from an API
  • React Forms Tutorial Part 1
  • React Form Tutorial Part 2
  • React Form Practice
  • Container/Component Architecture
  • Meme Generator Capstone Project
  • Writing Modern React Apps
  • Project Ideas for Practicing
  • Conclusion

Weekend project: Build a Yelp Clone:

Week 7

  • Introduction, Tooling and Editor Setup
  • Thinking and Understanding React Components
  • Creating our First Components
  • Writing HTML with JSX
  • Loading CSS into our React Application
  • Creating our application layout with components
  • Passing Dynamic data with props
  • Stateless Functional Components
  • Routing with React Router
  • Helper and Utility Functions
  • Events, Refs and this Binding
  • Handling Events
  • Understanding State
  • Loading data into state onClick
  • Displaying State with JSX
  • Updating our Order State
  • Displaying Order State with JSX
  • Persisting our State with Firebase
  • Persisting Order State with localstorage
  • Bi-directional Data Flow and Live State Editing
  • Removing Items from State
  • Animating React Components
  • Component Validation with PropTypes
  • Authentication
  • Building React for Production
  • Deploying to Now
  • Deploying to Netlify
  • Deploying to an Apache Server
  • Ejecting from create-react-app

Don’t have access to Wes Bos’s React for Beginners?


Weekend project: Build a Custom Calendar in React:

Week 8

Week 9

  • Let’s Dive In!
  • Building Content with JSX
  • Communicating with Props
  • Structuring Apps with Class-Based Components
  • State in React Components
  • Understanding Lifecycle Methods
  • Handling User Input with Forms and Events
  • Making API Requests with React
  • Building Lists of Records
  • Using Ref’s for DOM Access
  • Let’s Test Your React Mastery!
  • On We Go…To Redux!
  • Integrating React with Redux

Week 10

  • Async Actions with Redux Thunk
  • Redux Store Design
  • Navigation with React Router
  • Handling Authentication with React
  • Redux Dev Tools
  • Handling Forms with Redux Form
  • REST-Based React Apps
  • Using React Portals
  • Implementing Streaming Video
  • The Context System with React
  • Replacing Redux with Context

Week 11

  • Hooks with Functional Components
  • More Fun with Hooks
  • An Intro to React
  • Ajax Requests with React
  • Modeling Application State
  • Managing App State with Redux

Week 12

  • Intermediate Redux: Middleware
  • React Router + Redux Form v6
  • RallyCoding
  • React Router + Redux Form v4

Week 13

  • Module 1: Introduction and Setup
  • Module 2: CSS and Styled Components
  • Module 3: Server Side GraphQL
  • Module 4: Client Side GraphQL
  • Module 5: Accounts, Authentication and Permissions
  • Module 6: Shopping Cart
  • Module 7: Advanced UI and Code Quality
  • Module 8: Credit Card Checkout
  • Module 9: Testing
  • Module 10: Deployment

Week 14

React Project — Beach Resort https://youtu.be/ScDWrogElmo

Week 15

You should well equipped to contribute to an open source project. Look for the label “Good First Issue” and jump in.

Lenora Porter

Written by

Senior Product Designer @ Heroku (Salesforce) | You can find me fluffing my afro at the intersection of art and technology. www.lenoraporter.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade