Reactjs 开发设置答案

【问题标题】：Reactjs development setupReactjs 开发设置
【发布时间】：2018-01-11 16:33:52
【问题描述】：

我有以下 react html 页面内容，我想知道这种风格的 react 开发存在的问题。主要是我不使用任何捆绑工具。我是新手，发现这很容易与服务器端语言进行开发和集成。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <div id="greeting-div"></div>

    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="browser.min.js"></script>
    <script>
    </script>
    <script type="text/babel">

      class Greeting extends React.Component{
        render() {
          return (
            <p id="test">Hello, Universe</p>
          )
        }
      };

      ReactDOM.render(
        <Greeting/>,
        document.getElementById('greeting-div')
      );
    </script>
  </body>
</html>

【问题讨论】：

如果您是新手，我强烈建议您查看github.com/facebookincubator/create-react-app
我会说这对于个人学习项目来说是可以的。但如果您开始添加更多组件、外部依赖项、协作者或决定使其生产就绪（捆绑、缩小、测试等），则不会扩展

标签： reactjs development-environment

【解决方案1】：

你不能进行热重载，这在 React 中非常棒。

它的规模也会很大，因为您会将所有元素都放在同一个 html 中。

为它运行 linter/任何代码分析工具可能会很糟糕。

您可能应该尝试 create-react-app:https://github.com/facebookincubator/create-react-app，它上手非常简单，您将获得非常好的开发设置。

【讨论】：

你能解释一下你关于create-react-app方法的第二点和第三点吗？
create-react-app 已经让您开始使用 src 目录，该目录位于您的 react 组件，因此您可以轻松地创建新文件来分离 react 组件。它还包括一个检查潜在问题代码的 linter。
关于单独文件中的 react 组件，我总是可以有单独的脚本标签，其中包含 jsx 文件，因此会有相同的效果，对吧？
这仍然是一个文件。另外我不知道它是否能正确处理变量。
你会污染你的全局命名空间，它不会是一回事，当你使用 create-react-app 之类的东西时，每个组件都由使用 AMD 或 commonJS 的模块捆绑器隔离，假设你有两个具有相同名称的组件或变量，以你正在做的方式做事一个变量会覆盖另一个，这太可怕了，不要这样做，你会后悔的，我可以 100% 向你保证