JavaScript Development in Action: Coding With React & Node

This April, I had the pleasure of attending a 2-day JavaScript (JS) development course, led by the distinguished Azat Mardan -- author of many books focusing on full stack JS development, at Hack Reactor in Los Angeles.

 DAY ONE:

During the first day of the course, we were introduced to Node.js (a JS runtime) and some of the advantages and disadvantages of using this framework.

 Advantages of utilizing Node.js include:

• It features non-blocking I/O, so everything will run asynchronously
• It's built on V8, which is the same JavaScript engine that Google Chrome uses
• It has a vibrant ecosystem with NPM (Node Package Manager)
• You can reuse code client and server side (which allows a front-end developer to complete back-end work and vice versa) 

Some disadvantages are:

• Developers need to change their mindset to an asynchronous and functional+prototypal workflow, given the non-blocking I/O feature
• The framework is not as mature as other languages such as Ruby, Java, or Python (yet)
• A few remaining quirks (found in JavaScript itself) exist in Node.js (though most of them appear to be fixed in ES6)

The primary disadvantage of Node.js is that it is not sufficient for CPU-intensive tasks. Those should be offloaded to other workers/processes.

It’s also important to note that Node.js is not the same as the JavaScript that runs in your browser. These minor differences, like the lack of the "window" variable in Node.js, are important to note.

 Thanks to NPM, Node.js can interface with a bunch of different database types, including MySQL, PostgreSQL, MS SQL, and MongoDB just to name a few.

 To help us get started coding in Node.js we installed learnyounode. This is an interesting bit of code, featuring exercises that you can complete on your own and hints for when hiccups arise. Of course, it didn’t hurt to work through the exercises with Azat on hand, to answer questions and provide insight.

We were also introduced to Express.js, and enjoyed an introductory lesson on how it works. 

Express.js makes working with Node.js much simpler. Just as jQuery made it easier to do certain things in JavaScript, Express.js simplified many tasks in Node.js. URL parameters and query strings become easier to work with, and users can define routes for different pages or different endpoints when building an API. Express.js will also allow you the use of middleware on your routes, so you can take an action (like validating a user) before sending data or storing it. Thanks to it’s modules, Express.js will also allow you to perform authentication and validation, and host sessions.

Another tool, with pertinent applications for coding with Node.js and Express.js, is called expressworks. This works exactly the same way as learnyounode, with practice lessons that users complete, and technique/function examples for reference. 

DAY TWO:

After the first day (centered around setting up the server) wrapped, the second day was dedicated to using React.js.

React.js is different from other libraries in several ways. One -- it does not do DOM manipulations, (which allow for moving and/or creating elements). Two -- there are no event listeners or handlers. React.js is a View library only. Three -- you need to use your own models and routers. Use something like Backbone.js or Angular.js.

React also has a ton of different modules that can be used along with it. One of the required modules is React-DOM. The following examples will require this. Another module that you can use is React-Router, which operates similarly to Backbone.js.

Here is a quick code example of how to write "Hello world!" in React.js:

ReactDOM.render(
    React.createElement('h1', null, 'Hello world!'),
    document.getElementById('example')
)

 As you can see, this bit of code is quite the doozy. To make coding easier for us, we used JSX. This will allow us to write more organized code. But, if we use JSX, we will need to compile everything into a usable JavaScript file. To do this, we use Webpack and Babel, or Gulp, Grunt or a similar toolkit. 

An example of JSX with the same example from above becomes this:

ReactDOM.render(
	<h1>Hello world!</h1>,
	document.getElementById('example')
)

 Obviously, this is a bit easier to read. But do not mistake this for HTML -- these are in fact XML tags. This may look awkward, but it is the recommended way of writing React.js apps because it provides syntax for components, layouts, and hierarchy. You don't have to use JSX to write React.js apps, but it does make it easier to understand.

After getting our JSX code in place, we needed to convert it into regular JavaScript, so that our web browsers could understand it. We used Babel (as it allows us to use the new ECMAScript 6, or ES6, and compile it down to ES5-friendly code for older browsers) with the Babel React presets and Webpack.

Webpack will do several things for us. First, it will bundle our JS files along with our CSS files (if we chose to use them) and minify them for us. It will also complete React/JSX transpilation (translating one language to another) for us. It’s important to make sure that you have only one element as a top-level tag.

This is an example of what NOT to do:

ReactDOM.render(
	<h1>
		Core React.js
	</h1>
	<p>This text is very useful for learning React.js.</p>
	,
	document.getElementById('content')
)

But this iteration would be acceptable because it has one top-level element:

ReactDOM.render(
	<div>
		<h1>Core React.js</h1>
		<p>This text is very useful for learning React.js.</p>
	</div>
	,
	document.getElementById('content')
)

Since JSX is XML based you can create your own tags to use using a React Component.

class Content extends React.Component {
	render() {
		return (
			<div>
			<h1>Core React.js</h1>
			<p>This text is very useful for learning React.js.</p>
			</div>
		)
	}
}

Then we would render it with:

ReactDOM.render(
	<Content />,
	document.getElementById('content')
)

 Of course, these are just some of the basics. React.js is incredibly powerful, and I look forward to using what I’ve learned for future design and development projects. If you're looking to build apps from scratch, develop a code reference library, learn a new language, or network with fellow developers - I can't recommend an event like this enough.