React Training Course, Part 2: Functional Components

 3r33411. 3r3-31. In one of our previous r3r32. materials 3r33399. we asked you a question about whether it is advisable to do on the basis of of this course on React a series of traditional publications. You supported our idea. Therefore, today we present to your attention the continuation of the course. Here we talk about the functional components. 3r33393.  3r33411. 3r33393.  3r33411. 3r311. 3r33399. 3r33393.  3r33411.
3r33399. 3r33393.  3r33411.


Lesson 6: Functional Components

3r33393.  3r33411. →
Original
3r33393.  3r33411. 3r33393.  3r33411. At the previous practical lesson, we talked about the fact that it is not necessary to place all the JSX code that forms HTML elements in the argument of the method 3r33372. ReactDOM.render () . In our case, we are talking about a bulleted list, one that is described below. 3r33393.  3r33411. 3r33393.  3r33411.
3r33333. import React from "react"
import ReactDOM from "react-dom"
3r33411. ReactDOM.render. 3r33333. 3r33393.  3r33411. Imagine that you need to output, using the same approach, a whole web page with hundreds of elements. If you do this, then normally it will be almost impossible to maintain such code. When we talked about the reasons for the popularity of React, one of them was the support of this library of components suitable for reuse. Now we will talk about how to create functional components React. 3r33393.  3r33411. 3r33393.  3r33411. These components are called “functional” because they are created by constructing special functions. 3r33393.  3r33411. 3r33393.  3r33411. Create a new function and give it the name MyApp :
 3r33411. 3r33393.  3r33411.
  3r33333. import React from "react"
