Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the basic knowledge of React". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the basics of React".

Everything is a component.

React applications are composed of components, which are numerous and nested within each other. You might ask, "but what are components?"

Components are reusable code snippets that define the appearance and behavior of certain functions on the UI. For example, a button is a component.

Let's take a look at the calculator below, which you will see on Google when you try to calculate 2 + 2 = 4-1 = 3 (a simple math problem).

The red mark indicates the component.

As shown in the image above, the calculator has many areas, such as a display window and a numeric keypad. All of these can be many individual components or one huge component. It depends on the extent to which things are decomposed and abstracted in React. You write code for all of these components separately, and then merge them into a container, which is a React component. In this way, you can create reusable components, and the final application will be a set of separate components that work together.

Here is a way for you to practice the above principles and write calculators in React.

. . .

That's right! It looks like HTML code, but it's not. We will discuss it in more detail in a later section.

Set up our Playground

This tutorial focuses on the basics of React. It doesn't favor Web or React Native (developing mobile applications). So we will use an online editor so that we can avoid the specific configuration of web or native before learning what React can do.

I have set up the development environment for readers in codepen.io. Just click on the link and read all the comments in HTML and JavaScript.

Control component

We have learned that a React application is a collection of components with a nested tree structure. Therefore, we need some mechanism to transfer data from one component to another.

Enter "props"

We can use the props object to pass arbitrary data to our components. Each component in the React gets the props object. Before we learn how to use props, let's learn about functional components.

A) functional components

In React, a functional component uses any data you pass to it through a props object. It returns an object that describes the UI that React should render. Functional components are also called stateless components.

Let's write * functional components.

Function Hello (props) {return {props.name}}

It's that simple. We just pass props as an argument to a normal JavaScript function and have a return value. Yeah? What did you return? That {props.name}. It is JSX (JavaScript Extended). We will learn about it in more detail in a later section.

The above function will render the following HTML in the browser.

Rajat

Read the following section on JSX, which explains how to get this HTML from our JSX code.

How to use this functional component in React applications? I'm glad you asked! It's as simple as the following.

The property name becomes the props.name in the Hello component in the above code, and the property age becomes props.age.

Remember! You can nest one React component within other React components.

Let's use the Hello component in codepen playground. Replace the div in ReactDOM.render () with our Hello component and view the changes in the bottom window.

Function Hello (props) {return {props.name}} ReactDOM.render (, document.getElementById ('root'))

But what if your component has some internal state? For example, like the counter component below, it has an internal count variable that changes when the + and-keys are pressed.

React components with internal state

B) Class-based components

A class-based component has an additional property, state, which you can use to store private data for the component. We can rewrite our Hello in class notation. Because these components have states, they are also called stateful components.

Class Counter extends React.Component {/ / this method should be present in your component render () {return ({this.props.name});}}

We inherited the React.Component class of the React library to create class-based components in React. Learn more about the JavaScript class here.

The render () method must exist in your class because React looks for this method to see which UI it should render on the screen. In order to use this internal state, we first need to use the

To use this internal state, we must first initialize the state object in the constructor of the component class as follows.

Class Counter extends React.Component {constructor () {super (); / define the internal state of the component this.state = {name: 'rajat'}} render () {return ({this.state.name});}} / / Usage:// In your react app:

Similarly, you can use the this.props object to access props within our class-based components.

To set up state, use React.Component 's setState (). We will see an example of this in the * * section of this tutorial.

Tip: never call setState () in the render () function, because setState will cause the component to re-render, which will lead to a * loop.

Class-based components have an optional property "state".

In addition to state, class-based components have some declaration cycle methods such as componentWillMount (). You can use this to initialize things like state, but that will be beyond the scope of this article.

JSX

JSX is an acronym for JavaScript Extended, which is a way to write React components. With JSX, you can get the full power of JavaScript in the class XML tag.

You put the JavaScript expression in {}. Here are some valid examples of JSX.

Press me! Press me {3: 1} times!

The way it works is that you write JSX to describe what your UI should look like. A transcoder like Babel converts this code into a bunch of React.createElement () calls. The React library then uses these React.createElement () calls to construct the tree structure of the DOM element. For the web page view of React or the Native view of React Native, it is saved in memory.

React then calculates how it can effectively mimic the tree in the memory of the UI shown to the user. This process is called reconciliation. After completing the calculation, React makes changes to the real UI on the screen.

How React transforms your JSX into a tree that describes the application of UI.

You can use Babel's online REPL to see the actual output of React when you write some JSX.

Use Babel REPL to convert JSX to normal JavaScript

Because JSX is just a syntactic sugar for the React.createElement () call, you can use React without JSX.

Now that we know all the concepts, we are ready to write the counter components in the GIF diagram we saw earlier.

The code is as follows, and I hope you already know how to render it on our playground.

Class Counter extends React.Component {constructor (props) {super (props); this.state = {count: this.props.start | | 0} / / the following bindings are necessary to make `this` work in the callback this.inc = this.inc.bind (this); this.dec = this.dec.bind (this);} inc () {this.setState ({count: this.state.count + 1}) } dec () {this.setState ({count: this.state.count-1});} render () {return (+-{this.state.count}) }} Thank you for your reading, the above is the content of "what are the basic knowledge of React". After the study of this article, I believe you have a deeper understanding of what the basic knowledge of React is, and the specific use needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.