React.jsをAdonisJsで使用する方法

AdonisJsプロジェクトのフロントエンドでReact.jsを使用するにはどうすればよいですか？
私はnpm install reactと反応してインストールしようとしましたが、これは正しく動作すると思いました。私は、ファイルがこのコードでapp.js作られた：React.jsをAdonisJsで使用する方法

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'))

しかし、これは、私はもっと何をするか分からない、まったく機能していない「私はアドニスで反応を使用する方法について検索しましたが、私はdidnの何か興味深いものを見つける。

出典

2017-11-28 Tahm Kench

コンソールにエラーはありませんか？ – Nope

SyntaxError：期待される表現、この行に '）'が返されました（< h1 > hello world！< /h1>）または 'ReactDOM.render（< Index/> ...'はまったく問題を与えていませんか？ < /h1>） –

あなたは行きます。これらの構文エラーを修正してください。私は彼らが文字列である必要があると仮定します。また、 'ReactDOM.render（...）'の場合、[** Documentation **]（https://reactjs.org/docs/react- dom.html＃render）を使用します。 – Nope

この作業には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$/) 
    ] 
};

を次にフォルダに、あなたのルートディレクトリに自分のアプリを入れて反応させます-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'));

あなたはこの工業をエクスポートする必要はありません。この場合はexコンポーネントですが、コンポーネントファイルの最後にエクスポートのデフォルトComponentNameを使用する必要がある場合に備えてください。

次のステップは、あなたのルートファイルである（私はAdonisJS 4を使用しています）が、（（.njk、または.edge）バージョン3.x

その後

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

あなたのインデックスのために非常に似ているファイル資源の下で/ビュー）は、次のようなものになります。

<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や糸、でいくつかのNPM /パッケージをインストールし、別の端末ウィンドウまたはタブで実行するために覚えておく必要がを、

webpack -d --watch --progress

よろしくお願いいたします。

出典

2018-01-21 02:58:36

これは機能します。あなたは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';を使用することができます。

出典

2017-11-28 10:04:13 Kunukn

あなたの返信に感謝します。 import宣言はモジュールのトップレベルにしか表示されません –

それは正しいです。 importステートメントは、ファイルの先頭から開始する必要があります。 – Kunukn

デカップルで使用する場合は、Reactアプリケーションを作成し、そのビルドをAdonisパブリックフォルダにコピーしてください。

出典

2017-12-26 11:13:57

React.jsをAdonisJsで使用する方法

答えて

関連する問題