如何在 AdonisJs 中使用 React.js

Question

如何在我的 AdonisJs 项目的前端使用 React.js？
我尝试安装 react with 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

这行得通。您缺少 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 2

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

Answer 3

我强烈建议您使用 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）文件（在 resources/views 下）应该如下所示：

<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/ 包，并记得在另一个终端 window 或选项卡中运行，

 webpack -d --watch --progress

此致。

如何在 AdonisJs 中使用 React.js

How to use React.js with AdonisJs

javascript

frameworks

node.js

reactjs

adonis.js