reactjs - 如何: Use a React JS Environment

Question

这并不是直接基于本教程:(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 文件在输出中被“打包”到“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 代码。

NPMNpm 是 JavaScript 的包管理器。您可以使用它来下载并安装软件包(例如react)。

WebpackWebpack 是一个模块 bundler ，它采用具有依赖关系的模块，并根据某些配置将它们捆绑在一起生成静态 Assets 。

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

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

我建议您遵循官方文档，其中有非常容易遵循的分步说明:

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