反応アプリケーションのためのノードの快適なAPI

反応アプリケーションのためにノードに安らかなAPIを作成したいと思います。私のアプリケーションでは、webpack、babel、およびjsを使用しています。そのため、package.jsonのエントリポイントはindex.js（つまりwebpackの出力）です。だから私はノードを使用して同じプロジェクトで安らかなAPIを作成する方法を理解することができません。コードはここにあります。反応アプリケーションのためのノードの快適なAPI

webpack.config.js

var config = { 
    entry: './main.js', 

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    } 
} 

module.exports = config;

package.json

{ 
    "name": "reactmmpl", 
    "version": "1.0.0", 
    "description": "mmpl implementation with react js", 
    "main": "index.js", 
    "scripts": { 
    "test": "testmmpl", 
    "start": "webpack-dev-server --hot" 
    }, 
    "keywords": [ 
    "mmpl", 
    "meritain", 
    "mobile" 
    ], 
    "author": "suyesh", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "express": "^4.14.0", 
    "react": "^15.3.0", 
    "react-dom": "^15.3.0", 
    "react-router": "^2.6.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 
import Login from "./lib/Login.jsx"; 


ReactDOM.render((
    <Router history = {browserHistory}> 
     <Route path = "/" component = {App}> 
     <IndexRoute component = {Login} /> 
     </Route> 
    </Router> 

), document.getElementById('app'));

App.jsx

import React from 'react'; 
import Header from "./lib/Header.jsx"; 




class App extends React.Component { 
    render() { 
     return (
     <div> 
      <div className="main-container" id="loginPage"> 
       <Header/> 
       {this.props.children} 
      </div> 
     </div> 
    ); 
    } 
} 



export default App;

index.htmlを

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>React App</title> 
     <link rel="stylesheet" type="text/css" href="/public/css/headerFooter.css" /> 
     <link rel="stylesheet" type="text/css" href="/public/css/content.css" /> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "index.js"></script> 
    </body> 

</html>

出典

2016-08-19 suyesh

なぜフロントエンドプロジェクトでバックエンドコードを実行しますか？私はそれがより便利かもしれないが、私にとってはうんざりしていることを理解しています。それを別のレポに投げ込んで、答えを – PositiveGuy

と：

ここ

クライアント・サーバーの相互作用を示す良い例です。 APIのために。したがって、ポート3000にエクスプレスサーバーがあり、クライアントアプリケーションサーバーが9000にあるとすると、このようなプロキシ要求があります。

import webpack from 'webpack'; 
import WebpackDevServer from 'webpack-dev-server'; 
import config from '../webpack.config.dev.js'; 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    contentBase: 'public/', 
    hot: true, 
    inline: true, 
    quiet: false, 
    historyApiFallback: true, 
    proxy: { 
    '*' : 'http://localhost:3000' 
    } 
}).listen(9000, 'localhost', (err, result) => { 
    if (err) { 
    return console.log(err); 
    } 
    console.log('Listening at http://localhost:9000/'); 
});

これは私のプロジェクトの1つで、これは開発ビルド用の「ミドルウェア」ファイルです。この設定でapiのルートがこのように見える場合は、http://localhost:3000/api/usersユーザーを取得するajax URLは/users

となります。

fetch('/api/users', optionsObject);

出典

2016-08-31 13:33:42

あなたはRESTfulなAPIを実装するための2つのオプションがあります：

フロントエンドオプション：フロントエンドを使用してライブラリのようなreact-router
バックエンドのオプション：直接あなたの枠組みの中で、あなたの予想される応答を書き、例えば、クライアント側のコードからexpress

出典

2016-08-19 09:28:57 FredWe

に、AJAXは、RESTfulなAPI呼び出しを行うために使用されるだろう。 AGAXのうちの醜さのいくつかを取るの素晴らしいlibにあります：

https://github.com/visionmedia/superagent

同じコードの多くを共有し、あなたはおそらく、クライアント対サーバ側に別々のエントリポイントを持ってしようとしている場合でも

側。 Expressフレームワークは、サーバーサイドのコードでセットアップされます。この設定の良い例は、定型以下である：あなたは、クライアントアプリケーションのためのWebPACK-devのサーバーを持つ2台のサーバー、いずれかを実行することができます https://github.com/erikras/react-redux-universal-hot-example

出典

2016-08-22 08:14:52 Derric

に送ってください。私は安らかなAPIを呼び出すことができますしかし、あなたが私を参照してくださいpackage.json反応が1つのポートで実行されていると穏やかなAPIを作成するためにどのように私は疑問を明示的に構成する必要があります。 – suyesh

反応アプリケーションのためのノードの快適なAPI

答えて

関連する問題