React.JS for beginner dummies, using the library when writing trading robots

What is React JS for beginner dummies, what is it, tutorials, installation, documentation – how to install and use the React JS library when writing trading robots. Often in job advertisements for computer specialists, you can find a requirement that says that you have skills in the JavaScript library. Yes, and they expect knowledge of React not only from software developers, but also from programmers who are engaged in the internal development of the site, and not external design. What kind of library is this, what opportunities does it give in work, and where does a beginner start getting acquainted? Let’s figure it out in this article.

JavaScript library – React: what is it

React.JS is a library of the popular
JavaScript programming language , formed by the online social network Facebook in order to improve and simplify the process of developing the external shell of sites and applications – the interface with which the user interacts. The main feature of the library is components and states. A component is a part of a digital set that is responsible for the appearance of a certain part of the system being designed.

Note! Such component parts can be nested.

A state is a collection of all data about the details of an interface, including its representational rendering. Using examples, we will find out in more detail and clearly what is what. The image below shows some of the big components – posting to an online social network, a section with general information and showing photos. Each part includes smaller components, which are the components. For example, a publication contains text, photographs, the name of the user who publishes the information, etc. The image section includes individual pictures, and the general information section contains brief information.
Each of these components (components) have a state. That is, the section with general information will look different on different devices, the “like” element changes color when pressed and the number responsible for the total number of likes; the publication, in turn, may shorten the text or transmit it in full.

Thus, the flexibility of React.JS is expressed – the interface component is written once, and after that it is given all possible states.

Why is the React library needed?

React.JS is one of the possible options to write JS or HTML code in a convenient format, form copies of it and make it visual. The components here are written in a special system language – JSX, which includes elements of the JavaScript programming language and the standardized HTML markup language.
Code written in JSX is quite specific. It is also important that the web browser does not have to understand this system language – the React.JS code is transferred to JS, which any browser perceives without problems. To do this, what is created in the library is passed through specialized compilers (one of the more popular today is Babel js), which convert codes in lesser-known programming languages ​​into JavaScript representations.
At first it may seem that the system of use is extremely illogical, but after a while you get used to it and you realize why the mechanism is designed that way. The JavaScript library has a number of strong advantages:

• the system programming language is easier to recognize than the well-known JavaScript, and consequently, it will take several times less time to support the code and eliminate errors on it (the speed of writing new codes and programs will increase accordingly);
• a convenient and practical system of constituent elements is built in here – repeating parts of the code that are used at different stages of writing and in different programs, and also change depending on the context;
• each constituent element is subordinate only to its state , therefore it is easier to correct shortcomings in the code if an error is suddenly found in its work in practice; incorrect moments float to the surface: an element that functions properly will continue to work stably in this mode, unless, of course, the wrong state is used in relation to it.

Thus, we can conclude that the React.JS library can save a lot of time, make the code more specific, organize the sequence in the correct order, and use large blocks again. These advantages make it possible to reduce the cost of the process of creating user interfaces, as well as speed up the time of this very process. Having the skills to use the JS and HTML programming language, learning to use the system JSX is easy – just a few days to master it.

Note! It is rational to use the library when working with large projects, when it is necessary to write a large number of dynamic pages. A small business site does not need such complexities.

React JS fundamental course from A to Z: https://youtu.be/GNrdg3PzpJQ

Acquaintance for beginners: basic concepts

Hello World!

When accessing the first page of the library, the user will see a welcome heading as a small example – “Hello world!”.

Fundamentals of the JSX system language

JSX is a system programming language, an extension of the well-known JavaScript. It includes a combination of two languages ​​- JA programming and the standardized HTML markup language. Developers use it to adjust the concept to show React exactly how the user interface should look like. JSX creates the “parts” of the library.

What is JSX?

