React入门（二）：Get Start

React 是一个十分灵活的框架，它可以像 JQuery 一样，仅仅通过引入就能够使用，也可以完完全全地使用 React 搭建一个完整的项目。在使用时，React 同时支持 ES5 和 ES6（ECMAScript，即 JS 的标准，可以简单地理解为不同版本的 JS ），你可以根据自己的习惯灵活地使用。还有其独特的 JSX（JavaScript 的语法扩展，即 JS 和 HTML 混合使用，再通过 Babel 编译为普通的 JS），如果你用不惯，也可以直接使用 JS。总而言之，React 使用起来十分灵活方便，本文将循序渐进，简单介绍如何使用以及不同程度地使用 React。

一、直接引入
最便捷地使用 React 地方法就是像使用 JQuery 一样下载到本地或者直接从网上引入。使用 React 需要引入三个文件，react.js、react-dom.js、babel.js，其中 react.js 是React 的核心库，react-dom.js 提供与 DOM 相关的功能，babel.js 是将 JSX 转换为 JS。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</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/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</html>

观察以上代码，我们会发现 React 中的 JSX 其实就是 JS 和 HTML 的混合用法。首先是它的 script 中的 type="text/babel"，表明了这个标签内的语法为 JSX，且会被 Babel 编译为普通的JS。然后通过 ReactDOM 的 render 方法，将第一个参数（元素）插入到第二个参数内（DOM节点）。

当然，如果你使用 JS 非常习惯且熟练了，你也可以不使用 JSX 而是直接使用 JS，虽然省去了解析的过程，但是在稍微熟悉了一点 JSX 之后你会发现，使用 JSX 能够大大地提升我们的开发效率和代码可读性。

//其实这段代码就是Babel编译过后的结果
ReactDOM.render(
  React.createElement('h1', null, 'Hello world!'),  //类型，属性，子节点
  document.getElementById('root')
);

二、使用工具链（脚手架）快速搭建 React 应用
官网上推荐的工具链有 Create React App、Next.js、Gatsby、Neutrion、Nx、Parcel、Razzle，能够满足各种需求，其中使用的最多的、最频繁的、能够满足大部分需求的就是 Create React App 了。使用这些工具链需要你的电脑上安装了Node >= 8.10 和 npm >= 5.6，现在的前端框架和库，基本上都要通过 npm、cnpm、yarn 这些包管理工具下载使用。

//创建方法一
npx create-react-app my-app
cd my-app
npm start
//创建方法二
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

通过这种工具链（脚手架）的方式创建的应用，还集成了 eslint、webpack 等等能够提升应用性能、帮助开发、负责项目打包部署等依赖，可以很方便地搭建整个 React 开发环境，相较于直接引入依赖文件再开发，不仅能够极大地提升应用性能、优化开发体验，还极大地方便了应用的打包部署过程。原先需要安装如 webpack 等负责打包的工具，再进行配置使用，现在只需指令 npm run build，就能完成打包，然后将打包完的文件上传至服务器访问。（默认打包完的文件叫build，可以在设置中更改：通过eject暴露配置，再npm install重新下载依赖，然后修改）

关于使用 React 的第一步就简单讲到这里，一般来说，我们都会选择使用工具链（脚手架）的方式快速创建一个 React 应用，跟详细的内容之后再讲吧！

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog

React入门（二）：Get Start

猜你喜欢