React Tutorial, Part 6: Some Course, JSX, and JavaScript Features

Today we publish the continuation of the training course on React. Here we will talk about some features of the course, concerning, in particular, the style of the code. Here we will talk more about the relationship between JSX and JavaScript.



→ 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
')

Session 13. About some features of the course.

→ Original

Before we continue classes, I would like to talk a little about some of the features of the code that I demonstrate in this course. You might have noticed that the code does not usually use semicolons. For example, as you can see, in examples like the following, they are not:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Perhaps you are used to putting semicolons wherever possible. Then, for example, the first two lines of the previous code snippet would look like this:

 import React from "react"; import ReactDOM from "react-dom"; 

I recently decided that I would do without them, and as a result I get the code that you see in the examples. Of course, in JavaScript there are constructions in which you cannot do without semicolons. Say, when describing a for loop, the syntax of which looks like this:

 for ([]; []; [ ]) 

But in most cases you can do without semicolons at the end of lines. And their absence in the code will not disrupt its work. In fact, the question of using semicolons in code is a matter of personal preference for the programmer.

Another feature of the code that I write is that although ES6 technically allows using arrow functions in cases where functions are declared using the function keyword, I do not use it.

For example, the code above can be rewritten as:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

But I'm not used to this. I believe that the arrow functions are extremely useful in certain cases in which the features of these functions do not interfere with the correct operation of the code. For example, when usually using anonymous functions, or when writing methods of classes. But I prefer to use traditional features. Many, when describing functional components, use the arrow functions. I agree that this approach has advantages over the use of traditional structures. However, I do not seek to impose any particular way of declaring functional components.

Lesson 14: JSX and JavaScript

→ Original

In the following classes we will talk about the built-in styles. Before turning to these topics, we need to clarify some features of the interaction between JavaScript and JSX. You already know that, using the capabilities of React, we can, from regular JavaScript code, return constructs that resemble ordinary HTML markup, but are JSX code. This happens, for example, in the code of functional components.

What if there is some variable whose value needs to be substituted into the JSX-code returned by the functional component?

Suppose we have this code:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Let's add to the functional component a pair of variables containing the user's first and last name.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

Now we want that what the functional component returns would not be a first-level heading with the text Hello world! , and a header containing the Hello Bob Ziroll! which is formed using the variables in the component.

Let's try to rewrite what the component returns, like this:

 <h1>Hello firstName + " " + lastName!</h1> 

If you look at what appears on the page after processing such a code, it turns out that it does not look the way we need it. Namely, the page will get the text Hello firstName + " " + lastName! . At the same time, if a standard project created by means of create-react-app used to run the example, we will be warned that the constants firstName and lastName assigned values ​​that are not used anywhere. However, this does not prevent the appearance on the page of the text, which is exactly what was returned by the functional component, without substitution instead of what seemed to us the names of variables, their values. Names of variables in this form, the system considers plain text.

Let us ask ourselves how to use the JavaScript features in the JSX code. In fact, it's pretty easy to do. In our case, it suffices to conclude what should be interpreted as JavaScript code, in curly braces. As a result, what the component returns will look like this:

 <h1>Hello {firstName + " " + lastName}!</h1> 

At the same time the page will get the text Hello Bob Ziroll! . You can use regular JavaScript constructs in these JSX code fragments, marked with curly brackets. Here is what the code in the browser looks like:


Page whose markup is formed by JSX and JavaScript

Since, when working with strings in modern conditions, ES6 capabilities are mainly used, we will rewrite the code with their use. Namely, we are talking about template literals that are written with back quotes ( ` ` ). Such strings may contain constructions of the form ${} . The standard behavior of patterned literals involves evaluating the expressions contained in curly braces and converting what is produced into a string. In our case, it will look like this:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Notice that the first and last names are separated by a space, which is interpreted here as an ordinary character. The result of the execution of this code will be the same as shown above. In general, the most important thing you need to understand now is that what is enclosed in braces that are in the JSX code is a regular JS.

Consider another example. Namely, we rewrite our code so that if it is called in the morning, it would output the text Good morning , if it is Good afternoon , and Good night in the evening. To begin, we will write a program that tells you what time it is. Here is the code of the App functional component that solves this problem:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

A new instance of the Date object has been created here. JSX uses JavaScript code, thanks to which we find out by calling the date.getHours() method, which is now an hour, then, calculating the remainder of dividing this number by 12 , we convert the time to a 12-hour format. Similarly, you can check the time, form the line we need. For example, it might look like this:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

There is a timeOfDay variable, and analyzing the current time using the if construct, we find out the time of day and write it into this variable. After that, we use a variable in the JSX code returned by the component.

As usual, it is recommended to experiment with what we have learned today.

Results

In this lesson, we talked about some of the features of the code style used in this course, as well as the interaction between JSX and JavaScript. Using JavaScript-code in JSX opens up great opportunities, the practical usefulness of which we will feel in the next lesson, when we will deal with the built-in styles.

Dear readers! Do you use semicolons in your JavaScript code?