Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p>Here we'll be looking at an example in the lesson:</p>

2 <p>The central concept in React is the<strong>component</strong>.</p>

3 <p>Moreover, it's the only entity it contains. All other functionality works around components.</p>

4 <p>In the example above, we created a component that adds <div>Hello!</div> to the page DOM.</p>

5 <p>It is what the resulting HTML looks like:</p>

6 <h2>Imports</h2>

7 <p>CodePen imports React automatically (you must specify it in the libraries you plug in), but you can't skip imports in your code:</p>

8 <p>Observing the code and imports, you can see that you need two libraries to work with React: React itself and ReactDOM. The reason for the two dependencies is quite simple. We do not direct link to the DOM and do not use it in the browser. It is why we put DOM-specific rendering in a separate package called ReactDOM.</p>

9 <h2>Component</h2>

10 <h3>A few obvious points</h3>

11 <ol><li>A React component is a class that inherits from the React.Component class (as you'll see later, this isn't the only way to create a component)</li>

12 <li>The render function returns something the browser will render. A class component without a render function cannot exist. It is its interface</li>

13 </ol><p>We set the export default class for a reason. In JS, it's standard to create one class per file.</p>

14 <p>Unlike regular classes, React components have a JSX extension. It means that the component defined above must be in a file Hello.jsx.</p>

15 <p>The class is still named, although this isn't necessary in the case of default export. You can genuinely leave it unnamed. However, this can cause issues when using the React Dev Tools extension.</p>

16 <p>It happens because the tool will display unnamed components as <ReactComponent>, making it challenging to determine what React has rendered.</p>

17 <p>Therefore, it's best practice to give names to your components to make them easily identifiable in the extension.</p>

18 <h3>A few less obvious points</h3>

19 <p>The most striking thing happens in this line:</p>

20 <p>Common sense dictates that such notation is syntactically impossible in JavaScript, and that's not wrong.</p>

21 <p>Here you see the code is<strong>JSX</strong>. It is an extension of the JavaScript language added to the code via Babel. As you continue working with the React framework, you'll appreciate the benefits of using JSX.</p>

22 <p>The main thing to remember is that any React component eventually returns a piece of the DOM (actually a virtual DOM). By the way, div is also a React component, only built-in.</p>

23 <p>It's easy to distinguish between built-in components and self-written ones:</p>

24 <ul><li>Built-in components always start with a small letter</li>

25 <li>Self-written components start with a capital letter</li>

26 </ul><p>It's a good practice to give the .jsx extension to all files containing JSX, regardless of whether a component is created in that file.</p>

27 <h2>Mount</h2>

28 <p>A created component (component class) by itself does nothing. To enjoy the result of its work, you need to do something called mounting. It's telling React where to put it in the DOM.</p>

29 <p>This task requires a DOM node. Any node within the body may be suitable. Usually, if you don't have a SPA, React is used in widgets plugged into the page in different places. There can be several widgets on one page at once. For example, on Hexlet, all the front-end elements are just widgets. An application container is created based on the node with a string:</p>

30 <p>Next, we mount the component in the container:</p>

31 <p>We pass the component as a parameter in JSX syntax.</p>

32 <h2>JSX</h2>

33 <p>JSX is an XML-like markup extension for JavaScript designed specifically for React tasks. React comes out of the box with components that completely replicate HTML. For the most part, the syntax and structure of JSX and HTML are the same, but there are some differences:</p>

34 <ol><li>Since its syntax is similar to XML, single tags in JSX must be closed: <hr /></li>

35 <li>Instead of the class attribute in JSX, we use the property name in the DOM: className</li>

36 </ol><p>There are other differences, which we'll look at in future lessons. Most of these differences make working with the DOM inside React easier and more convenient.</p>

37 <p>Just as in HTML, you can build compositions out of components, like this one:</p>

38 <p>And this is all valid JS code with the JSX extension plugged in.</p>

39 <p>The fact that every React component returns a piece of the DOM is a consequence of its fundamental idea and architecture. We will discuss this idea in more detail in a future lesson, and you'll most surely get the hang of it. But why do we need to introduce JSX?</p>

40 <p>We should notice that JSX is an extension of the language, meaning it's code, not html. Since JSX translates into code, you can write that code right away. Right? True, but not quite:</p>

41 <p>The example code above is just what the render component functions would look like on React. However, this example is very trivial and contains no logic. If you had conditional constructs, this code would exceed all reasonable limits on the complexity of analysis. Assembling tree structures in code is a ruthless task. Now it should be a little clearer why JSX is needed, and that JSX is not a layout (as some people think).</p>

42 <p>One last thing. Since any JSX ends up being transformed into React.createElement calls, you need to check that React is imported: import React from 'react'.</p>