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 egghead.io, 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 :
- 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.
- Playing with react : don’t search for a fancy tutorial. Do the Facebook tic-tac-toe one.
- 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.
- 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.
- Now it’s time for a first contact with redux. Keep calm and watch the getting started course by Dan Abramov.
- 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.
- Easy ? Now you can burn your brain watching building react application with idiomatic redux, still by Dan. Then go out and play !
- Practice with the advanced redux tutorial
- Need more practice ? Do the rangle.io tutorial
Black hole sun
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
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 :
- Jordan Walke (react creator)
- Dan Abramov (redux creator)
- Sean T. Larkin (webpack core team)
- Max Stoiber (styled-components creator)
- Christoph Pojer (works on Jest and Yarn)
And join reactiflux discord