Update: This is a rather old article and it probably doesn’t represent best practices.
React from Scratch: Part 0
I always have difficulty finding a good resource for learning a new language or framework from scratch. The “getting started” tutorials are usually designed to get you excited and show of the niceties and fanciness of the shiny tech but often leave out the practical things needed to use it in the “real world”.
Things left out are usually the build system, packaging systems or other peripherals that are not strictly relevant but are essential when building a practical system.
For an example of what I mean: Haskell in 5 steps makes no reference to the Haskell build tool Cabal, and neither does the book Real World Haskell until it’s glazed over in Appendix A. If you read through all the material you might grok Haskell (of all things to grok) but you still won’t be able to build a practical software project.
Then there are the “seed project” types where you are told to “just clone this project” or “just run this command” (try Polymer or Angular) that scaffolds everything for you. Then when one day you want to go to production you realize that you actually need to understand all the magic, and probably need a build system too.
It sometimes seems like the “getting started” tutorials put you on an incorrect path. They sometimes seem to be a bit disingenuous and try to hide the complexity from adopters. Sometimes the scope is just too small and someone using the technology might not realize how much more is needed for a real-world application.
There are many other technologies where the introductions are more friendly (for example Rust) or thorough (for example old ASP.Net), but it seems there is an epidemic of less-than-useful tutorials for new technologies.
So what about React?
React has been getting some attention lately. The functional style and focus on immutable structures and data flow (as opposed to the traditional data binding) makes for a relatively simple framework that can service simple or complex web applications alike. It hit the “Adopt” tag on the ThoughtWorks Radar (unlike Angular) and is widely (ish) used according to StackShare (at time of writing). And most significantly perhaps, there is a compelling real world example of React in action.
But React is a framework that’s really hard to get useful beginner-level information for. A lot of the tutorials leave important details out (including the one on the react site which has you building in codepen), and many are outdated (right now the top three Google results include articles from 2016–01 and 2014–10). Furthermore, React has a lot of ancillary technologies that support its functions, as it is technically just a view engine. Examples of these would be Webpack or Browserify as a build engine; Flux, Redux, Relay, or Apollo for communication; or other utilities like ImmutableJs. And then there is the server side, as any real-world website would likely need isomorphic (universal) react to make SEO and other niceties work (see here for a nice article). We can go on (routing, style imports, images, etc.).
It is often difficult to find resources on how to use these technologies together.
What this series aims for
There are many “right” ways to implement react. I want to show one way of doing it, but I want to show it end-to-end, detailing all the technologies being used and how to get started from scratch (no cloning or scaffolding).
We will aim to build a basic system using these technologies:
- Webpack
- React
- Redux
- Sass
- Isomorphic React
- Bonus: containerization
We will start with what many tutorials skip over: Webpack.
