Learning React: Tips, Tricks, and Hacks
Objectives
The main goals of this document are to:
- Expose readers to through a tutorial
- Implement an example application to get your feet wet
- Learn best practices
- Demonstrate an example application
If you just want something 5 minutes long, read this: https://reactjs.org/docs/getting-started.html
Architecture

Terminology
Beginners → https://www.taniarascia.com/getting-started-with-react/
- Setup and installation
- Create-React-App feature
- Cool dev tools
- Props and State
Designers → https://reactfordesigners.com/
- Setup and installation
- Create-React-App feature
- Framer tutorial
- Props and State
- If you do not know JS → https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
- If you do: https://reactjs.org/tutorial/tutorial.html
Learning
Learning React in 12 weeks:
Week 1: Treehouse project (if you don’t have access, do this)
Weekend project
Week 2: FreeCodeCamp
Weekend project
Week 3: FreeCodeCamp
Weekend project
Week 4: FreeCodeCamp
Weekend project
Week 5: Scrimba
Weekend project
Week 6: Scrimba
Weekend project
Week 7: ReactForBeginners (if you don’t have access, do this)
Weekend project
Week 8: EggHead
Week 9: Udemy
Week 10: Udemy
Week 11: Udemy
Week 12: Udemy
Special projects for designers:
Special projects for advanced:
Learn React in 6 Weeks:
Week 1: An Introduction
Week 2: Components and Props
Week 3: Component State and Lifecycle
Week 4: Forms, Events, and Keys
Week 5: An Example App
Week 6: ReactJS Best Practices
Making Your Own App
Best Apps to Make:
Learning Testing
- Test Structures
- Introduction to Testing with Jest
Future Work
- Learn differences between different frontend frameworks
- Critiquing react code
- Improve efficiency in React
Gotchas
Coding Practices
- Identifying opportunities to refactor
- Coding for scale
- Avoiding over-engineering
- Isolating behavior
- Design Process
Key Technologies
- React
- NodeJS
- Brew
- Express
- Jest
- Mocha
Example App
Appendix
- This is pretty cool link for more information: https://reactjs.org/docs/thinking-in-react.html
