React学习笔记(一) 入门

1、安装

刚开始的时候，我们还是直接通过 CDN 引入就好，这样可以帮助我们更快速地体验 React

开发环境

<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/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

2、入门

我们还是先从一个 Hello World 的例子开始，创建一个 html 文件，并在文件中输入如下代码：

<!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>

好，下面让我们来分析一下上面的代码

首先，我们通过 <head> 中的 <script> 标签引入三个相关库，它们分别是：

react.development.js：React 核心库
react-dom.development.js：React DOM 可以根据 React 元素 更新浏览器 DOM
babel-standalone：Babel 是一个 JavaScript 编译器，可以用于编译 JSX

接着，我们在 <body> 中的 <script> 标签中写下我们的主逻辑，这里使用的是 JSX 语法

const element = <h3>Hello World</h3> 语句声明一个 React 元素
ReactDOM.render(element, container) 函数指定将一个 React 元素渲染到浏览器 DOM

参数 element 是一个 React 元素，参数 container 定义根节点，该节点中的内容都由 React DOM 管理

3、JSX

（1）介绍

上面例子中介绍的 JSX 究竟是什么东西呢？简单来说，它就是一个 JavaScript 的语法拓展

实际上，我们在项目中不一定要使用 JSX，但是 React 更推荐使用 JSX 代替常规的 JavaScript

这是因为 JSX 可以更直观地描述用户界面，它是 声明 React 元素 的最佳方法

好，这里涉及到另外一个概念，React 元素又是什么呢？

React 元素其实就是构成 React 应用的最小单位，用于 描述用户界面

它是一个创建开销极小的 普通对象，React DOM 负责更新浏览器 DOM 来与 React 元素保持一致

（2）例子

不理解吗？没关系，再让我们回顾一下上面使用过的 JSX 语句

它看起来很像 HTML 和 JavaScript 的结合体对吧，这里它声明了一个元素

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

实际上它创建了一个对象

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

并由 React DOM 负责将其更新到浏览器 DOM

<h3>Hello World</h3>

（3）使用

嵌入表达式

我们可以在一个大括号内使用 JavaScript 表达式

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

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

使用属性

我们可以通过引号，将属性值指定为字符串常量；也可以通过大括号，在属性值中插入一个 JavaScript 表达式

在这里，我们约定使用 camelCase（驼峰命名）来定义属性名称

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

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

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

JSX 也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

也就是说我们可以把 JSX 赋值给变量，将 JSX 作为参数传入函数以及从函数中返回 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')
);

【阅读更多 React 系列文章，请看 React学习笔记】