如何将 React.js 与 AdonisJs 一起使用答案

【问题标题】：How to use React.js with AdonisJs如何将 React.js 与 AdonisJs 一起使用
【发布时间】：2018-05-11 16:44:10
【问题描述】：

如何在我的 AdonisJs 项目的前端使用 React.js？
我试图用npm install react 安装反应我认为这会正常工作。我用这段代码创建了一个文件 app.js：

var React = require('react');
var ReactDOM = require('react-dom');

export default class Index extends Component {
  render() {
    return (< h1 > hello world! < /h1>)
  }
}
ReactDOM.render( < Index / > , document.getElementById('example'))

但这根本不起作用，我不知道该怎么做我已经搜索了如何在 Adonis 中使用 React 但我没有发现任何有趣的东西。

【问题讨论】：

控制台没有错误？和return (< h1 > hello world! < /h1>) 或ReactDOM.render( < Index / >... 根本没有给你任何问题？
SyntaxError: expected expression, got ')' in this line return ( hello world!)
你去。修复这些语法错误，你就可以开始了。我认为它们需要是字符串......同样在ReactDOM.render(...) 的情况下，请查看他们的Documentation 的用法。
谢谢老兄，但我如何导入反应？控制台告诉我：ReferenceError: 要求未定义，我也无法运行 npm run dev 或观看

标签： javascript node.js reactjs frameworks adonis.js

【解决方案1】：

我强烈建议您使用 WebPack 来完成这项任务。

在你的根目录中创建一个 webpack.config.js 文件：也许您的代码需要一些更改，但这就是想法：

const webpack = require('webpack');
   var CopyWebpackPlugin = require('copy-webpack-plugin');
   var HtmlWebpackPlugin = require('html-webpack-plugin');
   var ExtractTextPlugin = require('extract-text-webpack-plugin');
   var path = require('path');
   var pkgBower = require('./package.json');

module.exports = {
  target: "web",
  devtool: "source-map",
  node: {
    fs: "empty"
  },
  entry: {
      'app': path.join(__dirname, 'react-app', 'Index.jsx')
  },
  resolve: {
    modules: [__dirname, 'node_modules', 'bower_components'],
    extensions: ['*','.js','.jsx', '.es6.js']
  },
  output: {
    path: path.join(__dirname, 'public', 'src'),
    filename: '[name].js'
  },
  resolveLoader: {
     moduleExtensions: ["-loader"]
  },
  module: {
    loaders: [
      {
          test: /jquery\.flot\.resize\.js$/,
          loader: 'imports?this=>window'
      },
      {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader',
          query: {
              presets: ['es2015', 'react', 'stage-0'],
              compact: false
          }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
          test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
          loader: 'url?prefix=font/&limit=10000'
      },
      {
          test: /\.(png|jpg|gif)$/,
          loader: 'url?limit=10000'
      },
      {
          test: /\.scss$/,
          loader: 'style!css!sass?outputStyle=expanded'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new CopyWebpackPlugin([{
        from: 'img',
        to: 'img',
        context: path.join(__dirname, 'react-app')
    }, {
        from: 'server',
        to: 'server',
        context: path.join(__dirname, 'react-app')
    }, {
        from: 'fonts',
        to: 'fonts',
        context: path.join(__dirname, 'react-app')
    }]),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),

    new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/)
  ]
};

然后将你的应用程序放在你的根目录下的 react-app/ 文件夹中，你的组件可以进入该文件夹：

例如你的文件：[Index.jsx]

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends Component {
  render() {
    return (< h1 > hello world! < /h1>)
  }
}

ReactDOM.render( < Index / > , document.getElementById('example'));

在这种情况下，您不需要导出此 Index 组件，但如果您只需要在组件文件的末尾使用 export default ComponentName。

下一步是在您的路由文件中（我使用的是 AdonisJS 4），但与 3.x 版本非常相似

Route.any("*", ({ view, response }) => (
   view.render('index')
))

然后您的索引（.njk 或 .edge）文件（在资源/视图下）应如下所示：

<html>
   <head>
     <link rel="stylesheet" href="/src/styles.css">
      <script type="text/javascript" src="/src/app.js"></script>
   </head>

   <body>
      <div id="example"></div>
   </body>
</html>

-- 你需要用 npm 或 yarn 安装一些 npm/ 包，并记得在另一个终端窗口或选项卡中运行，

 webpack -d --watch --progress

问候。

【讨论】：

【解决方案2】：

这行得通。你错过了React.Component。

var React = require('react');
var ReactDOM = require('react-dom');

export default class Index extends React.Component {
  render() {
    return (< h1 > hello world! < /h1>)
  }
}
ReactDOM.render( < Index / > , document.getElementById('example'))

如果您想使用您的代码结构，也可以使用import React, {Component} from 'react';。

【讨论】：

感谢您的回复，但我在这里遇到了一个错误：导入声明可能只出现在模块的顶层
没错。导入语句应从文件顶部开始。

【解决方案3】：

为了解耦使用，只需构建您的 React 应用并将构建复制到 Adonis 公共文件夹。

【讨论】：