React.js

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

React.js is a javascript library developed at Facebook to build interactive UIs that focuses on the View part of MVC.

Everything within a React is a component. A component has a state (mutable) and properties (immutable) and produces some arbitrary HTML code.

React provides a special language called JSX, a javascript-meets-html-like language that let’s you embed html templates into javascript code in a very straight-forward manner. jsx files are compiled into javascript and result in building a virtual DOM. Adding this additional layer of abstraction between and application and the real DOM, provides React with a lot of flexibility to improve the performance tied to DOM manipulation.

A Simple React JS Component

A simple example of a react component written in jsx could be this button:

You can create a simple component by using the React.createClass method and passing an object that contains a render method which returns a JSX template of how the component is going to look like when rendered. You can render the component in the DOM by using React.createElement followed by React.render:

Components Can Have Properties

A react component can have properties that can be displayed in the rendered HTML template. You can pass these properties as a vanilla JavaScript object in the React.createElement method and access them inside the React component via the this.props property. React lets you inject these properties inside the HTML template by using curly braces {this.props.messages}. For instance, this component:

Nesting Components

Once you have defined a series of components you can easily nest them inside your JSX files. For instance, if you have a navigation item you can nest the previous Badge component in a very straightforward fashion:

In this example the Nav component includes a nested Badge component. When we render the Nav element we pass an options object whose title and number will be in turn passed to the Badge component via its attributes.

Here is another example with a card that contains an image and a badge:

Would you like to receive more articles like this one on programming, web development, JavaScript, Angular, developer productivity, tools, UX and even exclusive content like free versions of my books in your mailbox? Then sign up to my super duper awesome inner circle.

Did Ya Know I've Written Some Books?

I have! The JavaScript-mancy series is the lovechild of three of my passions: JavaScript, writing and Fantasy. In the pages of each one of the books of the series you’ll find a breadth of JavaScript knowledge, delivered with a humorous and casual style of writing and sprinkled with Fantasy at every turn.

They are the weirdest and quirkiest JavaScript books you'll ever find. There's nothing out there quite like it.