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 is React?
- Introducing JSX
- Rendering Elements
- Components and Props
- State and Lifecycle
- React Context
- Handling Events
- Conditional Rendering
- Lists and Keys
- Forms
- Lifting State Up
- Composition vs Inheritance
- Thinking In React
- React Hooks
- Higher-Order Components
- Prop Drilling
📋 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:
- https://reactjs.org/
- https://vasanthk.gitbooks.io/react-bits/
- https://www.fullstackreact.com/
- http://shop.oreilly.com/product/0636920049579.do
🎬 Tutorial Resources:
- https://egghead.io/browse/frameworks/react
- https://teamtreehouse.com/tracks/learn-react
- https://www.leveluptutorials.com/tutorials/tag/react
- https://tylermcginnis.com/courses/react-fundamentals/
- https://reactforbeginners.com/
- https://www.udemy.com/react-redux/
- https://advancedreact.com/
- https://frontendmasters.com/learn/react/
- https://learn.freecodecamp.org/front-end-libraries/react
- Bonus: https://www.edx.org/course/cs50s-mobile-app-development-with-react-native
💻 30 React Project Ideas:
- Emoji Search
- Pokedex
- Shopping Cart
- React Powered Hacker News Client
- Github Battle App
- Timestamped Notes App
- Progressive Web Tetris
- Calculator
- Product Comparison Page
- Hacker News Clone React/GraphQL
- Bitcoin Price Index
- Builder Book
- GFonts Space
- Trending GIFs from Giphy
- Mini Netflix — https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes
- Bingo Game https://holidaymoviebingo.netlify.com
- Simple real-time search
- Basic To-Do List App
- Javascript Calculator
- Current Weather
- Random Quote Generator
- Tic-Tac-Toe Game
- Simon Game
- Twitch TV API
- Pomodoro Clock
- Wikipedia Viewer
- Recipe Box App
- Camper Leaderboard
- React Markdown Previewer
- Dungeon Crawler
- [BONUS] Bookstore: Online book store built over react-redux and Bootstrap for UI. https://github.com/ajayns/react-projects
- [BONUS] Group Trip Manager: Manage and keep track of your group trips. https://github.com/ajayns/react-projects
- [BONUS] Property Finder: Search for and list properties. https://github.com/ajayns/react-projects
- [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
- Create a Simple JSX Element
- Create a Complex JSX Element
- Add Comments in JSX
- Render HTML Elements to the DOM
- Define an HTML Class in JSX
- Learn About Self-Closing JSX Tags
- Create a Stateless Functional Component
- Create a React Component
- Create a Component with Composition
- Use React to Render Nested Components
- Compose React Components
- Render a Class Component to the DOM
- Write a React Component from Scratch
- Pass Props to a Stateless Functional Component
- Pass an Array as Props
Weekend project: React To-Do App with React Hooks
Week 3
- Use Default Props
- Override Default Props
- Use PropTypes to Define the Props You Expect
- Access Props Using this.props
- Review Using Props with Stateless Functional Components
- Create a Stateful Component
- Render State in the User Interface
- Render State in the User Interface Another Way
- Set State with this.setState
- Bind ‘this’ to a Class Method
- Use State to Toggle an Element
- Write a Simple Counter
- Create a Controlled Input
- Create a Controlled Form
- Pass State as Props to Child Components
Weekend project: Q&A (Questions & Answers)
Week 4
- Pass a Callback as Props
- Use the Lifecycle Method componentWillMount
- Use the Lifecycle Method componentDidMount
- Add Event Listeners
- Manage Updates with Lifecycle Methods
- Optimize Re-Renders with shouldComponentUpdate
- Introducing Inline Styles
- Add Inline Styles in React
- Use Advanced JavaScript in React Render Method
- Render with an If/Else Condition
- Use && for a More Concise Conditional
- Use a Ternary Expression for Conditional Rendering
- Render Conditionally from Props
- Change Inline CSS Conditionally Based on Component State
- Use Array.map() to Dynamically Render Elements
- Give Sibling Elements a Unique Key Attribute
- Use Array.filter() to Dynamically Filter an Array
- Render React on the Server with renderToString
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
- The Beginner’s Guide to React
- Getting Started with Redux
- Share Logic Across Multiple React Components with Custom Hooks
- Advanced React Component Patterns
- React Testing Cookbook
- Use the useState React Hook
- Store Values in localStorage with the React useEffect Hook
- Simplify React Apps with React Hooks
- Add routing to React apps using React Router v4
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.
