Do you want to learn about React, but you still don’t get the chance to learn It? Or maybe you’ve already tried to master React, but couldn’t really understand it? Or maybe you have figured out the basics, but you want to put your knowledge in order? This article is written specifically for those who have answered at least one of these questions positively. Today we will create a simple music player, revealing the basic concepts of React as we move towards the goal.

React is a tool for creating user interfaces. Its main task is to ensure that what can be seen on web pages is displayed on the screen. React makes it much easier to create interfaces by splitting each page into small fragments. We call these fragments components.

A React component is simply a piece of code that represents a part of a web page. Each component is a JavaScript function that returns a piece of code that represents a page fragment.

To create a page, we call these functions in a certain order, collect the results of calls together, and show them to the user.

React is designed around the concept of reusable components. You define small components, and combine them to form larger components.

All components, small or large, can be reused, even in different projects.

There are many things that can be done on React js — both large projects with a complex structure, and something modest. It is often used for writing startup projects, as it is easier to achieve payback with this tool than with Angular.

Notable projects on React:

Facebook. It uses React partially, but also in the PC version and in the mobile app.

Instagram: In such a popular application, the react has a huge role to play. Starting with the ability to determine the location and ending with the accuracy of the search functionality-such things are often done on React.

Netflix: It is most actively used on the Gibbon platform. The main feature is the ability to configure settings for TVs with low performance. The library helps speed up loading and improve performance — that’s where programmers knew exactly what React js was for.

Yahoo! Mail: Thanks to Facebook, these services have become streamlined in terms of architecture. It took a lot of updates to get the desired result: easy debugging, low entry level, independently deployable components. React suited them because of a number of its properties: a one-way data flow, the ability to use a virtual DOM, and an active community.

WhatsApp: Specialists of this service decided to use React to create user interfaces.

Dropbox: In the Wake of the popularity of the library, it began to be used for this site.

There is also the React Native. The name may seem like it’s the same tool, but it’s not. What you need React Native for-to create mobile applications that are created for both popular platforms (iOS and Android) at the same time. Both versions of the app will follow the guidelines of Apple and Google, while development is faster and involves the same development team. Therefore, the development of applications on React Native allows you to achieve maximum results in the shortest possible time.

The second argument for ReactDOM. render is the DOM element that React is going to capture and control. In jsComplete REPL, you can simply use the special mountnode variable for this purpose.

In fact, try calling the React component simply “button”. ReactDOM ignores the function and displays a normal empty HTML button.

Each component gets a list of attributes, as well as HTML elements. In React, this list is called props. With a functional component, you can name this list as you like.

The render function accepts something that looks like HTML, but is placed in JavaScript. It’s not JavaScript or HTML, and it’s not even React.js.

React-select — HTML <select> tag is difficult to style with CSS so react-select comes with help. It is flexible select component.