Reactを初めて使用しています。Reactはエラーなしでコンパイルされますが、ブラウザにコンポーネントは表示されません。
私はnpm install create-react-app
を使用して反応をインストールしました。 server.js
ファイルを作成しました。私のファイル構造はここにあります。
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();
どのように私は私のコードをクリアすることができます。私はどこでミスをしたのか分からなかった。助けて !! ありがとうございます。 :-)
コンソールにエラーがありますか? –
コンソールにエラーは表示されません! –
gitで自分のアプリを追加しようとします。リンクを残しておきます –