전자에서 React & Flux를 사용하기위한 최소 요구 사항은 무엇입니까?

최소한의 도구로 반응 애플리케이션을 구성하려고합니다. 유래는 늘 내가 CDN 스크립트가 밖으로 태그 당겨 경우전자에서 React & Flux를 사용하기위한 최소 요구 사항은 무엇입니까?

<!DOCTYPE html> 
<html lang="en"> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title text="">Electron/Reactjs</title> 
    <script src="https://fbme/react-15.1.0.js"></script> 
    <script src="https://fbme/react-dom-15.1.0.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    </head> 
    <body> 

    <h1> Hello electron root</h1> 
    <div id="example"></div> 

    <script type="text/babel"> 
     ReactDOM.render(
     <h1>Hello, react!</h1>, 
     document.getElementById('example') 
    ); 
    </script> 

    </body> 
</html>

가 아직 안녕하세요, 반응하는 fb.me을 수 있기 때문에에있는 링크 스크립트 반응 잘못 참고 : 내 전자는 다음과 같이 '안녕하세요 반응'로드 로드되지 않으며 dev 콘솔이나 터미널에 오류가 없습니다. 여기 내 패키지 JSON 내 웹팩 (루트 디렉토리 모두)

패키지 JSON

{ 
    "name": "my-electron-app", 
    "version": "1.0.0", 
    "description": "My Template Electron application", 
    "main": "main.js", 
    "scripts": { 
    "start": "electron ." 
    }, 
    "babel": { 
    "presets": ["es2015", "stage-0", "react"] 
    }, 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/jtlindsey/<project-name>.git" 
    }, 
    "author": "J Travis Lindsey", 
    "license": "Apache-2.0", 
    "bugs": "https://github.com/jtlindsey/<project-name>/issues", 
    "homepage": "https://github.com/jtlindsey/<project-name>#readme", 
    "devDependencies": { 
    "electron-packager": "^7.1.0", 
    "electron-prebuilt": "^1.2.5", 
    "express": "^4.14.0", 
    "file-loader": "^0.9.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-hot-middleware": "^2.12.0", 
    "webpack-target-electron-renderer": "^0.4.0" 
    }, 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "flux": "^2.1.1", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0" 
    } 
}

webpack.config.js

module.exports = { 
    context: __dirname + '/, 
    entry: [ 
    'babel-polyfill', 
    './index.js', 
    html: "./index.html", 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
     } 
    ] 
    }, 
    output: { 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
    plugins: [] 
};

은 package.json이 더 많이 가지고입니다 나는 이해하지 못하는 것들 때문에 사용하고있다. 나는 react electron template을 보았지만 반응 플럭스와 전자를 사용하는 데 필요한 것이 무엇인지, 그리고 생산성, 신속한 개발, CSS 등을 위해 무엇이 필요한지에 대한 충분한 문서가 없다.

누군가가 React와 Flux와 함께 사용할 기본 전자 응용 프로그램에 추가 할 것은 무엇입니까? 어쩌면 스타일이없는 날씬한 세상일까요?

저는 반응 형 웹 앱을 사용할 수있었습니다. 전자 응용 프로그램을 만들 수있었습니다. 하지만 저는 웹 앱과 같이 CDN이 아닌 npm에서 반응과 플럭스를 사용하여 전자 앱을 만들려고 노력하고 있습니다. 나는 무엇을 놓치고 있습니까?

출처

2016-07-01 jtlindsey

가장 간단한 React 애플리케이션에 필요한 모든 것입니다.

<div id="app"></div> 
<script src="https://fbme/react-15.1.0.js"></script> 
<script src="https://fbme/react-dom-15.1.0.js"></script> 
<script> 
    ReactDOM.render(
    React.createElement('h1', null, 'Hello world'), 
    document.getElementById('app'); 
); 
</script>

일단 작동하면 필요한 나머지 부분을 통합하기 시작하십시오.

스크립트 태그를 별도의 파일로 이동하고 Webpack을 사용하여 시작하십시오.

// src/app.js 
ReactDOM.render(
    React.createElement('h1', null, 'Hello world'), 
    document.getElementById('app'); 
);

다음과 같은 Webpack 구성이 필요합니다.

// webpack.config.js 
module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    } 
};

실행 webpack은 번들을 구축하고 index.html 파일에 bundle.js을 참조하는 스크립트 태그를 추가 할 수 있습니다.

일단 작동하면 바벨 변환을 작동시키는 데 집중할 수 있습니다. 바벨 로더로 Webpack 구성을 보강해야합니다. bundle.js는 전자에서 실행 할 준비가 있도록 변환됩니다 JSX와 ES6과 바벨을 사용하도록 app.js 파일을 변환 할 수 있어야한다이 시점에서

module.exports = { 
    entry: './src/app.js', 
    // ... 
    module: { 
    loaders: [ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { presets: ['es2015', 'react'] } 
    ] 
    } 
};

출처

2016-07-01 11:08:47

전자에서 React & Flux를 사용하기위한 최소 요구 사항은 무엇입니까?

답변

관련 문제