• HOMEBLOG React JS: Newbies Tutorial
  • The Nuggets translation Project
  • Translator: markzhai
  • Proofread by: JasinYip, Malcolm Myu, Yang Yang Yang

As you can guess from the title, this article is intended for readers with little programming experience. For example, someone like me: Because I’ve only been exploring the world of programming for six months now. So, this will be a beginner’s village tutorial! All you need is an understanding of HTML and CSS and a basic knowledge of JavaScript (JS) to follow this article.

Note: In the following examples, we will take advantage of the new capabilities provided by ES6 to simplify the process of writing JS code. However, you can also write React entirely using ES5.

The expected reading time is 9 minutes

What is React?

React is a JS library, founded by Facebook and sets (Facebook. Making. IO/React /). It allows us to create Single Page Applications (SPA) by breaking up Applications into dynamic, reusable components.

A React Component is a JS class that inherits the Component provided by React. A component represents and defines a piece of HTML code and any behavior associated with that piece of code, such as a click event. Components are like Lego blocks that can be used to build complex applications. Components that are made up entirely of JS code can be isolated and reused. The basic method is render(), which simply returns a piece of HTML code.

This syntax for defining React components is called JSX. This syntax was developed by the React creators to simplify intra-component interactions in JS-HTML code. Code written using this syntax must be compiled before it can become actual JS code.

Create a component

To create our component and render it as a page of HTML, we first need to define a div with a unique ID in our HTML file. Next, we’ll write code in the JSX file to connect the React component to a div with its ID, as shown in the following example. Doing so will instruct the browser to render the component on the page where the relevant DOM tag is located.

See the Pen Start by Makhenzi (@makhenzi) on CodePen.

HTML tag attributes in JSX are almost the same as those in normal HTML; The only difference is that “class” becomes “className” in JSX. Html-like syntax is closed with parentheses, while blocks containing JS are closed with Angle brackets. As you will see. Render () always returns a div, from which developers are free to introduce as many tags and elements as they see fit.

Example: The extinction of pirates

If we choose React to create this image, we can visualize the dates on the screen and display the temperature and pirate count only when those dates are clicked.

To do this we need two components: the first renders dates and links each date to a given number of pirates and temperature; The second needs to be used to receive information corresponding to the click events on the date, such as the number of pirates and the temperature at the time, and then render the selected elements based on this data.

The former acts as a “father” and contains links to subsequent “child” components, while the latter are closely dependent on their “father.”

The React structure, known as the virtual DOM, allows you to update only components when their content changes without having to refresh the entire page. To do this, the component needs an internal method that holds the variable data and the HTML attributes assigned to the element that will be changed. These properties link themselves to the methods we define within the component that are responsible for responding to changes.

State and Properties (props)

In our example, the independent variable data is made up of dates. These change based on the chain reactions in the DOM that click events gather and then on the corresponding pirates and temperature information. So we will store the information according to the corresponding date in each “DATA” object. We’ll also use the this.state={} property in the React parent to store variable data as key-value copies.

Organizing programs in this way allows us to take advantage of methods provided by React to interact with data as “states” and make arbitrary changes to them.

Given that we want to use the DATA object’s key to render the date in HTML, it’s best to find a way to use JS’s map() method on the key (array.prototype.map ()), So that you can directly display the HTML returned to render(). There is actually a way to do it! We just wrap the JS code in double curly braces and place it in the DOM block that manages the component that we want the code output to display, and we’re done.

In this particular case, we’ll define a map() callback in a method within the component that returns a piece of HTML code within render() of the same component.

See the Pen State1 by Makhenzi (@makhenzi) on CodePen.

To assign click events to each date, we will assign the onClick attribute to them.

In this property, we call the component’s methods, which define the state and other changes we want to trigger after the onClick event.

In our example, we define this function as handleClick(). In handleClick(), we call the React method setState(), which allows us to change the state data at each click event. We simply insert an object that contains the state key we want to modify and assign them new associated values within the latter parentheses.

In general, each time a date is clicked, the selected div’s onClick property calls the HandClick() method, which calls the setState() method to modify the component’s state.

React automatically checks the return of the component’s render() function every time the state changes, looking for updates based on the new state. Once there is that data, React automatically triggers a new render() to update the changed HTML fragments.

I’m sorry, but in the following example I inserted three lines of Classnames code, a small tool for CSS management based on state changes, just to give the preview a little color. I’ll also use it to populate the preview with pirate variables in the final example. You can find a link to the Classnames repository on GitHub, as well as a brief usage wizard.)

See the Pen State2 by Makhenzi (@makhenzi) on CodePen.

Thus, our parent component state has been set to create child components based on the selected data (which will describe the number of pirates and the corresponding temperature).

We will create instances of the child component in the JSX file, just as we did for the parent component earlier. To link a child component to its parent, we simply define the relationship using the same syntax and an HTML tag in the render() function of the latter. If we call it “Child”, it will appear in the HTML block where we inserted
.

Our child component must also pass data to its parent based on the pirates and temperature associated with the now selected data. To do this, we use the attribute assigned to the Child tag, whose name is optional and whose information is visible only to the parent component.

This way, a child component can gain access to its own internal information by explicitly accessing data that is attributed to its parent component, using these “attribute-bridges,” or properties (props).

So, every time the state of the parent component changes, the property content of the child component is automatically updated. However, just as the render() method of the child component displays property content, it also updates based on a one-way linear stream of data, based on any new information received.

See the Pen Props by Makhenzi (@makhenzi) on CodePen.

Done! Components interact with each other and render different data in the DOM based on our clicks, rather than requiring a single page refresh. Based on this, the complexity of interactions and the number of components can be increased on demand, enabling us to create complex and efficient applications.

If you’re inspired by the library’s potential, check out the react.rocks website, where you’ll find lots of interesting ideas to get you started. (: