如何安装React

前端小工
1,151 阅读4分钟

如何安装React？

React是一个库，所以说安装可能听起来有点奇怪。也许setup是一个更好的词，但你会明白这个概念。

有各种方法来设置React，以便它可以在你的应用程序或网站上使用。

在网页中直接加载React

最简单的是将React的JavaScript文件直接添加到页面中。当你的React应用将与单个页面上存在的元素互动，而不是实际控制整个导航方面时，这是最好的。

在这种情况下，你在body 标签的末尾添加2个脚本标签。

<html>
  ...
  <body>
    ...
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
      crossorigin
    ></script>
  </body>
</html>

链接中的16.7.0-alpha.2 版本指向16.7的最新Alpha版本（在撰写本文时），它有Hooks可用。请将其改为可用的最新版本的React。

这里我们同时加载了React和React DOM。为什么是2个库？因为React是100%独立于浏览器的，可以在浏览器之外使用（例如，在移动设备上使用React Native）。因此，需要React DOM，为浏览器添加包装器。

在这些标签之后，你可以加载你的使用React的JavaScript文件，甚至可以在script 标签中内联JavaScript。

<script src="app.js"></script>

<!-- or -->

<script>
  //my app
</script>

要使用JSX，你需要一个额外的步骤：加载Babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

并以特殊的text/babel MIME类型加载你的脚本。

<script src="app.js" type="text/babel"></script>

现在你可以在你的app.js文件中添加JSX。

const Button = () => {
  return <button>Click me!</button>
}

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

请看这个简单的Glitch例子：https://glitch.com/edit/#!/react-example-line-jsx?path=script.js

以这种方式从脚本标签开始，有利于构建原型，并能快速启动，而无需设置复杂的工作流程。

使用create-react-app

create-react-app 是一个旨在让你迅速掌握React的项目，任何需要超越单一页面的React应用都会发现 ，满足这一需求。create-react-app

你开始使用 npxnpm ，这是一个下载和执行Node.js命令的简单方法，无需安装它们。npx （从5.2版本开始），如果你还没有安装npm，现在就从nodejs.org（npm与Node一起安装）。

如果你不确定你有哪个版本的npm，运行npm -v ，检查你是否需要更新。

提示：如果你不熟悉使用终端，请查看我的OSX终端教程：https://flaviocopes.com/macos-terminal/，这也适用于Linux--很抱歉，我现在没有Windows的教程，但谷歌是你的朋友。

当你运行npx create-react-app <app-name> ，npx 将会下载最新的create-react-app 版本，运行它，然后从你的系统中删除它。这很好，因为你的系统上永远不会有一个过时的版本，而且每次你运行它，你都会得到最新、最棒的代码。

那我们就开始吧。

npx create-react-app todolist

这是它完成运行的时候。

create-react-app 在你告诉的文件夹中创建了一个文件结构（本例中为 ），并初始化了一个todolist Git仓库。

它还在package.json 文件中添加了一些命令，因此你可以通过进入该文件夹并运行npm start ，立即启动该应用程序。

除了npm start ，create-react-app 还添加了其他一些命令。

  • npm run build：在build 文件夹中构建React应用程序文件，准备部署到服务器上。
  • npm test：使用Jest运行测试套件
  • npm eject弹出：从create-react-app

弹出是决定create-react-app 已经为你做得够多了，但你想做的比它所允许的更多。

由于create-react-app 是一套共同点的约定和有限的选项，很可能在某些时候你的需求会要求一些独特的东西，超出create-react-app 的能力。

当你弹出时，你失去了自动更新的能力，但你在Babel和Webpack的配置中获得了更多的灵活性。

当你弹出时，这个动作是不可逆的。你将在你的应用程序目录中得到2个新的文件夹，config 和scripts 。这些包含了配置--现在你可以开始编辑它们了。

如果你已经安装了一个使用旧版本React的应用程序，首先通过在你的应用程序中添加console.log(React.version) 来检查版本，然后你可以通过运行yarn add react@16.7 来更新，yarn会提示你进行更新（选择最新的可用版本）。重复yarn add react-dom@16.7 （用目前最新的React版本改变 "16.7"）。

CodeSandbox

一个简单的方法是进入codesandbox.io/s，选择 "React"，就可以拥有create-react-app 的结构，而不用安装它。

CodeSandbox是一个开始React项目的好方法，无需在本地安装。

Codepen

另一个伟大的解决方案是Codepen。

你可以使用这个Codepen启动项目，它已经预先配置了React，并支持Hooks： https://codepen.io/flaviocopes/pen/VqeaxB

Codepen的 "笔 "非常适合有一个JavaScript文件的快速项目，而 "项目 "则非常适合有多个文件的项目，就像我们在构建React应用时最常使用的那些。

有一点需要注意的是，在Codepen中，由于它的内部工作方式，你不使用常规的ES模块import 语法，而是要导入例如useState ，你使用

const { useState } = React

而不是

import { useState } from 'react'
avatar
文章
阅读
粉丝