Skip to content

Latest commit

 

History

History
205 lines (178 loc) · 18.6 KB

react.md

File metadata and controls

205 lines (178 loc) · 18.6 KB
Raw

React - Topic Deep Dive

The following is a deep dive, designed to familiarize you thoroughly with React. It is not the "easy path to just learning 'enough'" - it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of React's ecosystem and hands on non-React JavaScript practice to ensure a rock solid foundation in everything React.

Tier 0 - reference only if you need pre-React basics

  • Course: Introduction to Computer Science - CS50 (If you want more confidence programming)
  • Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
  • Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
  • Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
  • Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
  • Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven't studied these books, do yourself a favor and study them alongside whatever else you might be doing)
  • Official Docs: ESLint - thoroughly review the User Guide
  • Official Docs: Axios npm package - thoroughly review, you'll want this for making API calls

Tier 1 - basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

You NEED to know JavaScript - if you're shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features - and hit YDKJS.

For each project:

  • Use a git workflow (If you wonder what this is, read the articles in Tier 0)

For at least one project:

  • Code all CSS yourself
  • Use React-Bootstrap
  • Video: React Community Videos Pick and watch one video - don't worry about understanding every detail
  • Official Docs: Intro To React - All sections
  • Official Docs: Flexbox
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Official Docs: React Quick Start - all sections from Hello World to Thinking in React
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Official Docs: JSX In Depth
  • Official Docs: React DevTools
  • Official Docs: CSS Grid Layout
  • Official Docs: Typechecking With PropTypes
  • Official Docs: CSS Grid Layout
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Official Docs: Static Type Checking
  • Project: CodeWars - complete 10 problems using JavaScript
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters
  • Official Docs: React FAQ read all sections of the FAQ, from AJAX and APIs through Virtual DOM and Internals - make a mental note of everything in case you need to refer back to it during projects

Tier 2 - beyond basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow

For at least one project:

  • Code all CSS yourself
  • Use React-Bootstrap
  • Include at least 20 automated tests

Tier 3 - intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Implement end-to-end testing

For at least one project:

  • Code all CSS yourself
  • Use React-Bootstrap

Tier 4 - beyond intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Implement end-to-end testing

For at least one project:

  • Code all CSS yourself
  • Use React-Bootstrap
  • Implement state using Redux

On two projects of your choice - use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.

  • Video: React Community Videos Pick and watch one video - ensure you understand everything, pause and research if necessary
  • Official Docs: Webpack Docs
  • Official Docs: RxJS Docs
  • Official Docs: Gulp Docs
  • Official Docs: Integrating with Other Libraries
  • Official Docs: Redux docs
  • Project: Select an API from Todd Motto's API List and build an React application powered by data fetched from the API you chose.
  • Official Docs: Accessibility
  • Project: Select an API from Todd Motto's API List and build an React application powered by data fetched from the API you chose.
  • Official Docs: Code-Splitting
  • Project: CodeWars - complete 20 problems using JavaScript
  • Official Docs: React Reference - all sections
  • Project: Select an API from Todd Motto's API List and build an React application powered by data fetched from the API you chose.
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Project: Select an API from Todd Motto's API List and build an React application powered by data fetched from the API you chose.
  • Project: Pick a template from here, here or here and implement an React application with it as your inspiration (do not use its assets)
  • Project: Select an API from Todd Motto's API List and build an React application powered by data fetched from the API you chose.
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters
  • Project: Utilize everything you've learned to create a comprehensive portfolio that showcases your ability with React, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.

Bonus - advanced

  • Official Docs: React Native Study thoroughly, then refactor any previous project into a mobile app using React Native
  • Official Docs: Flow Study thoroughly, then refactor any previous project to use Flow.
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Official Docs: MDN Accessibility
  • Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
  • Write an extensive tutorial on React - post it publicly
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use

Helpful links