React study notes (a) entry

1, the installation

At the beginning, we like or directly through the introduction of CDN, this will help us more quickly experience React

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>

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>

2. Getting Started

We start with a Hello World example start, create a htmlfile, and enter 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>

Well, let us analyze the above code

First, we passed <head>the <script>introduction of three related tag libraries, they are:

react.development.js: React core library
react-dom.development.js: React DOM can React element to update the browser DOM
babel-standalone: Babel is a JavaScript compiler, it can be used to compile JSX

Next, we have <body>the <script>write logic of our primary tab is used herein JSX grammar

const element = <h3>Hello World</h3> React statement declares a element
ReactDOM.render(element, container) React element specifies a function rendering to the browser DOM

Parameter elementis a React element parameters containerdefine the root node, the contents of the node managed by the DOM React

3 JSX

(1 Introduction

JSX described in the above example is what is it exactly? In simple terms, it is a JavaScript syntax expand

In fact, we do not have to use the JSX in the project, but more is recommended React JSX instead of the conventional JavaScript

This is because JSX described more intuitive user interface, which is declared React elements of the preferred method

Well, another concept involved here, what React element is it?

React element is actually the minimum unit React application for describing user interfaces

It is a very small cost of creating ordinary objects , React DOM responsible for updating the browser DOM element to be consistent with the React

(2) Examples

I do not understand it? Never mind, let us look at the use of the above statement had JSX

It looks like a combination of HTML and JavaScript on the right, where it declares an element

const element = <h3>Hello World</h3>;

In fact, it creates an object

const element = {
    type: 'h3',
    props: {
        children: 'Hello World'
    }
};

By React DOM is responsible for its update to the browser DOM

<h3>Hello World</h3>

(3) Use

Embed expression

We can use a JavaScript expression inside the braces

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

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

Use of property

We can quote, the attribute value is specified as a string constant; braces can also insert a JavaScript expression in the attribute value

Here, we have agreed to camelCase (camelCase) to define the property name

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

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

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

JSX is also an expression

After compiling, JSX expression will be converted to ordinary JavaScript function call, and get back the value of the object on which JavaScript

That we can JSX assigned to variables, the JSX as a parameter and returns a function from the function JSX

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')
);

[Read More React series of articles, look React study notes ]