For new web developers, just learning javascript can be hard enough, let alone trying to understand the dozens of popular libraries, frameworks, services, architectures, preprocessors, bundlers, and other technologies in wide use today. It can all make web development seem esoteric and inaccessible. If you feel this way, you are not alone!

I’m here to help by providing an introduction to a thriving avenue of one part of the web world: ReactJS. Rather than attempt to create a comprehensive guide, I thought it would be beneficial to provide a high-level introduction with links to resources for learning more. Consider this step 1 on your journey to becoming a React guru.

Explore React Courses

ReactJS

React (React or React.js) is an open source view rendering library originally developed at Facebook. The motivation behind React is to make the UI more predictable by establishing a hierarchy of modularized components. A simple component consists of DOM elements that describes its structure, plus any supporting data and methods. React restricts how components store and exchange data with state and props. A component’s state consists of all the data necessary to define a component’s appearance and behavior, while props refers to the data (properties) assigned to a child component by its parent. When something in the application changes, it typically corresponds to a change in state, which triggers React to re-render and make the change. React takes care of all the event listening/delegation and allows the developer to instead focus on what the application should look like given a particular state.

Explore React Courses

Parent-Child Relationship

Here’s a simple example:

See the Pen Simpler React Example by Mike (@qualitydixon) on CodePen.

The whole of the application is one component that displays a number and two buttons that increment or decrement the number. Let’s go over the fundamental pieces. Take a look at the first line:

var AdjustValue = React.createClass({

createClass is the entry point for creating a React component and inside createClass is where a component’s appearance and behavior is specified. To begin, the component’s state is defined with:

getInitialState: function() { return { counter: 10 }; }

In this case the state contains one item counter, whose value is set to 10. After that a function is defined:

shift: function(x) { this.setState({ counter: this.state.counter + (x) }) }

The only action of shift is to call setState and update counter. setState is the main method used to notify React that something has changed and the UI may need to update.

The last piece of the component, the implementation of the render method, is the most important. This is where the component’s DOM subtree is defined. Look at how that’s done for AdjustValue:

render: function() { return ( <div className="adjustValue"> <button id="minus" className="btn glyphicon glyphicon-minus" onClick={this.shift.bind(this, -1)}></button> <div> {this.state.counter} </div> <button id="plus" className="btn glyphicon glyphicon-plus" onClick={this.shift.bind(this, 1)}></button> </div> ); }

render returns the DOM elements that make up the component. Notice how the elements are constructed as they would be in an HTML document. This is made possible by React’s use of a javascript preprocessor called JSX. It allows for XML-ish syntax to be written directly in javascript files. JSX is not required to use React but makes for a very clean, readable way to define DOM elements.

The shift function is set to the onClick events of the buttons. When the user clicks the button, a setState event is triggered, telling React it needs to update. Here’s an overview highlighting major component building blocks:

Explore React Courses

Anatomy of a React component

Finally, all that’s left is to insert AdjustValue into the DOM. Consider the last line in the example:

React.render(<AdjustValue />, document.getElementById('root'));

React.render is how components get rendered into the DOM. It takes in the component to be rendered (which in itself can be a hierarchy of components), and the location in the document to mount the component to, in this case ‘root’.

At this point it still may be unclear why you would choose ReactJS over any other library or framework so, equipped with our new knowledge of how ReactJS works, allow me to point out some benefits.

Reusable components. Define it once and use it again and again.

Components bring together elements and the methods that affect them. No more switching back and forth between HTML and JS files trying to decipher the behavior and relationships of elements.

ReactJS encourages purity . A pure function will always return the same output for a given input. The result does not depend on anything except the parameters it is provided. Similarly, If you provide your ReactJS application with a particular state you will get the same outcome 100% of the time. This is hugely beneficial for the predictability, and testability, of your application.

Performance. ReactJS is the middle-man between you and the DOM. When an action is triggered, it calculates the minimal amount of steps needed to reflect UI changes. And since it’s traditionally DOM updates that bottleneck app performance, the resulting bump in efficiency is noticeable.

Digging Deeper

If you’re ready for more, I suggest starting with the official documentation, which is well written and has plenty of guides and examples. Also take a look at the official ReactJS GitHub repo. In addition, I found the following resources to be helpful:

React Native

React was conceived, and is most often used, for rendering HTML. However, the beauty of React is that it can be applied to other view systems. That’s where React Native comes in. React Native is Facebook’s effort to bring the benefits of React into native app development (i.e. Android or iOS). I think React Native is best understood by looking at an example and comparing/contrasting it to React. Here’s the same AdjustValue component created in React Native for Android:

import React, { AppRegistry, Component, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; var AdjustValue = React.createClass({ getInitialState: function() { return { value: 10 }; }, shift: function(x) { this.setState({ value: this.state.value + (x) }) }, render: function() { return ( <View style={styles.container}> <TouchableHighlight underlayColor={'#396a73'} onPress={this.shift.bind(this, -1)}> <Text style={styles.adjustValue}> - </Text> </TouchableHighlight> <Text style={styles.adjustValue}> {this.state.value} </Text> <TouchableHighlight underlayColor={'#396a73'} onPress={this.shift.bind(this, 1)}> <Text style={styles.adjustValue}> + </Text> </TouchableHighlight> </View> ); } });

const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#3F51B5', }, adjustValue: { fontSize: 30, textAlign: 'center', color: 'white', margin: 10, }, }); AppRegistry.registerComponent('AdjustValue', () => AdjustValue);

For the sake of completeness, here’s what that component looks like on an Android emulator:

Compare and contrast this AdjustValue component with the one written for the web. The component itself is defined in the same way, using React.createClass. The state of the component and functions are also defined in the same way. The heart of the distinction is in the implementation of render. View and TouchableHighlight take the place of div and button. Now we’re rendering Native elements instead of DOM elements (or more precisely, wrapped up Native elements). With React Native you get the best of both worlds. The structure and flow of React with the performance advantages for mobile. Plus a common development environment across multiple platforms, allowing a company to potentially collapse their web, android, and iOS teams into one.

Explore React Courses

Digging Deeper

There’s not a great deal of educational content specific to React Native but remember much of the ReactJS documentation applies to React Native as well. That being said, if you want some perspective on the goals and motivations behind React Native, check out this excellent blog post by Facebook engineer Tom Occhino. After that, there’s always the official React Native site. And of course the GitHub repo.

That’s it for now. Check back as we dive deeper into the React-verse with an introduction to webpack, flux, redux, relay, and more!