The React library adheres to the logic that the essence of rendering is directly related to the logic of the user interface: how events are processed, how state changes in a certain period, and how information is prepared for presentation. The JS library can be used without its system language, but a large number of developers find it valuable due to its clarity and concreteness when working with a user interface generated from JavaScript code. In addition, the extension makes it easier for React to generate invalid moment and error notifications.

Formation of expressions in the system language

JSX allows you to use any well-written JavaScript expressions inside curly braces in a process.

JSX is also an expression Once the source code is bytecoded, any JSX expression turns into a standard JS function call that targets the JavaScript category. From this it can be understood that the system extension of the official programming language can be used inside the if manual and for periods.

JSX is Objects The objects represented by the extension are called React elements. They clarify the result that the developer wants to see on the display. The library recognizes these objects and uses them in the process of generating and maintaining the Document Object Model.

Detail rendering

Details are the many little building blocks that make up React programs.
Details are the picture that the developer wants to see in the end on the monitor. Compared to Document Object Model elements, library elements are simple and do not take up a lot of resources. Elements are the constituents of components.

Components and props

Components make it possible to divide the UI into independent parts, which are easier to work on separately. They can be combined and used multiple times. For the most part, the functionality of the components is similar to the functionality of the JavaScript programming language itself. They take input information, which is called props, and return React elements that indicate the development model that the developer wants to see on the monitor.

Varieties of components: functional and class

It’s easiest to refer to a library component as a function.
Components can also be represented in ES6 class format.

Interesting! The React library defines these two kinds of components as similar.

props

Props are immutable objects that are read-only. Therefore, a component should not write anything to its props, no matter what kind it belongs to.

State and life cycle

First, let’s figure out how to properly apply the state at work. There are three important things to know about component state:

1. Don’t change the state directly, use the setState method. Remember that the only area where you can change the state directly is the constructor.
2. State updates may not be synchronous.
3. The flow of information has one direction. In component construction, none of them knows if the state is assigned to another component. It does not matter how this or that independent functional element was formed – using a functional or classification tool. This is called “downstream” data flow. A state is always defined for some element, and structural associations of this state can only affect parts that are located “below” in the hierarchical order.

Typically, the state is referred to as “local”, “internal”, or hidden. It is only visible to the functional element itself and invisible to other parts of React. In library programs, whether an independent functional element is endowed with a certain state or not is an internal development of this part, which can change over time. It is also interesting that in the work you can combine components with and without state.

Event analysis

The process of parsing events in React components is similar to handling events in document object model elements. However, there are several features that distinguish them from each other:

1. Events in the JavaScript library are named in a different style than the standard one.
2. Using the System Extended Programming Language, the developer passes a subroutine as an event handler instead of a string.

Conditional rendering of elements

The JavaScript library makes it possible to break the logic of developing elements into independent components. They can be displayed for general display or hidden, depending on what state they are endowed with at the moment. Conditional rendering of elements works on the same principle as conditional expressions based on the JavaScript programming language. Sometimes it happens that the library requires an explanation of how the state affects the hiding or rendering of some elements. Here it is more logical to use a conditional JS helper or expressions similar to if.

Changing Components

React library elements can be added to variables. This is a practical solution when some condition indicates whether some part of the component should be drawn, or it does not make sense, while the rest of the part remains unchanged.

Lists and Keys

This section includes several components:

1. Drawing multiple elements . The user can form a set of elements and embed it in the system programming language using curly braces.
2. Elementary list of elements . Often, users and developers adjust lists directly within a component part.

Keys

A key in the React JavaScript library denotes a specialized tool that must be entered when generating a list of components. Keys help the JavaScript library to identify which items have been adjusted, added, or removed. It is important to mark them so that React can correlate the components of the structural data after a certain amount of time has passed.

Forms

In the JS library, standardized markup language elements work a little differently than components of the document object model, because form elements initially have a hidden state.

Managed Items

