javascript - ReactJS 安装和矫枉过正的复杂性

Question

有人可以给出可能的简单解释如何从 documentation 安装 ReactJS .

react-16.2.0 包中有哪些重要的 JS 文件？什么意思:

C:\Users\myuser>npm install --save react react-dom
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\myuser\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\myuser\package.json'
npm WARN myuser No description
npm WARN myuser No repository field.
npm WARN myuser No README data
npm WARN myuser No license field.

+ react@16.2.0
+ react-dom@16.2.0
added 18 packages in 4.919s

而且我永远不明白为什么包括 reactjs 在内的如此优秀的项目是在数千个文件中而不是像 jQuery 这样的一个 javascript 文件中创建的。它使 pacakge 使用起来太困难了，我不想开始学习这些技术。这种新的编程工具必须易于安装。

Answer 1

通过使用 CDN，您可以在不使用 Babel 和 Webpack 的情况下运行 React，这就是您使用 jquery 的方式。你只需要添加

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

但这样做的问题是您不会获得 JSX。这意味着你必须写

return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');

这是普通的 javascript，而不是编写

return (
<h1>Greetings, {this.props.name}!</h1>
);

第二个代码片段是 JSX，您可以使用它在 JS 中编写 HTML。Babel 是一个将 JSX 转换为 vanilla javascript 的转换器。它还添加了某些浏览器可能不支持的 ES6 功能。

Webpack 是一个代码打包器。它将所有代码捆绑在一起用于生产，还有助于实时重新加载代码。如果您刚开始使用 React，我建议您使用 create-react-app。它基本上完成了所有配置，并预装了 babel 和 webpack。 Create-react-app

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

你的应用程序中的错误是因为你没有初始化文件夹，这可以通过运行 npm init 来完成。在安装 react 和 react-dom 之前。