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!
• Get Started with Debugging JavaScript in Chrome DevTools 🎬 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 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.

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 Fiagram 📝 with the Class Component Lifecycle Methods Diagram 📝
• Higher Order Components: A React Application Design Pattern 📝
• Render Props 📝

State management

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 recommend reading the article You might not need Redux 📝 first. Plus React now has a stable Context API 📝 that will help you to share data across components without a third party library.

If you want to learn more about Redux then I would recommend its official doc 📝 and those links (beware that some might be outdated):

• React, Redux and JavaScript Architecture 📝
• Understanding Redux: The World’s Easiest Guide to Beginning Redux 📝
• Getting Started with Redux 🎬
• Building React Applications with Idiomatic Redux 🎬
• Presentational and Container Components 📝
• Redux Toolkit 📝 The official, opinionated, batteries-included toolset for efficient Redux development;
• Others links 📝

3) What's next!? 🎓

• 10 Interview Questions Every JavaScript Developer Should Know 📝
• 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? 💅

Some basics

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

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

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;