What Is React?

React is a JavaScript library for building Web user interfaces. A typical website has a backend and a front end. The front-end is what the user interacts with in his/her browser, also called web pages, or web interface. The back end is what interacts with a data source and gets data. The back end can also have business logic and services.

React or ReactJS was developed at Facebook by Jordan Walke. Now, it is an open-source project available on GitHub and managed by both Facebook and its source community combined.

React is free and open source. That means anyone can download and use it to build applications! Anyone can be a part of the open source project and contribute to the project. The latest version of React is 16.0.0 and was released under the MIT license.

In essence, React is a JavaScript library for building user interfaces.

React is a JavaScript library for building user interfaces.

Some of the most popular websites that are used by hundreds of millions of users per day use React including Facebook, Instagram, Netflix, Uber, WhatsApp, Venmo, PayPal, Reddit, Salesforce, Airbnb, Dropbox, The New York Times, CNN, and Flipboard.

React is easy to learn, declarative, component-based, and an extensible JavaScript library that makes it easy to use in new applications as well as in existing Web applications. React plays nice with other JavaScript libraries and frameworks.

Key Features of React

Here are the key features of React.

React is easy to learn. Simplicity is the key reason React is popular. React focuses on building front-end user interfaces only and mixes 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.

React is 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 which manages the rendering of a web page, rendering elements in React is managed by React DOM. ReactDOM.render() is used to render an element.

React has a powerful feature, 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 recommended using it to create user interfaces. Think of JSX as a template language.

Here are 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 updated 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 parts of a page. Since component logic is written in JavaScript, you can easily pass rich data through your app and keep the 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.

React is extensive. React plays nice with other libraries and frameworks. You can also use React in an existing Web application without changing much.

Why React?

React separates itself by keeping it simple, easy to learn and implement in new and existing web applications. As defined officially, 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 its 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 the state out of the DOM.

React supports server-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.

Create a React app

Let’s create a simple React one-page application.

For this example, it is assumed you have Node.js installed. If it’s not installed on your machine, take a second to install it before moving on.

Install create-react-app

Open a terminal (e.g. CMD, Git Bash, PowerShell, etc) and type

npm install -g create-react-app

This will install the create-react-app tool globally into your machine, which will allow you to use it from any directory. The syntax for this command is as follows:

create-react-app <project name>

Now we’re ready to create our first React project.

Generating the project

Navigate to the folder you want the project generated in, and open a terminal. Type:

create-react-app test-app

Once the operation completes, you should have a new sub-folder called test-app with the generated React project structure.

Running the project

To run this new project, open a terminal inside the test-app folder and type

npm start

You should see your React app open in a new browser tab. It might look something like this:

Creating a custom component

So far we’ve learned that in React, we use components to build out the user interface. A page or a view in React is typically composed of many smaller self-contained components that can be reused.

So let’s begin to create our own component.

In this example, we’ll make a Percentage Slider component. It’s a basic slider with a range between 0 and 100, and will also show a label with the current percentage.

First, in your /src directory, create a new folder called “Components.”

In this new Components folder, create a file called PercentageSlider.js

In react, a component can be made by defining a simple method like so,

What are props?

props refer to the properties that are passed into your component. Take for example the following HTML,

If the input was our component, then the props argument would be an object that contains type and value.

Component state

In our component, we’ll need to keep track of some state, because we’ll be using a label that displays the current value dynamically.

This may be confusing at first, but it’s actually quite simple! The useState function in React accepts some variables, and returns

1. The variable itself
2. A function you can use to change the value of that variable.

We are using the destructuring syntax to receive two results from a function. In order for React to re-render your component with updated values, it needs to know when values have changed. That’s what setValue is for.

Note To use the useState function, you need to add an import to the top of your file:

Writing the JSX
We will begin to return the JSX template from our method to create this component like so,

Inside this <div> we can add our label to show the current percentage,

In JSX syntax, JavaScript code is evaluated from inside curly braces { }

Note This value || 0 code is a nice trick we can do in JavaScript to give a default value by saying, “If this value is null or undefined, pick 0 instead!”

Now we can add our slider control to the component just below the label,

Using a react custom component

Now that we have our component, we can use it anywhere in another component or view.

1. Import the component,

2. Add the component like any other HTML control,

For now, open App.js and place the PercentageSlider component there. Then open a terminal in the same directory as the package.json file, and type

npm start

You should see this page with your new control!

If you’ll notice, however, there’s one problem. If you try to use the slider, it doesn’t do anything. This is because we haven’t utilized the onChange property of the slider.

Note In React, properties are in camelCasing, so HTML’s onchange becomes onChange, and so on.

All we need to do is utilize our component’s setValue() function from earlier to update the value. Add the following code to your component’s <input>

Here we’re passing an anonymous function directly to the onChange property, and in that function, we’re updating the state of our component with the new value, which is found in changeEvent.target.value

After updating the state of the component, we’re checking to see if an onChange method has been supplied by the consumer of our component. If so, invoke it with the new value as an argument. This allows us to do something like this,

Finally, save all your files and go back to the page – It should auto-refresh and now you’ll notice the component works as intended!

Summary

React is the most popular, open-source, modern JavaScript library to build front websites. React developer demand is growing and a majority of large companies are using React to build their websites. In this tutorial, we learn what is React and its features. We also learned how to create a React app, start a React app, and run a React app.