In the beginning I was using functions that interacted with the DOM - time consuming and messy. Then we had libraries like jQuery, MooTools, Yahoo etc, equally messy. Then we had MV* such as Backbone, pretty cool. However, not really great for complex apps. Same for Angular, better to begin with, but full of new problems.
Ideally we want to use web components, but humans have a history of not getting along, so web components are not standard yet.
In my opinion, React is just a stepping stone to web components; funnily enough everything in React is a component. Just like an HTML5 input slider - or even a select input - these are just web components - reusable components used with a custom tag and parameters set with attributes. These components have low coupling and high cohesion - you can work on these as separate entities, but they can all work together to create an app. Great for large teams or large projects.
Getting started
Man, creating apps for a browser isn't easy. Loading libraries, plugins for those libraries, searching for a boilerplate - oh wait, we're not using THAT boilerplate anymore, this one is much better, blah blah and all that other shizzle ... I mean, what a drag. So lets use Facebooks boilerplate command line tool - Create React App.
npm i -g create-react-app
As I usually learn by doing a lot of smaller apps I set up my working directory like this. The node_modules folder is at the top level and is referenced via a symlink.
mkdir starter && cd starter
create-react-app .
mv node_modules ..
ln -s ../node_modules node_modules
rm src/App.css src/App.test.js src/App.js src/index.css src/logo.svg
That will create a folder we can copy from:
cp -a starter mynewapp
The -a flag copies the simlink instead of the full node_modules folder.
Components
As mentioned before, we are creating a bridge to Web Components, so the key is in the name 'components'.
Testing React
Almost all tutorials don't start with unit tests. Then they say at the end you should unit test. Unit tests are immensely important, nay, essential to having clean code and a great app.
Jest is installed with the create react app, so thats a good start. There are a few more components needed though.
Best practice seems to use enzyme, and once you start using it you see why.
npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer
npm install --save-dev enzyme react-addons-test-utils
Virtual DOM
React
.Children
.map
.Component
.DOM
.cloneElement
.createClass
.createElement
.createFactory
.findDOMNode
.render
As the name suggests, react creates a virtual representation of the DOM, which is a lot faster than using the actual DOM. Then react renders that representation by creating actual DOM elements and then inserting them into the real DOM.
JSX and pre-compilers
First off, you don't have to use JSX, however most people do. JSX is an XML transpiler, that was created to integrate React.
Props
React components have props - properties. Props are passed to the createComponent function, or passed in as properties to the constructor.
In React, data flows just one way. Props are read only and can only be passed down to children.
Properties can be passed as attributes on jsx elements. Javascript expressions need to be around a single curly brace:
<Header tagline='My awesome tagline' time={Date.now()} />
The Child component receives a prop named onAction, which it can call whenever it needs to send up data.