React tutorial, part 10: workshop on working with component properties and styling

Today, in the tenth part of the translation of the training course on React, we suggest you complete a practical task of working with the properties of components and their styling.



→ 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

Lesson 20. Workshop. Component properties, styling

→ Original

▍Job

1. Create a new React application project.
2. Output the App component on the application page, the code of which should be in a separate file.
3. The App component should output 5 Joke components containing jokes. Print these components as you like.
4. Each Joke component must accept and process the question property, for the main part of the anecdote, and the punchLine property for its key phrase.

▍Advanced task

Some jokes consist entirely of a key phrase. For example: "It's hard to explain punishment to kleptomaniacs because they always take things literally." Consider how the Joke component can only display the punchLine property punchLine to it, if the question property is not set. Experiment with styling components.

▍Decision

Main task

The index.js file will look quite familiar:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root")) 

Here is the code for the App.js file:

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

Note that since the Joke component file is located in the same folder as the App component file, we import it with the import Joke from "./Joke" . From the App we return several elements, so the entire output needs to be wrapped in a certain tag, for example, in the <div> . We pass the question and punchLine properties to the instances of the component.

Here is the code for the Joke.js file:

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Here, when declaring the Joke function, we specify the props parameter. Recall that this name is used according to the established tradition. In fact, it can be any, but it is better to call it props .

From the component, we return several elements - so they are enclosed in a <div> . With the help of the props.question and props.punchLine we refer to the properties passed to the component instance when it is created. These properties become properties of the props object. They are enclosed in braces due to the fact that the JavaScript code used in the JSX markup needs to be in curly braces. Otherwise, the system will accept variable names as plain text. After a pair of <h3> elements, one of which displays the main text of the anecdote, and the other contains its key phrase, there is an <hr/> element describing a horizontal line. These lines will be displayed after each joke, separating them.

This is what the application project in VSCode looks like.


Application in vscode

Here is the application page.


Application page in the browser

Additional task

Recall that the main purpose of the additional task is to organize the correct conclusion of anecdotes, which consist entirely of a key phrase. This is reflected in the fact that when an instance of the Joke component is created, only the punchLine property is punchLine , and the question property is not passed. Creating an instance of such a component looks like this:

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> 

If you put this code in the upper part of the code returned by the App component, the application page will look like the following.


Incorrectly formed application page

Obviously, the problem here is that, although the question property is not passed to the component, it displays the text that precedes the main part of each anecdote, after which nothing is output.

Looking ahead, we’ll note that in future parts of the course we’ll talk about conditional rendering. With this approach to rendering, you can effectively solve problems like ours. In the meantime, we will try to use the page styling tools. Namely, we will make it so that if the question property is not passed to the component, the corresponding fragment of the JSX markup returned by it would not be displayed on the page. Here is the complete code of the Joke component, which implements one of the possible approaches to solving our problem with CSS:

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

We assign the first element <h3> style, which is defined in the process of creating a component instance based on the presence of the property props.question in the object. If this property is in the object, the element accepts the display: block style and is displayed on the page, if not - display: none and not displayed on the page. In addition, the use of this design will result in:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> 

Here, the display: none style is assigned to the element if the props object props not have a question property, otherwise the display property is not assigned anything.

Now the application page in the browser will look like below.


Proper handling by a component of a situation in which the question property is not passed to it

You may notice that all the elements formed by the Joke component look the same. We will think about how to select those of them to which only the punchLine property is punchLine . We solve this problem using the built-in styles, and the approach that we considered above. Here is the updated code for the Joke component:

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

But what looks like what is now displayed on the application page.


Styling an element that is different from others.

Now that we have worked on the Joke component, it has become more versatile and better suited for reuse.

Results

In this practical lesson, we were working on the skills of transferring properties to components. If you analyze the code of the example given here, you will notice that in order to output several similar markup blocks, you have to constantly write repetitive JSX code fragments. In the next lesson, we will talk about how to use automated JavaScript tools to automate the formation of such pages, at the same time separating the markup and data.

Dear readers! If your solution to the tasks of this workshop differs from the proposed one, we ask you to tell about it.