Getting Started with ReactJS

By Joydip Kanjilal

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

ReactJS is a popular JavaScript library that is declarative, flexible and efficient and is also easy to use. It was built by the Facebook and Instagram development teams and is used for creating reusable user interface components. The prerequisites for learning ReactJS are that one should have a good working knowledge of JavaScript, HTML5, and CSS. This article presents a discussion of what ReactJS is and how we can work with it. Note that we will be using the terms React and ReactJS interchangeably in this article — both imply the same thing.

What is ReactJS and why is it Useful?

So, what is ReactJS? Is it another JavaScript framework much like AngularJS? Not exactly, since React is just the view layer unlike AngularJS which is a complete framework. So, you cannot build a complete dynamic application only using ReactJS. In other words, while Angular is a complete JavaScript framework for application development, React is just meant for interface development. Also note that while AngularJS doesn't support the Node.js platform, you do use Node.js in the front-end when working with React.

One of the best features of ReactJS is that it quickly leverages virtual DOM. Manipulation of DOM elements is quite an expensive operation. This is exactly where ReactJS comes to the rescue. Incidentally, virtual DOM is much faster than the regular DOM. Actually, React creates its own Virtual DOM environment where the components reside.

Get ReactJS from GitHub.

Features of ReactJS

Here's are some of the most striking features of ReactJS.

  1. Open Source — ReactJS is an open source framework that you can use for free
  2. Support for Asynchrony — The support for asynchrony in React is another reason why it is becoming widely popular.
  3. Improved performance — ReactJS leverages virtual DOM due to which it is fast. The best part in React is that the component logic is written in JavaScript in lieu of templates. This means that you can keep the state outside of the DOM.
  4. Easy learning curve — While AngularJS has a steep learning curve, it is quite easy to get started learning and using ReactJS thanks to its straightforward API
  5. Support for components — ReactJS provides you a way to declaratively build custom user interface components and then render those components in the user interface. Incidentally, components in React enable you to split the user interface into independent, reusable pieces. These are actually custom HTML elements that exhibit business specific behavior.
  6. Support for JSX — The JSX language is quite similar to XML and facilitates easily writing your own components. ReactJS provides support for JSX which in turn enables you to use HTML and JavaScript together. This improves readability and maintainability of your code. Note that you are not constrained to just using JSX when working with React —  you can also write your code in plain JavaScript.

Getting Started - Building a Simple Program Using React

Before you start using React, you can use npm or Facebook CDN to install React in your system. In this section, we will build a simple program that uses ReactJS. Assuming that you have the necessary JavaScript files available to work with React, the following piece of code can be used to create a React component.

var Hello = React.createClass({
  render: function(){
    return (
      <div>This is a simple component built using React!</div>
    );
  }
});

If you have a div element in your HTML page named "sample," the following piece of code can be used to render the component we just created.

ReactDOM.render(<test></test>, document.getElementById('sample')); 

Summary

As we already have discussed earlier in this article, React is only the view — it is not a complete application development framework such as AngularJS. React doesn't have support for promises, Ajax, event system (sans the vanilla DOM events), data layer, etc. In this article, we have discussed the ReactJS framework, its capabilities, a comparison between ReactJS and AngularJS frameworks and how we can get started using ReactJS. Stay tuned for more articles on ReactJS in my future posts here.

Resources:



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date