import ReactDOM from "react-dom"
3r33411. function MyApp () {
3r33411.
3r33411. ReactDOM.render. 3r33333. 3r33393.  3r33411. The name of the function is made exactly for the reason that it uses the naming scheme of function constructors. Their names (in fact, the names of the components) are written in camel style — the first letters of the words they are made of are capitalized, including the first letter of the first word. You should strictly adhere to this naming convention for such functions. 3r33393.  3r33411. 3r33393.  3r33411. The functional components are fairly simple. Namely, there should be a command in the function body that returns the JSX code that represents the corresponding component. 3r33393.  3r33411. 3r33393.  3r33411. In our example, it is enough to take the code of the bulleted list and arrange the return of this code from the functional component. Here's how it might look:
 3r33411. 3r33393.  3r33411.
  3r33333. function MyApp () {
return
  • 3r33411. 3r33352. 1 3r33411. 3r33352. 2 3r33411. 3r33352. 3 3r33411. 3r33333. 3r33411.} 3r33333. 3r33393.  3r33411. And although in this case everything will work as expected, that is, the command
return returns all this code, it is recommended to enclose similar constructions in parentheses and apply another agreement adopted in React when formatting the program code. It lies in the fact that the individual elements are placed on separate lines and aligned accordingly. As a result of applying the above ideas, the code of our functional component will look like this:
 3r33411. 3r33393.  3r33411.
  3r33333. function MyApp () {
return (
3rr3344.
1 3r33411. 2 3r3r113} 3r33333. 3r33393.  3r33411. With this approach, the markup returned from the component turns out to be very similar to ordinary HTML code. 3r33393.  3r33411. 3r33393.  3r33411. Now, in method ReactDOM.render () , you can create an instance of our functional component by passing it to this method as the first argument and wrapping it in a JSX tag. 3r33393.  3r33411. 3r33393.  3r33411.
  3r33333. import React from "react"
import ReactDOM from "react-dom"
3r33411. function MyApp () {
return (
3rr3344.
1 3r33411. 2 3r3r113
3r33411. ReactDOM.render (
,
Document.getElementById ("root")
) 3r33333. 3r33393.  3r33411. You may notice that a self-closing tag is used here. In some cases, when it is necessary to create components that have a more complex structure, such constructions are constructed differently, but for the time being we will use such self-closing tags. 3r33393.  3r33411. 3r33393.  3r33411. If you update the page formed by the above code, then its appearance will be the same as it was before moving the marked list to the functional component. 3r33393.  3r33411. 3r33393.  3r33411. The markup that functional components return is subject to the same rules that we considered when applied to the first parameter of the method. ReactDOM.render () . That is - it is impossible for JSX elements to be present in it, following each other. Attempt to place in the previous example after item any other element, say , will lead to an error. To avoid this problem, you can, for example, simply by wrapping everything that returns a functional component in the element 3r33333. . 3r33393.  3r33411. 3r33393.  3r33411. Perhaps you have already begun to feel the power of using functional components. In particular, we are talking about creating your own components that contain fragments of JSX code, which is a description of the HTML markup that will appear on the web page. Such components can be linked together. 3r33393.  3r33411. 3r33393.  3r33411. In our example, there is a component that displays a simple HTML list, but as we create more and more complex applications, we will develop components that derive the other components we have created. As a result, all this will turn into ordinary HTML elements, but sometimes it will be necessary to form dozens of your own components to form these elements. 3r33393.  3r33411. 3r33393.  3r33411. As a result, when we will create more and more components, we will place them in separate files, but for now it is important for you to master what we have just discussed, to get used to the functional components. During the course, you will create more and more complex file structures. 3r33393.  3r33411. 3r33393.  3r33411. In this lesson, we sorted out the basics of functional components, and in the following we apply the knowledge gained in practice. 3r33393.  3r33411. 3r33393.  3r33411.

Session 7. Workshop. Functional components

3r33393.  3r33411. → Original 3r33393.  3r33411. 3r33393.  3r33411.

▍Job

3r33393.  3r33411.
  1.  3r33411. 3r33352. Prepare a basic React project.  3r33411. 3r33352. Create a functional component
MyInfo Forming the following HTML elements:  3r33411. 3r33352. Output an instance of the component MyInfo to a web page.  3r33411. 3r33393.  3r33411.

Additional task

3r33393.  3r33411. Stylize page elements by learning how to do it yourself (look in Google). It should be noted that in this course we will talk about styling components. 3r33393.  3r33411. 3r33393.  3r33411. Note: roll block
 3r33411. 3r33393.  3r33411.

▍Decision

3r33393.  3r33411. Here we are satisfied with the same HTML page that we used earlier. A file with React-code will also look quite standard. Namely, we import libraries into it, create a skeleton of the functional component 3r-3372. MyInfo and call the method. render () object ReactDOM By passing it a component that should be displayed on the page, and a link to the page element in which this component should be displayed. At this stage, the code will look like this:
 3r33411. 3r33393.  3r33411.
  3r33333. import React from "react"
import ReactDOM from "react-dom"
3r33411. function MyInfo () {
3r33411.
3r33411. ReactDOM.render ( , Document.getElementById ("root")) 3r33333. 3r33393.  3r33411. Now you need to return from MyInfo JSX code that generates HTML markup according to the task. Here is the complete solution code. 3r33393.  3r33411. 3r33393.  3r33411.
  3r33333. import React from "react"
import ReactDOM from "react-dom"
3r33411. function MyInfo () {
return (3r334411. 3r3333373.
3. 3r33383. Bor Ziroll 3r3333339. 3 r???. 3 Cases. Nordic Countries 3-???-33411. 3r33555. 3-33411. 3r3407. 3-333411.) 3-33411.
3r33411. ReactDOM.render (
,
Document.getElementById ("root")
) 3r33333. 3r33393.  3r33411. Notice that the design returned from MyInfo , is enclosed in parentheses, and the fact that the elements that need to be displayed are inside the auxiliary element 3r33333. . 3r33393.  3r33411. 3r33393.  3r33411.


Results

3r33393.  3r33411. In this article we met with the functional components of React. Next time we will talk about the component files and the structure of React projects. 3r33393.  3r33411. 3r33393.  3r33411. 3r33333. Dear readers! 3r33333. If you are taking this course, please tell us about the environment in which you are doing the exercises. 3r33393.  3r33411. 3r33393.  3r33411. 3r33395.
React Training Course, Part 2: Functional Components 3r3407. 3r33399. 3r3407. 3r33411. 3r33411. 3r33411. 3r3404. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r3405. 3r33411. 3r3407. 3r33411. 3r33411. 3r33411. 3r33411.
+ 0 -

Add comment