What is React.js
There has been a lot of buzz recently about the future of Blaze (Meteors reactive templating system).
Rumor has it that React.js will influence or even replace Blaze in the near future.
But what is React.js? And what is it not?
Let’s take a look.
The history of React.js
React.js is a tool which was started at Facebook by an engineer called Jordan Walke. Back in 2010 Facebook had issues with their rendering engine which was very slow processing DOM changes. Furthermore the view code was not that modular and encapsulated which made it quite hard to maintain, share and extend the codebase.
React.js was born to target those issues and implemented in the Newsfeed in 2011. The Instagram engineers were also interested to use this new technology after Facebook acquired it in 2012.
The extraction of React.js from Facebooks codebase to be reusable in the Instagram code layed the foundation to make React.js open source in May 2013.
So what is React.js?
React.js is a JavaScript library which makes it easy to build user interfaces.
With React.js you define so called view components which encapsulate the functionality related to the view component. This makes it easy to maintain, extend and share components throughout your application or even between applications.
Sounds strange? Let’s have a look at a simple example:
// job.jsx<br />
Job = React.createClass({<br />
createdAt() {<br />
return moment().format('L');<br />
},</p>
<p> jobTitle() {<br />
return 'Awesome job';<br />
},</p>
<p> render() {<br />
return (</p>
<div>
<div className="job-item">
<div className="row">
<div className="twelve columns headline">
<span className="title">{this.jobTitle()}</span>
</div>
</p></div>
<div className="row">
<div className="three columns">
<i className="fa fa-calendar"></i><span className="created-at">{this.createdAt()}</span>
</div>
</p></div>
</p></div>
</p></div>
<p> );<br />
}<br />
});<br />Let’s take a look what’s going on:
The comment on line 1 shows us that the file extension is .jsx. JSX is a JavaScript file extension which was inspired by XML. It enables us to embed HTML inside JavaScript files.
We create a new React class in line 2 (note: The ES2015 syntax should be favored to create a new React component).
Next up we define two component methods. The first one returns the current date and time. The second one returns the string “Awesome job”.
The next (and last thing) is the render method. This method is needed by react so that it can render the HTML which it contains on the screen. The most minimal React component does always need at least a render method.
The render method contains the HTML which should be displayed on the screen. The previously defined methods are called within the render method.
The component can be rendered like this:
<Job /><br />You can embed your encapsulated job component inside the render function of other components as well.
That’s it. No rocket science.
You can, of course use Meteors reactivity to enhance your Component.
This is just a simple example to demonstrate how React.js works.
We’ve built a full Meteor web application (the example above is a modified component from this project) which you can discover on GitHub. The corresponding Blog post is here.
It’s important to know that React.js just touches the view layer. Nothing more.
However you can extend React.js with e.g. a router if you’d like.
Great! And what is React Native
React Native is another Project by Facebook which was inspired by React.js and extends it in a way that you can use it to build apps such as iOS or Android applications. This is really great, because you can reuse you React.js knowledge and build the user interface in purely JavaScript which compiles to corresponding iOS / Android code. Another advantage is that you can write your code once and don’t have to target every single Platform.
If you are interested how this might look like you could take a look at “Friends” which is an app we’ve developed for demo purposes. The corresponding blog post is here.
I want to learn more!
Great. A really awesome resource is this tutorial. It won’t take that long to finish (although you might think so when looking at the scroll bar). It even compares how you would achieve the same results in jQuery.
You’ll have a really good understanding of React.js after you’ve finished it.
Conclusion
React.js is a very new, but also established library to make reusable view components which are encapsulated, sharable and easy to maintain.
More and more companies are using it in their productive environments. The community is very active and extend React.js with new functionality on a daily basis.
It’s definitely worth it to learn and understand it because more and more React.js experts are needed to build user interfaces and help established companies to transition from old fashioned technology to one of the hottest new view libraries currently available.
