- Why is the React library needed?
- Acquaintance for beginners: basic concepts
- Hello World!
- Fundamentals of the JSX system language
- What is JSX?
- Formation of expressions in the system language
- Detail rendering
- Components and props
- Varieties of components: functional and class
- State and life cycle
- Event analysis
- Conditional rendering of elements
- Changing Components
- Lists and Keys
- Managed Items
- The rise of the state
- Why is it so necessary to control the rise of the state?
- Composition vs Inheritance
- React.js Principles
- Functionality of the React.js library
- Practical use
- GitHub and React.js
- Поделиться ссылкой:
React.JS is a library of the popular
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?
- a convenient and practical system of constituent elements is built in here – repetitive parts of the code that are used at various 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 allows you to significantly save 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
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
What is JSX?
Formation of expressions in the system language
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.
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
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 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:
- 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.
- State updates may not be synchronous.
- 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 particular state or not is an internal development of that part, which can change over time. It is also interesting that in the work you can combine components with and without state.
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:
- Using the System Extended Programming Language, the developer passes a subroutine as an event handler instead of a string.
Conditional rendering of elements
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:
- Drawing multiple elements . The user can form a set of elements and embed it in the system programming language using curly braces.
- Elementary list of elements . Often, users and developers adjust lists directly within a component part.
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.
In a standardized markup language, forms such as input , select , textarea tend to self-manage their 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 previously written code 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
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
- 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.
- 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.
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.
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.
Note! Don’t forget to read the manuals. At least take a glance – 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.
- 2 Why is the React library needed?
- 3 Acquaintance for beginners: basic concepts
- 4 Fundamentals of the JSX system language
- 4.1 What is JSX?
- 4.2 Formation of expressions in the system language
- 4.3 Detail rendering
- 4.4 Components and props
- 4.5 State and life cycle
- 4.6 Event analysis
- 4.7 Conditional rendering of elements
- 4.8 Lists and Keys
- 4.9 Forms
- 4.10 Managed Items
- 4.11 The rise of the state
- 4.12 Composition vs Inheritance
- 5 React.js Principles
- 6 Functionality of the React.js library
- 7 Practical use
- 8 GitHub and React.js
- 9 Documentation