Node.js React编译时没有错误,但浏览器上没有显示任何组件
我是新来的 我已使用Node.js React编译时没有错误,但浏览器上没有显示任何组件,node.js,reactjs,express,webpack,react-redux,Node.js,Reactjs,Express,Webpack,React Redux,我是新来的 我已使用npm安装创建React应用程序安装React。 我已经创建了一个server.js文件,我的文件结构在这里 package.json server.js文件 Webpack.config.js文件 在运行时npm运行启动。它侦听足够的端口并编译所有内容,没有错误。但是,在浏览器上,它不显示React的任何组件。它只是运行,什么也不做 src/index.js文件 从“React”导入React; 从“react dom”导入react dom; 从“./registerS
npm安装创建React应用程序安装React。
我已经创建了一个server.js
文件,我的文件结构在这里
package.json
server.js文件
Webpack.config.js文件
在运行时npm运行启动
。它侦听足够的端口并编译所有内容,没有错误。但是,在浏览器上,它不显示React的任何组件。它只是运行,什么也不做
src/index.js文件
从“React”导入React;
从“react dom”导入react dom;
从“./registerServiceWorker”导入registerServiceWorker;
从“react router dom”导入{BrowserRouter,Link,Route}
从'react redux'导入{Provider};
从“redux thunk”导入thunk;
从“redux”导入{createStore,applyMiddleware};
从“./App”导入应用程序;
从“/问候语”导入问候语;
从“./signup/signup”导入SignupPage;
const stores=createStore(
(state={}=>state,
applyMiddleware(thunk)
);
ReactDOM.render((
),document.getElementById('app');
registerServiceWorker();
如何清除我的代码。我不知道我在哪里犯了错误。帮助我!!
提前感谢。:-) 我想你对create-react-app
的功能和工作原理感到困惑。从文档:
您不需要安装或配置Webpack或Babel等工具。
它们是预配置和隐藏的,以便您可以专注于代码
只要创建一个项目,你就可以开始了
在引擎盖下,它用webpack构建您的项目。
因此,如果您想修改/添加网页包,您应该查看npm run eject
命令
运行npm run eject将所有配置文件和可传递的依赖项(Webpack、Babel、ESLint等)复制到您的项目中,这样您就可以完全控制它们。像npm start和npm run build这样的命令仍然可以工作,但它们会指向复制的脚本,以便您可以调整它们。在这一点上,你只能靠自己了
看来你不需要自己的webpack.config.js
文件了。此外,如果您希望webpack development server将您的API请求代理到API服务器,则可以添加下一个:“代理”:http://localhost:3001/“
放入package.json
文件,以允许网页开发服务器
将请求重定向到服务器
希望它有意义控制台中有错误吗?控制台显示没有错误!!我会尝试在git中添加我的应用程序,我会留下一个链接。你应该在浏览器中打开开发者工具(我推荐Chrome),看看浏览器端发生了什么。我已使用opera浏览器的React开发者工具扩展检查React发生了什么。它说没有任何东西与反应有关。是的,非常感谢。我走错了路。我在YouTube上看了一个老教程。你说得对,我对create react app
感到困惑。我会学得更好。很好的一天!!
{
"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"
}
}
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!'));
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']
}
}
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();