There is a need among developers to use a framework that will let them achieve fast-loading websites and applications. This can be achieved by rendering complex user interface in an efficient manner.
The usual way of building a UI starts with rendering your template before wiring up events to your Document Object Model (DOM). This way, you can update a specific property in your model and update it as necessary. The problem with this approach is the penalty in performance. Update properties in your model is expensive and time-consuming. More importantly, once changes in the model have been made, you need to render a new UI from scratch.
Its declarative interface will determine the changes that need to be made and automatically applies them without touching the DOM. The “one-way binding” of React.js creates a tighter relationship between markup and behavior, which results to shorter, cleaner code.
While React offers a solution to your UI problem, the library could still have been improved. CSS is not integrated within React.js, which means CSS in the component file. Also, propagating knowledge can get problematic once the application starts growing.
Nonetheless, there are so much advantages that developers can enjoy and sink their teeth into React. If you’re a developer and want to learn how to harness the power of React.js, below are tutorials and resources to help you get inspired.
Introduction to React.js
This video presentation made by Tom Occhino and Jordan Walke that spans to almost 80 minutes React.js at Facebook Seattle. Pretty comprehensive and a must-watch for beginners.
Ken Wheeler (Scotch.io)
This tutorial of the React library gets down and dirty with the actual coding with a downloadable Starter Kit and JSFiddle. After opening the downloaded files, the post with guide you through building blocks of React such as the components, props, and events, among others.
Tyler McGinnis acknowledges the difficulty of building something out of React.js even if you’ve read and researched about it online. He breaks down this barrier by offering this first part of his comprehensive six-part tutorial that will allow you to create an application using this Facebook library. This post tackles the fundamentals of React.js, the creation of components and adding states to each, and more.
The tutorial series is ongoing but you can already view the second part of the tutorial here. It talks about building React applications using Gulp and Browserify.
Justin Deal (Zapier Engineering)
Reading up about React.js will give you an idea on how it works but may not answer all your questions about. This post will cover the basics as well as the “gotchas” that stump you about this Facebook library. Some of the more complicated concepts discussed here about React are the Transient states, Lifecycle methods, the difference between controlled and uncontrolled components, and more.
John Cobb (Web Design Weekly)
There are no posts about the best practices to apply when using React.js to build your application. But this post comes very close in providing the practices developers should observe. Much of the suggestions here come from the author’s experience in handling JSX, components, propTypes, and others.
This post assumes that you have knowledge on how to use React.js but nonetheless links to the comprehensive documentation provided by the React team as reference.
Martin Angelov (Tutorialzine)
Instead of jumping going into the terms and functions of React.js, this post goes a different direction by showcasing practical examples of applications like Timer, Navigation menu, and others that are built using this Facebook library.
Chris Harrington (Codementor)
React.js can be used side by side with workflows and other libraries to create web-based applications. This tutorial jumps right into it by explaining how to use React.js in combination with Flux Architecture, a client-side, data retrieving method that maintains strict component decoupling.
Getting Started with React.js
This is one of the better video tutorials about using understanding and learning how to use React.js to build applications. The video presentation was done by Stuart Harris who gets down and dirty with this Facebook library by explains the terminologies involved such as Virtual DOM, data flow, and others.
Rich Manalang (Atlassian Developers)
HipChat is an instant messaging application built for businesses. It runs using React.js library and Flux, an application architecture used by Facebook. The post explains why both were chosen to build HipChat to provide a better user interface and experience. It also details practical applications of both to the app.
Chris Harrington (Codementor)
Final thoughts: React.js has been gaining popularity as of late – it’s been listed as a current web design trend that’s about to get even bigger. Hopefully, the resources featured above should shed light on how to use this Facebook library effective in your app creation and development.
More on React.js:
Featured image taken from GitHub Facebook page.
Author: Christopher Jan Benitez
Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Writer by trade. Pro wrestling fan by choice (It’s still real to me, damnit!). Family man all the time.