如何：使用 React JS 环境
How To: Use a React JS Environment
这并非直接基于本教程：(YouTube) ReactJS 基础知识 - #2 使用 Webpack 设置工作区
（所有列出的教程分别托管在 GitHub。）
但我一直在尝试创建一个本地 React JS 环境，我可以在 Mac 上练习编码。 （最终目标是让我的文件达到 GitHub 并通过 Heroku 发布它们，这样我就可以分享我正在处理的任何内容。）
我使用了本教程：https://www.kirupa.com/react/setting_up_react_environment.htm - 一切似乎都正常，但由于某些 npm 错误，我无法将文件托管到 Heroku。
无论如何，我现在很困惑，因为据说 index.hmtl / index.jsx 文件在输出中 "packaged" 到 "myCode.js" 文件，这就是浏览器看到。 （我假设这是 Webpack 所做的事情，因为它应该 "bundle" 事情......现在我不太确定。）
然而我的印象是如果我要更改 index.jsx 文件中的代码，这个 myCode.js 文件也会更新...但那是 不是这种情况。那里有一个函数可以使教程中的代码继续显示。
我注意到这个输入与输出文件夹在大多数 Web 应用程序设置中确实存在，因此我需要了解这里发生了什么。
这是另一件事：我已经从以下位置下载了完成的设置文件：https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade 以及本教程（以上）... 当我打开 index.html 文件，我的浏览器中没有显示任何内容。
我错过了什么吗？我正在寻找一种方式来说，使用一个设置来不断练习和构建教程，然后当我准备好时，清除主要工作文件并从头开始创建一个小测试应用程序......最好就像我在工作一样在真实的东西上（所以这意味着使用数据库或一些 "database substitute"）。
我希望主要将我的基本结构限制为：Node.js、React、Webpack 和 Babel
我对这一切都是陌生的，所以任何帮助将不胜感激。我真的只想开始编码。
另外，我在使用 npm 时遇到了一些问题。按照第一个教程进行操作很简单，但是一旦我安装了一些东西，我就开始遇到问题。这似乎与全局文件和本地文件有关，但老实说，我只想快速使用 npm 和 git 之类的东西作为工具，而不必从头开始了解它们......作为学习其余部分已经够挑战了。
有谁知道我可以复制、粘贴、输入和编码的来源？！因为上面的教程对我来说没有意义。
谢谢，
四月
发生了一些事情，因为浏览器不支持 ReactJS 语法，也不支持 ES6（较新版本的 JS），您的代码需要将您的 React 和 ES6 代码转换为 ES5。 Babel 将其转译为 ES5 并由 webpack 打包您的模块。
Node.js
它只是服务器端的 JS。您必须将它安装在您的计算机上才能在本地 运行 JS 代码。
NPM
Npm 是 JavaScript 的包管理器。您可以使用它来下载和安装包（例如 react）。
Webpack
Webpack 是一个模块捆绑器，它接受具有依赖关系的模块，并通过基于一些配置将它们捆绑在一起来生成静态资产。
通天塔
babel-preset-es2015 和 babel-preset-react 是 babel-loader 用来分别翻译 ES6 和 JSX 语法的插件，所以你的浏览器可以解释它们。
Webpack 对加载器的支持使其非常适合与 React 一起使用。
我建议您按照官方文档进行操作，这些文档具有非常容易遵循的分步说明：
这并非直接基于本教程：(YouTube) ReactJS 基础知识 - #2 使用 Webpack 设置工作区
（所有列出的教程分别托管在 GitHub。）
但我一直在尝试创建一个本地 React JS 环境，我可以在 Mac 上练习编码。 （最终目标是让我的文件达到 GitHub 并通过 Heroku 发布它们，这样我就可以分享我正在处理的任何内容。）
我使用了本教程：https://www.kirupa.com/react/setting_up_react_environment.htm - 一切似乎都正常，但由于某些 npm 错误，我无法将文件托管到 Heroku。
无论如何，我现在很困惑，因为据说 index.hmtl / index.jsx 文件在输出中 "packaged" 到 "myCode.js" 文件，这就是浏览器看到。 （我假设这是 Webpack 所做的事情，因为它应该 "bundle" 事情......现在我不太确定。）
然而我的印象是如果我要更改 index.jsx 文件中的代码，这个 myCode.js 文件也会更新...但那是 不是这种情况。那里有一个函数可以使教程中的代码继续显示。
我注意到这个输入与输出文件夹在大多数 Web 应用程序设置中确实存在，因此我需要了解这里发生了什么。
这是另一件事：我已经从以下位置下载了完成的设置文件：https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade 以及本教程（以上）... 当我打开 index.html 文件，我的浏览器中没有显示任何内容。
我错过了什么吗？我正在寻找一种方式来说，使用一个设置来不断练习和构建教程，然后当我准备好时，清除主要工作文件并从头开始创建一个小测试应用程序......最好就像我在工作一样在真实的东西上（所以这意味着使用数据库或一些 "database substitute"）。
我希望主要将我的基本结构限制为：Node.js、React、Webpack 和 Babel
我对这一切都是陌生的，所以任何帮助将不胜感激。我真的只想开始编码。
另外，我在使用 npm 时遇到了一些问题。按照第一个教程进行操作很简单，但是一旦我安装了一些东西，我就开始遇到问题。这似乎与全局文件和本地文件有关，但老实说，我只想快速使用 npm 和 git 之类的东西作为工具，而不必从头开始了解它们......作为学习其余部分已经够挑战了。
有谁知道我可以复制、粘贴、输入和编码的来源？！因为上面的教程对我来说没有意义。
谢谢， 四月
发生了一些事情，因为浏览器不支持 ReactJS 语法，也不支持 ES6（较新版本的 JS），您的代码需要将您的 React 和 ES6 代码转换为 ES5。 Babel 将其转译为 ES5 并由 webpack 打包您的模块。
Node.js 它只是服务器端的 JS。您必须将它安装在您的计算机上才能在本地 运行 JS 代码。
NPM Npm 是 JavaScript 的包管理器。您可以使用它来下载和安装包（例如 react）。
Webpack Webpack 是一个模块捆绑器，它接受具有依赖关系的模块，并通过基于一些配置将它们捆绑在一起来生成静态资产。
通天塔 babel-preset-es2015 和 babel-preset-react 是 babel-loader 用来分别翻译 ES6 和 JSX 语法的插件，所以你的浏览器可以解释它们。
Webpack 对加载器的支持使其非常适合与 React 一起使用。
我建议您按照官方文档进行操作，这些文档具有非常容易遵循的分步说明：