Question

我对React JS或任何给定的服务器端技术都很陌生。现在，我想学习如何在React JS中开发。

简介

我在官方网站上开始使用React JS tutorials。现在，我正在尝试将React toolbox或任何其他第三方组件导入到我的JSX代码中。但是，我正面临uncaught exception error: require not defined的问题。

当我搜索它时，我开始了解各种构建机制（browserify，webpack，gulp），我完全是新的（再次）。阅读完这些内容并看到some examples后，我就可以让我的浏览器编译require()个.jsx文件中的.html语句。

问题

我想做的是：

撰写server.js个文件。
通过我的<script>文件启动它。
在其中添加.jsx标记，这会将.html代码注入我的.js文件。

我到目前为止看到的示例（1，2和其他一些......）在开头加载.html文件并写下.jsx render()个文件中的代码（.html函数）。

问题

是否可以从server.js加载.jsx文件，并使用<script>文件中.html标记的<html> . . <body> <div id="container"></div> <script src="path_to_reactjs_file"></script> </body> </html>？像这样：

mvn install

我很抱歉，如果这听起来像是一个完全愚蠢的问题，但由于对这项技术完全陌生，我无法理解我应该怎么做。

任何帮助都将不胜感激。

Answer 1

听起来文件名扩展可能存在问题，Browserify只会理解.js和.json个扩展名，除非您另有说明。

$ browserify --extension jsx src/main.js > bundle.js

具有正确变换的Babel将自动为您执行此操作，作为其模块转换的一部分。

$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js

请注意，这假设您的入口点具有.js文件扩展名，如果是.jsx则您必须设置扩展程序类型。

通过将配置添加到package.json

，可以简化此配置

{
  babel: {
    presets: [ 'es2015', 'react' ]
  }
},
{ 
  browserify: {
    transform: 'babelify'
  }
}

Answer 2

没有捆绑，你不能直接将jsx包含在html中，但你可以创建没有jsx语法的组件（使用普通的js），它会起作用。

Answer 3

首先要注意的事项......

浏览器只能理解HTML，CSS和普通javascript。

如果要向浏览器提供JSX，则无法解析它。所以你需要使用一个包捆绑器，如webpack。这会将所有JSX，typescript，Sass文件转换为javascript（bundle.js）文件。您可以在.html文件中提供此bundle.js文件

在HTML中反应JS

3 个答案: