Skip to content

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.

sylvhama/modern-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

78 Commits
Β 
Β 

Repository files navigation

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:

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 βš›οΈ

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:

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!? πŸŽ“

What about styling? πŸ’…

Some basics

Somne libraries you can use to manage your style:

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? πŸ€–

Others tools I default to

Others libraries I default to

Paid Courses πŸ’Έ

The ones I recommend after completing them:

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published