如何使用反应需要语法？

我看到了许多用于var React = require('react')语法的反应示例。当我尝试和使用这个时，我得到“要求没有定义”。如何使用和设置我的静态项目以使用require语法？如何使用反应需要语法？

更新

实际上我正在寻找一个的WebPack/browserify配置文件，所以我可以开始使用快速反应和CommonJS的。我只写了反应应用程序，没有所谓的构建工具

来源

2015-10-20 Connor Leech

如果您使用“require”，这是不反应commonjs模块模式。你需要使用webpack，或其他commonjs模块加载器，将您的模块翻译成浏览器友好代码 –

Browserify是另一种（perhpas更多初学者友好）替代http://browserify.org/ – hampusohlsson

请参阅编辑。真的我有静态文件，并想知道如何使用'index.html' –

require是不是一个React API，也不是一个本地浏览器API（现在）。

需求来自commonjs，并且最着名的是在node.js中实现，如果您已经使用了node.js，那么您将会看到无处不在。由于require在节点中的普及，人们已经构建了将用nodejs风格编写的代码转换为可在浏览器上使用的工具。

有几个好处，使用要求，它可以帮助你保持你的代码的模块化，并且针对一些项目，它允许你写的同构代码（可以以最小的变化都运行在客户端和服务器）

为了使用require，您需要使用诸如webpack或browserify之类的工具，我将以browserify为例。

首先创建一个 'index.js'

require('./app.js'); 
alert('index works');

然后创建一个app.js

alert('app works');

下一个安装browserify CLI

npm install -g browserify

而且在调用这个命令你外壳

browserify index.js > bundle.js

现在你将有一个bundle.js，在HTML页面中创建一个

<script src="bundle.js"></script>

，你应该看到这两个警报运行

现在你可以继续代码，你可以添加你的反应通过执行代码

npm install react --save

，然后要求在其app.js例如

var React = require('react'); 

React.createClass({ 
    render: function(){/*Blah Blah Blah*/} 
})

来源

2015-10-21 05:55:43

为项目设置webpack/browserify好吧感谢您的解释。你有在项目中使用的示例browserify配置文件吗？ –

Browserify通常与gulp一起使用https://viget.com/extend/gulp-browserify-starter-faq和webpack与配置文件一起使用https://robots.thoughtbot.com/setting-up-webpack-for-react-和热模块更换 –

好的谢谢你。我在这里使用webpack建立起始模板：https：//github.com/cleechtech/react-static-starter –

BTW，如果您正在使用的WebPack您可以添加到您的webpack.config.js配置文件以下行，无需使用需要在文件中声明：

plugins: [ 
      new webpack.ProvidePlugin({ 
       'React':  'react', 
       '$':   'jquery', 
       '_':   'lodash', 
       'ReactDOM': 'react-dom', 
       'cssModule': 'react-css-modules', 
       'Promise': 'bluebird' 
      }) 

     ],

这是当然的不是所有的开发人员喜欢它，但它是很好的知道:)

来源

2016-07-19 10:08:17 danikoren

如何使用反应需要语法？

回答

相关问题