Learning React
- Part 1: Installing and Configuring
- Part 2: Understanding Render()
- Part 3: Building Classes
- Part 4: React JSX
React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality.
Understanding Render()
In the last part of this series, the following code was added at the end of the “index.js” file:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);The render() function as part of ReactDOM object is central to how React works when used to create HTML content. It “renders” all of the code passed to it.
Renders?
The two arguments passed to the RectDOM object in this example are (1) the HTML content and (2) where it should put this content. (By default, the root will be an element with the id of ‘root’.)
The HTML code passed to the render() function may seem strange, as it was not enclosed in strings or otherwise escaped somehow. This is one of the most powerful parts of how React works: HTML can be used directly in the JavaScript code!
By passing it to the render() function, it is “rendered” into code that the underlining system understands and passed off to be processed. In the example, the simple use of a single tag is not overly complex, but it demonstrates the basis of how React works: everything is “rendered” into HTML by its code.
All Components Render()
When working with React, individual parts are called components. Think of them as sections of the interface.
Every component has the same function as the ReactDOM object: render().
With this in mind, it becomes easier to see how to use components. Because all components also render content, they can also use HTML in their code. Different parts of an interface could be broken up into sections (components) and then combined together. And each would have access to the same ability to render its contents!
Inheriting from React.Component
To use the React.Component class, the keyword extends can be used to “extend” a base object into an existing one as part of JavaScript ES6.
class Example extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
);
}
}Writing a new class Example, then, means using the extends keyword and having its parent be the React.Component class. This makes a new object a React component!
As mentioned before, all components render().
Thus, adding a render() function to the class allows it to render its own content. Add in a return statement helps it to pass HTML code. Like with the ReactDOM.render() function, it returns code that is ultimately rendered.
Using React.Component Classes with ReactDOM
React understands JavaScript classes a little differently than normal. In order to have them rendered as part of the normal ReactDOM.render() function, they must be included as if they too were HTML.
An existing Example class that extends the React.Component object, then, becomes the following:
<Example />Notice that it has an ending slash, /. This signals, like with HTML, that the tag is self-closing.
Putting It All Together
The following code makes a new class called Example that inherits from React.Component and has its own render() function. This new class is included as part of the ReactDOM.render() process by using it as if it was a HTML tag.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Example extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById('root')
);
While the final result did not change, the code that produced it did. Now, a class based on a React Component is passing off its rendering to the ReactDOM.render() function.
Digital Ephemera 