React Hour One

If you’ve read anything about web frameworks this year, I’m sure you’ve seen that React is the trendiest tool out there. With all the JavaScript web-frontend tools that come out seemingly every week, it’s rare for one to receive as much positive press as React has. Though I tend not to put too much weight in tools, I’d rather be spending time on timeless concepts like math or algorithms, React seems like it is a framework worth spending a some time with. I plan to put in on average about one hour a day on learning and using the framework. As I dig deeper into React I will chronicle my experiences here. I will post links and sources to all of the sites and tutorials used and attempt to summarize the key concepts I’ve picked up.

My journey through the world of React began at the framework’s homepage. The demos and sample code on the homepage sell React as a modular, reactive, view abstraction that can be used to build web applications and even mobile apps. React’s primary goal is to solve the problem of “building large applications with data that changes over time” [1]. That’s a tall order, I’ll have to find out if it fits the bill on to the ]tutorial.

The tutorial lets us build the comments box below. Since one of the main reasons to use React is to take advantage of its modular nature, the application makes heavy use of components. The app consists of the following components: CommentBox, CommentList, CommentForm, and Comment. The key component is the CommentForm. It is built up from the CommentList and the CommentBox below. The CommentList is made up of each of Comment components. The CommentBox is used to post comments. The solution relies on ajax to fetch and write records to a json file used to store the comments. The mechanics of using React seem fairly straight forward. React builds the ReactDOM from JavaScript classes. I’ll definitely have to examine the code further as I learn more and more but it seems like I could be decently productive using this tutorial, along with heavy use of Google and consultation of the docs [3].

For my efforts towards learning React, I’m going to be using Microsoft’s Visual Studio Code text editor. It’s a great light-weight Atom based editor and it works on all platforms.

Notes on the Server

I used Node.js to run the server. I have to admit, it’s been a while since I touched Node.js and I had to do some searching to get http://localhost:3000/ displaying index.html. If anyone ever gets to this point, here are the commands that I used to get everything up and running. Assuming you have Node.js installed and have downloaded and extracted the zipped tutorial file, cd to the tutorial folder you’re your shell. Once you’re there, issue the following four commands:

npm init
npm install express –save
npm install body-parser –save
node server.js

Now you should be able to navigate to http://localhost:3000/ from within your browser.

Where I’m At and What Next?

Reading through and typing out the tutorial by hand took about 30 minutes. Reading through some of the material and relooking over the source code took another half an hour. So on direct React material I’d be about at an hour or so. It took me another 15 minute to setup and decide the platform I wanted to run the application on. My next step is to go through this free course. I saw it recommended on Hacker News with a lot of positive feedback so it should be a great resource. Until next time!

Links

[1] - Why React?
[2] - Official Tutorial
[3] - Official Docs

Published on 4/6/2016 6:49:48 PM