如何：使用 React JS 环境

Question

这不是直接基于本教程：(YouTube) ReactJS Basics - #2 Setup Workspace with Webpack

（所有列出的教程都分别托管在 GitHub 上。）

但我一直在尝试创建一个本地 React JS 环境，以便我可以在 Mac 上练习编码。 （最终目标是将我的文件上传到 GitHub 并通过 Heroku 发布，这样我就可以分享我所做的一切。）

我使用了本教程：https://www.kirupa.com/react/setting_up_react_environment.htm - 一切似乎都正常，但由于一些 npm 错误，我无法将文件托管到 Heroku。

无论如何，我现在很困惑，因为据说 index.hmtl / index.jsx 文件在输出中被“打包”到“myCode.js”文件中，这就是浏览器看到的。 （我假设这是 Webpack 所做的事情，因为它应该“捆绑”东西......现在我不太确定。）

但是我的印象是，如果我要更改 index.jsx 文件中的代码，这个 myCode.js 文件也会更新……但事实并非如此。不是。那里有一个函数可以使教程中的代码继续显示。

我注意到这个输入与输出文件夹在大多数 Web 应用设置中确实存在，因此我需要了解这里发生了什么。

这是另一件事：我已经从 https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade 以及本教程（上图）下载了完成的设置文件... 当我打开 index.html 文件时，我的浏览器。

我错过了什么吗？我正在寻找一种方式来表达，使用一个设置来不断练习和构建教程，然后当我准备好时，清除主要的工作文件并从头开始创建一个小测试应用程序......最好就像我在工作一样在真实的东西上（这意味着使用数据库或一些“数据库替代品”）。

我希望将我的基础结构主要限制为：Node.js、React、Webpack 和 Babel

我对这一切都不熟悉，因此我们将不胜感激任何帮助。我真的只想开始编码。

我也遇到了一些关于 npm 的问题。按照第一个教程进行操作很简单，但是一旦我已经安装了一些东西，我就开始遇到问题。这似乎与全局文件和本地文件有关，但老实说，我只想快速使用 npm 和 git 之类的工具作为工具，而不必从头开始了解它们……因为学习其余部分已经足够了一个挑战。

有谁知道我可以复制、粘贴和输入代码的来源？！因为上面的教程对我来说没有意义。

谢谢， 四月

Answer 1

发生了一些事情，因为浏览器不支持 ReactJS 语法，也不支持 ES6（较新版本的 JS），您的代码需要将您的 react 和 ES6 代码转换为 ES5。 Babel 将其转换为 ES5，然后 webpack 打包你的模块。

Node.js 它只是用于服务器端的 JS。您必须将它安装在您的计算机上才能在本地运行 JS 代码。

NPM Npm 是 JavaScript 的包管理器。您可以使用它来下载和安装软件包（例如 react）。

网页包 Webpack 是一个模块捆绑器，它获取具有依赖关系的模块并通过基于某些配置将它们捆绑在一起来生成静态资产。

通天塔 babel-preset-es2015 和 babel-preset-react 是 babel-loader 用来分别翻译 ES6 和 JSX 语法的插件，以便您的浏览器可以解释它们。

Webpack 对加载器的支持使其非常适合与 React 一起使用。

我建议你遵循官方文档，这些文档非常容易按照步骤进行操作：

从这里开始：https://facebook.github.io/react/