Road to Modern JavaScript and React

The purpose of this guide is to provide a list of several free ressources (articles 📝, books 📖, videos 🎬) which will help you to learn modern JavaScript and the React library.

⚠️ This guide is not meant to list everything you must know about JavaScript or React. I've tried to list what could be useful if you were totally new to this world based on my experience and the people I've met. If your favorite thing isn't listed there, it doesn't mean I dislike it or disapprove it. For example TypeScript or GraphQL are great, but I don't think it is mandatory to learn that first as a beginner.

1) Modern JavaScript 💃

Tutorials that cover everything:

• Learn Web Development 📖 will also teach you HTML and CSS.
• Eloquent JavaScript 📖 is perfect to learn JS and general programming concepts.
• The Modern JavaScript Tutorial 📖 How it's done now. From the basics to advanced topics with simple, but detailed explanations.
• Learn ES6 (ECMAScript 2015) 🎬 if you used to write JavaScript a while ago and wanna catch up with modern syntaxes.

Articles and videos I liked:

• Modern JavaScript Explained For Dinosaurs 📝 you will learn basics about npm, Babel, Webpack etc.. and the history behind it.
• Understanding Hoisting in JavaScript 📝 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!
• Debug JavaScript 🎬 Firefox or Edge also have their own devtools, but I personally prefer using Chrome ones when coding.
• Functional Programming in Javascript 🎬 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.

Documentation

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.

2) React ⚛️

• What is React: A Visual Introduction For Beginners 📝
• JavaScript to know for React 📝
• The official doc is the best place to learn React.
• 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.
• Learning Patterns 📖 Patterns for building powerful web apps with vanilla JavaScript and React.

Hooks 🆚 Class Components

The hooks are very React specific, I suggest you check Why React Hooks? 📝 🎬 in order to learn more about React history and or why we now use hooks. You might also want to learn about Class components and some patterns used to share logic between components (before hooks arrival) because there are still present in a lot of codebases:

• Compare the Hook Flow Diagram 📝 with the Class Component Lifecycle Methods Diagram 📝
• Higher Order Components: A React Application Design Pattern 📝
• Render Props 📝

State management and others libraries

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 📝 to get a nice overview. React libraries for 2023 will also tackle this subject and many more!

3) What's next!? 🎓

• Stay up to date and discover new things with React Newsletter and Bytes newsletter;
• Practice React with create-react-app 💻 or directly in your browser on codesandbox 🌐
• Build production ready apps with: Vite, Next.js, Gatsby, React Native via Expo;

What about styling? 💅

Some basics

• 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 📝

Somne libraries you can use to manage your style:

• Tailwind
• CSS Modules
• vanilla-extract
• Emotion
• Styled Components, I think they are the best in between choice for those who are used to write "classic" CSS and want to take advantage from mixing it with JavaScript.

Design systems

Maybe you just want to build an app and avoid spending a lot of time writing CSS and HTML. I suggest you use libraries such as Material-UI, Ant Design or Polaris. If you want to build your own design system I would suggest you to read Atomic Design.

What about testing? 🤖

• But really, what is a JavaScript test? 📝
• 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;
• Linter: ESLint;
• Manage Git via an UI instead of commands: Sourcetree or VS Code;
• 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. Deploy your Storybook and run screenshot tests on each story via Chromatic;
• API Mocking when testing: Mock Service Worker;

Paid Courses 💸

The ones I recommend after completing them:

• Wes Bos courses 🎬 JavaScript, React, CSS and more; some are even free!
• Kent C. Dodds courses 🎬 React, Testing;