Question

如何在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但是我找不到任何有趣的东西。

Answer 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

问候。

Answer 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';。

Answer 3

对于解耦使用，只需构建您的React应用程序并将构建复制到Adonis公用文件夹。

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

3 个答案: