【react新手指南】如何安装react

昨夜风晓
430 阅读5分钟
文本字数1400+，阅读时间约5分钟。
如果觉得还可以，希望大家可以点个赞。

方式1：使用create-react-app（+推荐）


快速构建 React 开发环境

【01】create-react-app 是来自于Facebook，通过该命令无需配置就能快速构建React开发环境。

【02】create-react-app 自动创建的项目是基于 Webpack + ES6 。


【03】要求：node>=6

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start



截图：

项目的目录结构如下：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

node_modules
文件夹内是安装的所有依赖模块；
package.json
文件定义了项目的基本信息，如项目名称、版本号、在该项目下可执行的命令以及项目的依赖模块等；
public文件夹下的index.html是应用的入口页面；
src文件夹下是项目源代码，其中index.js是代码入口。


【05】尝试修改 src/App.js 文件代码：

src/App.js


// src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        <p>今天是2019年7月2日。zyx456</p>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
  }
}
 
export default App;


运行npm start。

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：



根目录/public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
   
  </body>
</html>


根目录/src/App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});


根目录/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();


react app/package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


方式2：通过命令行安装react


【01】无需重写应用即可开始使用React。

【02】建议将React添加到应用程序的一小部分中，例如单个小部件，这样就可以看到它是否适用于您的用例。


【03】虽然React可以在没有构建管道的情况下使用，但我们建议进行设置以提高工作效率。

现代构建管道通常包括：
包管理器，例如Yarn或npm。
它可以让您利用庞大的第三方软件包生态系统，轻松安装或更新它们。


【04】安装React
安装后，建议设置生产构建过程production build process，以确保在生产中使用快速版本的React。

yarn安装

yarn init
yarn add react react-dom

npm安装

npm init
npm install --save react react-dom


Yarn和npm都可以从npm registry库下载库。



【05】为防止潜在的不兼容性，所有库包都应使用相同的版本。 （这包括 react, react-dom, react-test-renderer等）




【06】我们建议您使用React with Babel在JavaScript代码中使用ES6和JSX。


最小的React示例如下所示：

在HTML文件中有<div id =“root> </div>。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);



【07】了解有关将React与现有代码集成的更多信息。Learn more about integrating React with existing code.


开发和生产版本


默认情况下，React包含许多有用的警告。 这些警告在开发中非常有用。

但是，它们使React的开发版本变得更大和更慢，因此您应该在部署应用程序时使用生产版本。

了解如何判断您的网站是否提供了正确版本的React（ how to tell if your website is serving the right version of React），以及如何最有效地配置生产构建过程：





方式3：通过CDN使用react（不推荐）


【01】可以通过CDN获得React和ReactDOM的UMD版本。压缩版本。

仅适用于开发，不适合生产。


【02】如果从CDN使用React，建议保持设置crossorigin属性：

crossorigin（MDN）


<script crossorigin src="..."></script>


【03】建议验证使用的CDN是否设置了Access-Control-Allow-Origin：* HTTP标头：


这样可以在React 16及更高版本中实现更好的错误处理体验error handling experience。




【04】例子：

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

实例解析：

实例中引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel
    • 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
将一个 h1 标题，插入 id="example" 节点中。





avatar
文章
阅读
粉丝

友情链接：