Baby steps in learning ReactJS

As a way to better understand my process of learning a new technology I've captured the first two days of my journey of learning ReactJS

Day 1  - Thursday April 30, 2015

What I did on this day

• Downloaded the starter kit from the website and tried it out
• Started the tutorial and bailed out
• Watched the 2013 presentation on ReactJS
• Watched most of Thinking in ReactJS video from tagtree

Notes
At this point my aim is to get a general grasp of what ReactJS is, I'm focusing on understanding the mechanics of the framework. I think my next step will be to follow along more closely with the "Thinking in ReactJS" presentation.

Impressions:
ReactJS flies in the face of convention and eschews the idea of templates, favouring what they call views, also very counter-intuitively they "redraw" the DOM for every update yet in benchmarks are able to outperform AngularJS. To achieve this they use a virtual DOM and only render to the real DOM on an "as needed" basis.

Day 2 - Friday May 1, 2015

What I did on this day

• Back on the ReactJS website and then decide to work my way through the Thinking in react tutorial again. 

Notes
In following the tutorial the first example failed because the code was out of date. This slowed me down for about 5 minutes. It turns out that React.renderComponent() is now replaced with React.render() so I was working with a slightly dated tutorial, after replacing switching the code to use React.render() instead of React.renderComponent() I was able to make my way through the tutorial.

After an hour of following the tutorial I had the static version working and started to learn about React's concept of "state". I decided to break for a while and grab a snack.

What I know now

• ReactJS is about building components, usually from existing HTML and Javascript
• They provide a HTML like syntax called JSX which simplifies the creation of these components
• I'm learning some of ReactJS's methods such as render()

Two days in, I think I know enough to tentatively try this in a new project. I'm sure I'll gain a lot more facility with a week or two of usage.

Parting thoughts 

So far I've spent 3 to 5 hours on this journey and things are starting to make sense. My feeling at the moment is that I first needed to capture the overall concept of what React does, the virtual DOM and React's JSX syntax. Once I was fine with that I needed to use it in a trivial example, in my case the static version from Thinking in React tutorial. I'm confident about being able to do that now.

Next I'll spending time getting comfortable with idea of working with state.