Reon.js를 AdonisJs와 함께 사용하는 방법

Reon.js를 내 AdonisJs 프로젝트의 프론트 엔드에서 어떻게 사용할 수 있습니까?
npm install react으로 반응을 시도했습니다. 올바르게 작동 할 것이라고 생각했습니다. 이 코드로 파일 app.js을했다 :Reon.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

콘솔에 오류가 있습니까? (< h1 > hello world! < /h1>) 또는'ReactDOM.render (< Index/> ...'는 전혀 문제가되지 않습니다.) – Nope

SyntaxError :이 줄에 구문 표현 오류가 있습니다. ')'가 반환됩니다 (< h1 > 안녕하세요! < /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'));

는이 산업을 수출 할 필요가 없습니다 구성 요소 파일의 끝에 기본 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 문은 파일의 맨 위에서 시작해야합니다. – Kunukn

분리 된 용도로는 React 앱을 빌드하고 빌드를 Adonis 공용 폴더에 복사하면됩니다.

출처

2017-12-26 11:13:57

Reon.js를 AdonisJs와 함께 사용하는 방법

답변

관련 문제