React从入门到精通系列之(1)安装React

时间 2019-11-06

标签 react 入门精通系列安装栏目 React 繁體版

原文原文链接

1、安装React

React是灵活的，能够在各类类型的项目中使用。你可使用它建立一个全新的应用程序，也能够逐步将其引入现有的项目中，而不须要重写整个项目。html

建立一个单页面应用

Create React App是开始构建新的React单页应用程序的最佳方式。它能够帮助您快速集成您的开发环境，以便您可使用最新的JavaScript功能，它提供了一个很好的开发体验，并能够有效优化您的应用程序,提高开发效率。前端

$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm run start

上面只是建立了一个React应用，不须要关心也须要不处理后端逻辑或数据库;
它只是一个React的前端环境集成工具,负责建立前端的开发环境，因此你可使用它与你想要的任何后端进行交互。它内部使用了webpack，Babel和ESLint，你能够单独配置它们，来达到定制化的效果。react

在已经开发的项目中使用React

您不须要从新编写应用程序便可开始使用React。
咱们建议将React添加到应用程序的一小部分，例如单个小部件，以便您能够看到它是否适合您的用例。
虽然React能够在没有构建工具的状况下使用，但咱们建议使用并设置它，以便提升生产力。现代构建工具一般包括：webpack

一个包管理器，例如npmweb
一个打包工具，例如webpack数据库
一个编译工具，例如Babelnpm

安装React

咱们建议使用Yarn或npm来管理React前端模块的依赖。后端

经过Yarn安装：浏览器

yarn add react react-dom

经过npm安卓：bash

npm install --save react react-dom

使用ES6和JSX

咱们建议您使用Babel中的React配置让您在JavaScript代码中可使用ES6和JSX。 ES6是一组现代JavaScript特性，使开发更容易，JSX是对React很是有效的JavaScript语言的扩展。

具体请百度Babel如何在许多不一样的构建环境中配置Babel。首先确保你安装了babel-preset-react和babel-preset-es2015，并已经在.babelrc配置中启用它们。

使用ES6和JSX写一个HelloWorld的例子

咱们建议使用像webpack或Browserify这样的打包工具，以便您能够编写模块化代码，它们能够将不一样的代码模块打包捆绑到一块儿，用来优化的代码加载时间。

一个简单的React示例以下所示：

这里我使用的是bower来安装react和react-dom。

mkdir hello-world & cd hello-world
bower install react babel --save
touch index.html

而后在index.html中写入如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="bower_components/babel/browser.js"></script>
    <script type="text/babel">
        var doc = document;
        ReactDOM.render(
                <h1>你好，react</h1>,
                doc.getElementById('app')
        )
    </script>
    <title>ReactDOM.render</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

最后在浏览器中打开这个页面，就能够看到最终效果。