The purpose of this guide is to provide a list of several free ressources (articles
Tutorials that cover everything:
- Learn Web Development
📖will also teach you HTML and CSS.
📖is perfect to learn JS and general programming concepts.
📖How it's done now. From the basics to advanced topics with simple, but detailed explanations.
- Learn ES6 (ECMAScript 2015)
Articles and videos I liked:
📝you will learn basics about npm, Babel, Webpack etc.. and the history behind it.
📝if you come from another programming language, you might feel uncomfortable with how we can declare variables in JS. This article will help you to feel better!
🎬Firefox or Edge also have their own devtools, but I personally prefer using Chrome ones when coding.
🎬those videos are made by a former Spotify JS developer. He will teach you essential concepts like Promises, Closures or Higher Order Functions. Those things are essentials in React.
- Composition over Inheritance
🎬At school I had to do a lot of Object Oriented Programming. This video helped me to understand why it's not always necessary.
Sometimes you will need to search for documentation, for example if you don't know a specific keyword in a codebase or you would like to learn how to use a native function. Of course you can use any search engine or Stackoverflow but I would recommend using the MDN Web Docs.
- What is React: A Visual Introduction For Beginners
- The official doc is awesome! They also have a list of free courses (and paid ones).
- The Beginner's Guide to React
- Progressive React
📝tips to make your React site performant. web.dev also has a lot of articles like that.
🆚 Class Components
The hooks are very React specific, I suggest you check Why React Hooks?
- Compare the Hook Flow Fiagram
📝with the Class Component Lifecycle Methods Diagram 📝
- Higher Order Components: A React Application Design Pattern
- Render Props
At some point you might think it would be nice to have access to some kind of global state in any React component in order to avoid passing down props again and again... People might tell you to use Redux or MobX or Apollo or XState or [insert popular library name] to achieve that but it might be overkilled! I would recommend reading the article React State Management Libraries and How to Choose
3) What's next!?
- Create your first React app via create-react-app
💻or directly in your browser on codesandbox 🌐
- Subscribe to React Newsletter;
- If you have a basic understanding of React you could have a look to Next.js, Gatsby and React Native via Expo. Those are powerful and widely used frameworks;
What about styling?
- Learn CSS An evergreen CSS course and reference to level up your web styling expertise.
- Modern CSS Explained For Dinosaurs
- CSS-in-JS or CSS-and-JS
- Styling and CSS Official React doc
Libraries you can use to manage your style:
- CSS Modules
- Styled Components
What about testing?
- How to use React Testing Library Tutorial
📝Understand Jest and learned how to write automated tests via React Testing Library (there are others testing libraries but RTL is a great one recommended by the official doc).
- Understanding Jest Mocks
📝Mocking is a technique to isolate test subjects by replacing dependencies with objects that you can control and inspect.
- Why Cypress?
🎬a library to write end-to-end tests and more;
Others tools I default to
- Code editor: VS Code;
- Auto code formatter: Prettier;
- Manage Git via an UI instead of commands: Sourcetree;
- Build and deploy you app: Netlify;
- Continuous Integration: Travis CI;
- Buy domain name: Google Domains;
Others libraries I default to
- Routing: react-router;
- Internationalization: LinguiJS;
- Develop your components in isolation and share them to your team via Storybook;
The ones I recommend after completing them: