React学习笔记(一) 入门

2019-08-07 12:39:44 阅读：171 来源： 互联网

标签：入门 DOM 笔记 element React World JSX Hello

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学习笔记】

标签：入门,DOM,笔记,element,React,World,JSX,Hello
来源： https://blog.csdn.net/wsmrzx/article/details/98737862

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React学习笔记(一) 入门

1、安装

2、入门

3、JSX