1, install,

In the beginning, we should introduce React directly through CDN. This will help us to experience React more quickly

  • The development environment
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
Copy the code
  • The production environment
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Copy the code

2, an introduction to

Let’s start with a Hello World example. Create an HTML file and type the following code in the file:

<! DOCTYPE html><html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone"></script>
</head>

<body>
    <div id="app"></div>

    <script type="text/babel">
        const element = <h3>Hello World</h3>;
        ReactDOM.render(
            element,
            document.getElementById('app'));</script>
</body>

</html>
Copy the code

Ok, let’s examine the above code

First, we introduce three related libraries via the

  • react.development.js: React core library
  • react-dom.development.jsThe React DOM can be used according toThe React elementsUpdating the browser DOM
  • babel-standaloneBabel is a JavaScript compiler that can be used to compile JSX

Next, we write our main logic in the

  • The const element =

    Hello World

    statement declares a React element

  • The reactdom.render (Element, container) function specifies that a React element be rendered into the browser DOM

    The Element argument is a React element, and the container argument defines the root node, whose contents are managed by the React DOM

3, JSX

(1) Introduction

What exactly is JSX in the example above? Simply put, it is a syntax extension of JavaScript

Actually, we don’t have to use JSX in our projects, but React recommends using JSX instead of regular JavaScript

This is because JSX is a more intuitive way to describe the user interface and is the best way to declare React elements

Okay, there’s another concept involved here, what’s the React element?

The React element is the smallest unit that makes up the React application and describes the user interface

The React DOM is responsible for updating the browser DOM to be consistent with the React element

(2) Examples

Don’t understand? Never mind, let’s revisit the JSX statements we used above

It looks a lot like a combination of HTML and JavaScript, right? It’s declaring an element

const element = <h3>Hello World</h3>;
Copy the code

It actually creates an object

const element = {
    type: 'h3'.props: {
    	children: 'Hello World'}};Copy the code

The React DOM takes care of updating it to the browser DOM

<h3>Hello World</h3>
Copy the code

(3) Use

  • Embedded expression

We can use JavaScript expressions within curly braces

const element = (
    <div>
        <h3>Hello</h3>
        <p>Hello {math.random () < 0.5? 'World' : 'React' }</p>
    </div>
);

ReactDOM.render(
    element,
    document.getElementById('app'));Copy the code
  • Use the property

We can specify property values as string constants, using quotes; You can also insert a JavaScript expression in the property value with curly braces

Here, we agree to use camelCase (camel name) to define attribute names

var myStyle = {
    fontSize: 60.textAlign: 'center'
};

const element = (
    <h3 style = { myStyle} >Hello World</h3>
)

ReactDOM.render(
    element,
    document.getElementById('app'));Copy the code
  • JSX is also an expression

After compilation, the JSX expression is turned into a normal JavaScript function call and evaluated to get a JavaScript object

That is, we can assign JSX to variables, pass JSX as an argument to functions, and return JSX from functions

function greeting (user) {
    if (user) {
        return <h1>Hello, { user }</h1>;
    } else {
        return <h1>Hello, Stranger</h1>; }}const element = greeting();

ReactDOM.render(
    element,
    document.getElementById('app'));Copy the code