Road to Modern JavaScript and React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

Road to Modern JavaScript and React

"ES6 is JavaScript" (from How to learn ES6)

The purpose of this guide is to provide a list of several free ressources (articles 📝, books 📖, videos 🎬) which will help you to learn ECMAScript 6 (also known as ES6 or ES2015) and the framework React.

⚠️ 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.

0) ES5 foundations and others basics

Before digging into ES6, let's make sure that we understand some ES5 common concepts:

  • Eloquent JavaScript 📖 is the perfect reminder to learn JS and review some general programming concepts.
  • Functional Programming in Javascript 🎬, those videos are made by a former Spotify JS developer. He will teach you essential concepts like Promises (this is ES6 but it's okay!), Closures or Higher Order Functions. Those things are essentials in React.
  • Understanding Hoisting in JavaScript 📝, if you come from another programming language, you might feel unconfortable with how we can declare variables in JS. This article will help you to feel better!
  • Prototypes 📝, it's nice to understand prototypes in JavaScript since ES6 class is only syntactical sugar, JavaScript remains prototype-based. However I would only learn this for your general culture, it's not something you might use on a daily base.
  • But really, what is a JavaScript test? 📝, what ever the language you use, it's always important to write automatic tests!
  • Get Started with Debugging JavaScript in Chrome DevTools 🎬 Firefox or Edge also have their own devtools, but I personnaly prefer using Chrome ones when coding.

1) ES6 / ES2015

2) React ⚛️

The official doc is awesome! However if you need different point of views / styles then you can look at the following links:

To start
Hooks 🆚 Class Components

Hooks 📝 are here! This is still a preview but this should change the way you will write components in the future. I believe you should still learn about Class components and some patterns used to share logic between components because you might still encounter them:

State management

At some point you might think it would be nice to have access to some kind of global variable in any React component in order to avoid passing down props again and again... People might tell you to use Redux 📝 or MobX 📝 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.

So you've learned about pros and cons about MobX or Redux but you're not sure which one is better? As always it will depend of your taste, your personality, your experience, your team, the project you are working on etc... There isn't a bad choice.

If you want to learn more about Mobx or Redux then I would recommend their official docs and those links (you will notice that there are much more Redux links because I kinda prefer it 🙈):

3) Are you ready!?

Special Mention

You really should have a look to Wes Bos courses 🎬, they aren't all free but they worth the investment!

What about styling?

Some basics
Libraries you can use to manage your style:
  • CSS Modules 📝
  • JSS 📝
  • 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.