Created by Facebook, React was initially released in 2013. React continued to gain momentum until it looked like it was going to hit a snag in 2017 over licensing. The BSD+Patents license that Facebook was insisting on created potential Intellectual Property issues for developers. Fortunately, in September of 2017 Facebook backed down and re-licensed React under the more acceptable MIT license. The current release is 16.2.
Like the other popular frameworks, React is a free, unlicensed library so there are no perfect usage statistics, but there are several places we can look to for a good idea of overall adoption. It has over 88K stars on GitHub, and over 7 million npm downloads per month. Some of this traffic might, of course, be from development machines or mirrors, but these are good quick stats to get an idea of just how popular the library is.
Over 88K stars on GitHub
Over 7M npm downloads per month
React broke one million downloads per month in Jan of 2016 and has been climbing steadily since then, topping 7 Million by the end of 2017. While it dipped in Dec 2017, In Jan of 2018 it was back up over 7.5 Million.
[Caption:] Download statistics for package “react” 2016-2017 – data by npm-stat.com
React has some unique core concepts. It has a virtual DOM, JSX components, input properties, and props. Also, each React component has a state and a lifecycle, which we will go into.
React Core Concepts
React updates the real DOM in three steps. Whenever something has changed, the virtual DOM will re-render. Then the difference between the old virtual DOM and new virtual DOM will be calculated. Then from there the real DOM will be updated based on these changes. Instead of constantly having to work with the real DOM, which is very expensive, everything is handled virtually until we absolutely need to update the DOM. At that point we'll go ahead and do that expensive call.
Instead of working with the format in the example above, we’ll use a much simpler format shown in the example below using the tag MyButton.
It all stems from the react.createElement. Instead of having to create an element by hand, we have the component MyButton which has several different attributes that we pass in to it. We don't have to deal with creating the element, and then defining the tag, and then passing in all the attributes and everything like that.
We can also write it as “@class Welcome” which extends React.Component in the ES6 way if we want to work a little bit more with classes.
In the first example we return the simple HTML element. In the ES6 example we have the same thing but then render, and this is just a little bit more syntax thrown in for passing back an HTML element.
Props is what gives our components and attributes overall properties. This is how we pass in data. This is how we deal with various different attributes. As we see here in this example we have the shopping list name, we pass in a name here, and we'll be able to use this.props.name while rendering this particular component. This is an easy way to pass data in and out.
Each component has a state, and it actually manages its own state as well. This can be extracted and set in our code. As developers, we're actually responsible for updating and dealing with state. In the example below, we see here that in the beginning when we create this clock component in the constructor, we have this.state. We pass in a new date, and then we can actually output that in the render function. We can use states easily to perform common tasks like setting the state and extracting the state easily.
Each component has a specific lifecycle that we have control over. We have mounting, updating, and unmounting functions. We have a full list of different lifecycle hooks that we can subscribe too. The constructor, for example, can help us set up the initial state. Then from there we have other events that we can hook into.
The easiest way to get started with React is through create-react-app CLI. That's the official React CLI. Then we can create a new app, and that bootstraps the entire application. We simply use
create-react-app my-app. Then we go ahead and kick things off with
npm start. This command just runs through a custom npm script to kick off the app and set up a server for us, so we can start working on the app itself.
# Install create-react-app – React’s CLI
$ npm install –g create-react-app
# Create our app
$ create-react-app my-app
# Start our app
$ cd my-app
$ npm start
We covered a lot of content quickly to present a "taste" of React and we have not done more than scratch the surface. However, this should be enough to give everybody a high-level look at what we have available within React.
One final point to make, because I work on the Kendo UI team, is that no matter what framework you decide to work with, or if you decide you don’t need a framework at all, you are going to need to populate your app with UI components that present data and interact with the user. The best choice is, of course, Progress Kendo UI. The Kendo UI library includes everything from data grids and charts to buttons and gauges, and it supports all popular frameworks (for React you can take advantage of a getting started video tutorial). Kendo UI components let you focus on your core differentiation while still providing a rich user experience. You can find out more information and download a free trial version of the Kendo UI library today.
John loves technology and because he just doesn’t get enough during the day, he also writes apps for fun as a hobby. He has worked in various software development and product marketing roles at both hardware and software companies. John has a Bachelor's in Electrical Engineering (Computer Design) and is in the middle of his Master's in Computer Science. When not actually sitting in front of a monitor he enjoys playing guitar.
Subscribe to be the first to get our expert-written articles and tutorials for developers!