React Tutorial, Part 2: Functional Components

In one of our previous materials we asked you whether it would be advisable to make a series of traditional publications on the basis of this course on React. You supported our idea. Therefore, today we present to your attention the continuation of the course. Here we talk about the functional components.




→ Part 1: Course Overview, React, ReactDOM, and JSX Reasons
→ Part 2: Functional Components
→ Part 3: Component Files, Project Structure
→ Part 4: Parent and Child Components
→ Part 5: Getting Started on a TODO Application, Basics of Styling
→ Part 6: Some of the features of the course, JSX and JavaScript
→ Part 7: Inline Styles
→ Part 8: continued work on the TODO application, familiarity with the properties of components
→ Part 9: Component Properties
→ Part 10: Workshop on working with the properties of components and styling
→ Part 11: dynamic markup generation and the map array method
→ Part 12: workshop, the third stage of work on the TODO application
→ Part 13: Class Based Components
→ Part 14: Workshop on Class Based Components, Component State
→ Part 15: workshops on working with the state of components
→ Part 16: the fourth stage of the work on the TODO application, event handling
→ Part 17: the fifth stage of working on a TODO application, modifying the state of components
')

Lesson 6: Functional Components

→ Original

In 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 ReactDOM.render() method. In our case, we are talking about a bulleted list, one that is described below.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

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 of React.

These components are called “functional” because they are created by constructing special functions.

Create a new function and give it the name MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

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.

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.

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 is what it might look like:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> } 

And although in this case everything will work as expected, that is, the return command will return all this code, it is recommended to conclude 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:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } 

With this approach, the markup returned from the component turns out to be very similar to ordinary HTML code.

Now, in the ReactDOM.render() method, 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.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") ) 

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.

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.

The markup that functional components return is subject to the same rules that we considered when applied to the first parameter of the ReactDOM.render() method. That is, it is impossible for JSX elements to be present in it, following each other. Attempting to place in the previous example after the <ul> element any other element, say - <ol> , will result in an error. You can avoid this problem, for example, by simply wrapping everything that the functional component returns in a <div> element.

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.

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.

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.

In this lesson, we sorted out the basics of functional components, and in the following we apply the knowledge gained in practice.

Session 7. Workshop. Functional components

→ Original

▍Job

1. Prepare a basic React project.
2. Create a functional component MyInfo that generates the following HTML elements:
3. Bring an instance of the MyInfo component to a web page.

▍Advanced task

Stylize page elements by learning how to do it yourself (look in Google). It should be noted that we will talk more about styling components in this course.

Note: roll block

▍Decision

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 MyInfo functional component and call the render() method of the ReactDOM object, passing it the component that needs to be output to 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:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root")) 

Now you need to return from MyInfo JSX-code that generates HTML-markup in accordance with the task. Here is the complete solution code.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Notice that the structure returned from MyInfo is enclosed in parentheses, and that the elements to be displayed are inside the auxiliary <div> element.

Results

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.

Dear readers! If you are taking this course, please tell us about the environment in which you are doing the exercises.