React the hard but good way

Regarding this title you may expect another react js tutorial. Nop ! 
I wrote this post as a suggestion for a learning path to people who wants to learn react to create production ready applications. It’s opinionated but tends to use existing best materials.

Go on, it’s never too late to start a react journey !

I highly recommend to use, i fell in love with their “less than 3 minutes about a topic” videos. Materials suggested below are free but buy a one year license is worth it because there are more enjoyable videos.

About the opinionated stack

One of the strength of React compared to Angular is that it’s just a UI library and you have the liberty to build your own stack. Yes you can ! But if you need a starting one, i suggest you to use :
react as UI library
react-router as client-side routing library
styled-component as inline-style management library
redux as data flow management library

Focus on Redux

You may have read about “you may not need redux” but dealing with professional front-end application development is all about data flow. Sure there are alternatives like RxJS, you can also mix up some concepts such as Redux-Observable. But Redux is viable and a suitable starting point and redux-thunk can manage easily most of real life problems. So you should first master those concepts before go to play outside.

Run to the hills

My 1 month program you should follow :

  1. A first introduction to react : yes you should know the basics. Watching “make your first production ready react app” course is a good starting point.
  2. Playing with react : don’t search for a fancy tutorial. Do the Facebook tic-tac-toe one.
  3. Beautify your UI : as a front-end dev you need style. Even if it’s possible to use CSS with react, it’s better to use inline-style. Quite easy, do the styled-component getting started.
  4. You may need client-side routing system. That’s exactly what React Router does. Watch the “add routing to react apps using react router” course.
  5. Now it’s time for a first contact with redux. Keep calm and watch the getting started course by Dan Abramov.
  6. To start coding with redux I highly recommend to do the ToDoList example. Additional question : add a new button “duplicate” on each row that duplicate the row at the end of the list.
  7. Easy ? Now you can burn your brain watching building react application with idiomatic redux, still by Dan. Then go out and play !
  8. Practice with the advanced redux tutorial
  9. Need more practice ? Do the tutorial
  10. You think you’re ready ? Take a little attention to my training material about javascript easy to reason about (Medium post is coming)

Black hole sun

Nowadays javascript is also about tooling. Don’t be a fool you need a spaceship to go far far away.

IDE is a developper choice, if you haven’t a chosen one you can use or vscode.

You will need a toolchain, mine :

  • Prettier : formating tool, avoid dummy git changes
  • ESLint : linter, promote best practices
  • Babel : transpiler, code in ES8 and avoid headaches about browser versions with the babel-preset-env
  • Webpack : module bundler, also useful for devs productivity thanks to HMR

RTFM : Javascript, react and redux documentations are amazing ! Read the doc for any purpose before trusting elder stackoverflow answers

Before you go go

I wrote this note to do a program for my team and that is exactly what i miss ed a few years ago to avoid wasting time doing some fancy trainings. I hope it may be useful for you too.

Don’t forget to follow :

And join reactiflux discord