2017-12-30 70 views
1

Reactを初めて使用しています。Reactはエラーなしでコンパイルされますが、ブラウザにコンポーネントは表示されません。

私はnpm install create-react-appを使用して反応をインストールしました。 server.jsファイルを作成しました。私のファイル構造はここにあります。

enter image description here

package.json

{ 
     "name": "my-app", 
     "version": "0.1.0", 
     "private": true, 
     "dependencies": { 
     "axios": "^0.17.1", 
     "babel-loader": "^7.1.2", 
     "body-parser": "^1.18.2", 
     "classnames": "^2.2.5", 
     "express": "latest", 
     "lodash": "latest", 
     "morgan": "^1.9.0", 
     "prop-types": "latest", 
     "react": "^16.2.0", 
     "react-dom": "^16.2.0", 
     "react-router": "^4.2.0", 
     "react-router-dom": "^4.2.2", 
     "react-scripts": "1.0.17", 
     "validator": "^9.2.0", 
     "webpack-hot-middleware": "^2.21.0", 
     "html-webpack-plugin": "latest" 
     }, 
     "scripts": { 
     "start": "nodemon --watch server --exec babel-node -- server.js", 
     "start-dev": "node server.js", 
     "build": "react-scripts build", 
     "test": "react-scripts test --env=jsdom", 
     "eject": "react-scripts eject" 
     }, 
     "devDependencies": { 
     "babel-cli": "^6.26.0", 
     "babel-preset-env": "^1.6.1", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-react-hmre": "^1.1.1", 
     "nstall": "^0.2.0", 
     "react-hot-loader": "^3.1.3", 
     "react-redux": "^5.0.6", 
     "redux": "^3.7.2", 
     "redux-thunk": "^2.2.0", 
     "webpack": "^3.10.0", 
     "webpack-dev-middleware": "^2.0.3" 
     } 
    } 

server.js

import path from "path"; 

import express from 'express'; 
import webpack from 'webpack'; 
import webpackMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import webpackConfig from './webpack.config.dev'; 
import bodyParser from 'body-parser'; 

import users from './src/Actions/users'; 

const app = express(); 

app.use(bodyParser.json()); 

app.use('/api/users',users); 

const compiler = webpack(webpackConfig); 

app.use(webpackMiddleware(compiler, { 
    hot:true, 
    publicPath: webpackConfig.output.publicPath, 
    noInfo: true 
})); 
app.use(webpackHotMiddleware(compiler)); 

app.use(express.static('public')); 

app.get('*',(req,res)=>{ 
    res.sendFile(path.join(__dirname,'./public/index.html')); 
}); 
app.listen(5001,() => console.log('Example app listening on port 5001!')); 
ファイル

Webpack.config.jsはnpm run startを実行するには

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    devtool:'eval-source-map', 

    entry: [ 
     'webpack-hot-middleware/', 
     path.resolve(__dirname, './src/index.js') 
    ], 

    output:{ 
     path: path.join(__dirname, 'public'), 
     filename: "[name].bundle.js", 
     publicPath: '/' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ], 
    devServer: { 
     hot: true, 
     inline: false, 
     contentBase: "./" 
    }, 
    module:{ 
     rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loaders: [ 
       'react-hot-loader/webpack', 
       'babel-loader?' + 
       'babelrc=false,' + 
       'presets[]=es2015,' + 
       'presets[]=react' 
      ] 
     }] 
    }, 
    resolve:{ 
     extensions:['.js'] 
    } 
} 

を提出します。それは十分なポートをリッスンし、エラーなしですべてをコンパイルします。しかし、ブラウザ上にはReactのコンポーネントは表示されません。それは単に実行し、何もしません。

のsrc/index.jsファイル

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 
import { BrowserRouter, Link, Route } from 'react-router-dom' 
import {Provider} from 'react-redux'; 
import thunk from 'redux-thunk'; 
import { createStore, applyMiddleware } from 'redux'; 

import App from './App'; 
import Greet from './Greetings'; 
import SignupPage from './signup/signup'; 

const stores = createStore(
    (state = {}) => state, 
    applyMiddleware(thunk) 
); 

ReactDOM.render((
    <Provider store={stores}> 
    <BrowserRouter > 
     <div> 
      <Route component={App}> 
      </Route> 
      <div id={'jumbo'} className='container css'> 
       <Route exact path='/' component={Greet}/> 
       <Route path='/signup' component={SignupPage}/> 
      </div> 
     </div> 
    </BrowserRouter> 
    </Provider> 
), document.getElementById('app')); 
registerServiceWorker(); 

どのように私は私のコードをクリアすることができます。私はどこでミスをしたのか分からなかった。助けて !! ありがとうございます。 :-)

+0

コンソールにエラーがありますか? –

+0

コンソールにエラーは表示されません! –

+0

gitで自分のアプリを追加しようとします。リンクを残しておきます –

答えて

2

あなたはcreate-react-appとは何か、それがどのように動作するのか混乱していると思います。 create-react-appからdoc:

WebpackやBabelなどのツールをインストールまたは設定する必要はありません。 これらはあらかじめ設定されており、コードに集中できるように隠されています。

プロジェクトを作成するだけでいいです。

フードの下では、webpackでプロジェクトをビルドします。 webpackを変更/追加する場合は、npm run ejectコマンドを参照してください。

npm run ejectを実行すると、すべての設定ファイルと推移的な依存関係(Webpack、Babel、ESLintなど)がプロジェクトに完全にコピーされ、完全に制御できます。 npm startやnpm run buildのようなコマンドは引き続き動作しますが、コピーされたスクリプトを指し示すので、それらを調整することができます。この時点で、あなたはあなた自身でいる。

あなた自身がwebpack.config.jsファイルを必要としないようです。さらに、Webpack開発サーバープロキシにAPIリクエストをAPIサーバーに送信したい場合は、webpack-dev-serverがサーバーにリダイレクトできるように、package.jsonファイルに次の:"proxy": "http://localhost:3001/"を追加することができます。

希望しますか?

+0

はい、**ありがとうございます**。私は間違った方向に行った。私はYouTubeで古いチュートリアルを見てきました。あなたは私が 'create-react-app'と混乱しているのを私は正しく知っています。私はより良く学ぶでしょう。良い一日 !! –

関連する問題