I come from a Perl and PHP backend background. I have moderate JavaScript experience. These are the guides that have helped me get up to speed with React. I’ve included links that explain the reasoning behind React’s way of doing things (e.g. the Virtual DOM) and how to use React itself. I’ve also given a brief rundown on the complementary tools and libraries that I’ve found essential.
The learning curve is steep, but stick with it!
My business requirement for React: Re-building mobile version of audiomack with persistent audio player that continues to play songs between page requests.
Essentials
- React is declarative rather than imperative (mostly) – Imperative and (Functional) Declarative JS In Practice (by François Zaninotto)
- Virtual DOM background (by Pete Hunt)
- Facebook’s Getting started
- Fundamentals course (by Tyler McGinnis)
- Simple tutorial — building searchable product data table (by Pete Hunt)
Tooling overview
- Node.js – Allows you to run JavaScript server-side
- React framework
- NPM – JavaScript Libraries — your project will likely need a load of these. Manage via package.json file
- Babel – Code transformer — allows you to write the latest JavaScript (ES6 and beyond) and also JSX. Babel transforms it to JS that all modern browsers understand.
- Webpack – Bundle your raw application code into a package that the browser can execute — it runs Babel, minifies etc.
- Redux – Manage application state in single place — UI and data changes stored in state tree Getting started with Redux (by Dan Abramov)
- Sublime’s JavaScript highlighting has some issues with JSX, so install this package — React Syntax highlighting for Sublime Text
Comments and Tips
- You probably want to render server-side for first call (efficiency & SEO reasons) Server-side rendering
- Getting a working Vagrant VM with source code is hard (NPM installs in shared folders seem problematic)