React is a JavaScript library that is used to build web user interfaces and components. In other words, React is used to build the front end of websites that includes web pages, their layouts, and content. A typical website has a frontend and backend. The frontend of a website that is what its users see and interact with when they load a website in their browser on desktop, laptop, or mobile devices. The backend of a website is where its data is stored and served from. The third component of a website is a communication mechanism, a API or a library that is used to access data from the backend to the frontend and store back to the database.
React, originally known as ReactJS or React.js was developed by Jordan Walke at Facebook and was initially used to develop Facebook feed in 2011. It was later used to develop Instagram in 2012. In year 2013, React was open sourced and now it is maintained by the React open source community with the help of Facebook via its website, reactjs.org.
The initial public release of React in May 2013 was open sourced under the Apache License 2.0 license but with major community backlash and feedback on Sept 26, 2017, React 16.0.0 was released under the MIT license.
React is a JavaScript library for building user interface.
React was developed by Facebook to create modern, fast, and interactive user interfaces for the Web. Today, React is the most popular JavaScript library to build web front ends. In other words, in a typical web application architecture, React is responsible for the visual user interfaces and rendering of the data to the browser only.
Some of the popular websites that are used by hundreds of millions of users per day that are developed in React includes Facebook, Instagram, Netflix, Uber, WhatsApp, Venmo, PayPal, Reddit, Salesforce, Airbnb, Dropbox, The New York Times, CNN, and Flipboard.
Why use React?
Why is React so popular? If you look at various JavaScript based front end frameworks and libraries, React separates itself by keeping it simple. React, compare to other popular JavaScript based frameworks such as Angular, React is simple to learn and write. React focuses on the user interface portion of a web application only.
React is declarative, component-based, and extensible JavaScript Library.
React is declarative
React is declarative that helps create interactive user interfaces straight forward. React is used to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.
React is simple yet powerful
ReactDOM is the DOM engine of React that makes is not only simple to write and render but also powerful. You can pretty much create HTML on the fly, pass data from JS to HTML, and render entire HTML as an element using ReactDOM.
React is component-based
Components are building blocks of react pages. A page can have multiple components. Each component can manage their own state and represent a part of a page and can have its own data source. You can easily pass rich data through your app and keep state out of the DOM.
React supportsserver-side
React can also render on the server using Node. Node (previously Node.js) has become a popular method of writing JavaScript based service side programming.
React supports mobile development
React Native is growing rapidly and becoming a primary programming language to write native mobile apps. React developers can use their existing skills to build mobile apps using React Native.
Features of React
Let us look at some of the key features of React.
Simple to learn
Simplicity is the key reason of React being popular. React focuses on building front-end user interfaces only and mix well with vanilla JavaScript, and HTML. React is easier to learn as long as you are familiar with HTML and JavaScript. React apps can be developed using most of the popular tools such as Visual Studio Code. Developers coming from other web technologies can easily adopt React.
Faster to render
Elements are the smallest unit of a React app. Think of an element as a variable that can store some value. Here is an example of a React element.
const hello = <h1>Hello React App</h1>; Elements are easy to create and they are cheap to render. Not only elements are cheap but they also provide control and flexibility on how these elements are rendered.
Unlike browser DOM that manages the rendering of a web page, rendering elements in React is managed by React DOM. ReactDOM.render() is used to render an element.
JSX
JSX is a key part of React and makes React a powerful and flexible library. JSX stands for JavaScript XML. JSX allows developers to write HTML in React. JSX makes it easier to write and add HTML in React. Here is an example
const hello = <h1>My React App</h1>; As you can see that this code, its not HTML, not a string. This is JSX syntax that allows to store HTML <h1 /> tag in a constant string, which is React. In other words, we can store plain HTML in React variables. React is a syntax extension to JavaScript. JSX produces React “elements”.
While JSX is not required to write React apps, it is recommend using it to create user interfaces. Think of JSX as a template language.
Here are some of the key properties of JSX,
JSX is like XML that is easy to understand and write.
JSX can be sought as a template language.
JSX represents objects.
JSX is an expression.
JSX prevents injection attacks.
Virtual DOM
React DOM is another key element of React apps. React DOM is responsible for checking the previous states of the elements and only updates elements are passed to the browser DOMs. That helps app rending process faster. Hence the performance of the app.
Components and states
React allows you to build encapsulated components that manage their own state, then compose them to make complex UIs. Each component renders without affecting other components and part of a page. Since component logic is written in JavaScript, you can easily pass rich data through your app and keep state out of the DOM.
Components in React are reusable and can be reused in different parts of an app. Each component has its own code, login, and state. Refreshing one component does not affect the performance of other components.
Extensibility
React plays nice with other libraries and frameworks. You can also use React in an existing Web application without changing much.
What is the current version of React?
The current version of React is 17.0. The Release Candidate of v 17.0 was announced on Aug 10, 2020. While this version does not have any new developer focused features. Here is from the release notes.
The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.
We’re actively working on the new React features, but they’re not a part of this release. The React 17 release is a key part of our strategy to roll them out without leaving anyone behind.
What is the download size of React?
One of the major concerned developers have is the library download size on the users’ browsers. While there has not been any change in the size in version 17.0, the following are the details from the previous version, 16.0.
Size of React version 16.0.
react is 5.3 kb (2.2 kb gzipped).
react-dom is 103.7 kb (32.6 kb gzipped).
react + react-dom is 109 kb (34.8 kb gzipped).
What is React Native?
React Native is a React based framework write a cross-platform native mobile apps. If you’re familiar with React and JavaScript, you will find React Native easy to learn and adopt. React Native was developed by Facebook and open source community and has become one of the primary cross-platform languages to write native iOS and Android mobile apps.
Learn more - React Native
Conclusion
React is the most popular, open-source, modern JavaScript library to build front end web interfaces. Over years, React has used to build high-performance, scalable web interfaces such as Facebook, Instagram, WhatsApp, Netflix, and Uber. In this article, you learned basics of React, its history, React features, and where you can learn React.
React developers who are involved in building back-end development can use Node to build backend sever side applications.
React developers can use their existing skills to build native mobile apps using React Native.
Source: Paper.li