In a standardized markup language, forms like input , select , textarea tend to maintain their own state and update it when the developer enters new information. React.js state always defines the value of input fields in a managed composing element. Although this indicates that the user must write a little more than the original given code, it is now possible to pass this value to other parts of the user interface.

The rise of the state

State lifting is a standardized template that every developer should be aware of and be able to apply in the process of work. Using it will eliminate complex and usually useless state management patterns.

Why is it so necessary to control the rise of the state?

Raising the state to the level of the past components for those parts that require it is necessary so that all elements can participate in the state. A stable level of state will make it easier to distribute it among all the components that rely on it.

Composition vs Inheritance

React.js includes a strong composition model, so it’s recommended to use the process of building a whole from parts instead of inheritance to reuse code written earlier between elements. Thus, props and the ability to create a single whole composition from component parts, provide the developer with the flexibility needed to create the shell and behavior of the element in a specific and safe way.

Reminder! Component parts can take unrelated props, including elementary parts that make up libraries or functions.

In the event that you need to use a look-free function for working with components a second or third time, pull it out into a separate JS module. Move it into a component and use the generated function without further expansion. React or Vue or Angular, what to choose: https://youtu.be/Nm8GpLCAgwk

React.js Principles

The entire philosophy of the JavaScript library is hidden in the React guide. It seems that this is long and not of such great importance, however, many users claim that after reading everything fell into place. The documentation is quite old, but still of great value and relevance –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Functionality of the React.js library

Using the JavaScript library, the user gets the opportunity to pay all his attention directly to the UI development process and the components of the application, least of all being distracted by the formation and possible shortcomings of the written code. The library allows you to develop programs faster, makes it easier to configure and edit the components and the process of the entire project as a whole. Thus, React.js contains elements responsible for communication in the global network, UI, program state control and the ability to solve other complex issues. The library also has the following functional features:

1. Practicality . React.js is available in minified format. This compact package does not need to be clearly configured. It already includes a code splitting feature that reduces the time it takes to open the browser version of the site, since this option prevents components from rendering at the same time.
2. Pumped ecosystem and compliance . A large number of tools are available in the library, supported by other sites, which allows the user to develop new complex programs for any purpose.
3. Full functionality . The main advantage of the JavaScript library is that all new versions of the platform meet the requirements of the old ones, so you can use both the old and the updated version, all of them are supported and are relevant to this day. Previously released versions do not become obsolete after the latest updates.

Practical use

On the main page of the library, in the instructions for users, there are several illustrative examples of using React in practice. You can manually correct them and try to run them. Even if you are a new user and do not understand the essence and logic of the library, adjust the code to your liking and see the result.

Practical application of React when writing trading robots in JavaScript

It is important to realize that a developer does not program JS, but writes scripts (scripts). therefore, using the library, a developer can write code for a subsequent trading robot used for trading purposes, and also continue to design its appearance based on this platform. In fact, a trading robot for trading is also an application, of which a large number are being developed using React.js. However, some functions and the internal part of the bot will still have to be done on other sites that provide tools suitable for this.

GitHub and React.js

GitHub is a platform that hosts all versions of projects. The user connects hosting, goes through the registration procedure on the official GitHub website, and then creates an online repository where he transfers all files from Git.
Git is the most popular and relevant project version control service today, and GitHub is a remote code repository.

Reference! Only those users who have received the appropriate link with permission have access to editing and downloading files.

Documentation

All tutorials and up-to-date materials regarding the JavaScript library are up to date with the latest update. Developers also compile and post for general reading old versions of the documentation, posted on a separate page of the library. Therefore, it will be easier for beginners to master the skills of site management: both old and new material – everything is here, access is free for everyone.

Note! Don’t forget to read the manuals. At least take a look – already most of what seemed incomprehensible will fall into place.

The React library is a popular and relevant platform today. Its versatility allows developers to make projects of better quality and in less time. In addition, knowing the platform and having the skills to use it makes a specialist more in demand in the labor market.