在html頁面中看不到任何組件，對js做出反應
[英]No component is visible in html page, react js
問題描述
我是react的初學者，我嘗試創建一個網頁，為此，我在此鏈接之后創建了一個新的react應用https://github.com/facebookincubator/create-react-app 。
還通過以下鏈接安裝了webpack：
https://www.davidmeents.com/blog/journey-into-react-part-2-creating-your-first-react-app/
首先安裝反應
C:\Users\siddhi jambhale\Desktop\react-demo>npm install react --save
my-app@0.1.0 C:\Users\siddhi jambhale\Desktop\react-demo
`-- react@15.5.4
然后安裝react-demo
C:\Users\siddhi jambhale\Desktop\react-demo>npm install react-dom --save
my-app@0.1.0 C:\Users\siddhi jambhale\Desktop\react-demo
`-- react-dom@15.5.4
然后創建webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: "./src/index.js",
module: {
loaders: [
{
test: /\.js|.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2'],
plugins: ['react-html-attrs', 'transform-class-properties',
'transform-decorators-legacy']
}
}
]
},
output: {
path: __dirname,
filename: "bundle.js"
}
};
然后安裝webpack，我得到這樣的輸出：
C:\Users\siddhi jambhale\Desktop\react-demo>npm install webpack webpack-dev-server --save-dev
my-app@0.1.0 C:\Users\siddhi jambhale\Desktop\react-demo
+-- webpack@2.5.1
| +-- acorn@5.0.3
| +-- acorn-dynamic-import@2.0.2
| | `-- acorn@4.0.11
| +-- ajv@4.11.8
| | +-- co@4.6.0
| | `-- json-stable-stringify@1.0.1
| | `-- jsonify@0.0.0
| +-- ajv-keywords@1.5.1
| +-- async@2.4.0
| | `-- lodash@4.17.4
| +-- enhanced-resolve@3.1.0
| | `-- graceful-fs@4.1.11
| +-- interpret@1.0.3
| +-- json-loader@0.5.4
| +-- json5@0.5.1
| +-- loader-runner@2.3.0
| +-- loader-utils@0.2.17
| | +-- big.js@3.1.3
| | `-- emojis-list@2.1.0
| +-- memory-fs@0.4.1
| | +-- errno@0.1.4
| | | `-- prr@0.0.0
| | `-- readable-stream@2.2.9
| | +-- buffer-shims@1.0.0
| | +-- core-util-is@1.0.2
| | +-- isarray@1.0.0
| | +-- process-nextick-args@1.0.7
| | +-- string_decoder@1.0.0
| | `-- util-deprecate@1.0.2
| +-- mkdirp@0.5.1
| | `-- minimist@0.0.8
| +-- node-libs-browser@2.0.0
| | +-- assert@1.4.1
| | +-- browserify-zlib@0.1.4
| | | `-- pako@0.2.9
| | +-- buffer@4.9.1
| | | +-- base64-js@1.2.0
| | | `-- ieee754@1.1.8
| | +-- console-browserify@1.1.0
| | | `-- date-now@0.1.4
| | +-- constants-browserify@1.0.0
| | +-- crypto-browserify@3.11.0
| | | +-- browserify-cipher@1.0.0
| | | | +-- browserify-aes@1.0.6
| | | | | `-- buffer-xor@1.0.3
| | | | +-- browserify-des@1.0.0
| | | | | `-- des.js@1.0.0
| | | | `-- evp_bytestokey@1.0.0
| | | +-- browserify-sign@4.0.4
| | | | +-- bn.js@4.11.6
| | | | +-- browserify-rsa@4.0.1
| | | | +-- elliptic@6.4.0
| | | | | +-- brorand@1.1.0
| | | | | +-- hash.js@1.0.3
| | | | | +-- hmac-drbg@1.0.1
| | | | | `-- minimalistic-crypto-utils@1.0.1
| | | | `-- parse-asn1@5.1.0
| | | | `-- asn1.js@4.9.1
| | | +-- create-ecdh@4.0.0
| | | +-- create-hash@1.1.3
| | | | +-- cipher-base@1.0.3
| | | | +-- ripemd160@2.0.1
| | | | | `-- hash-base@2.0.2
| | | | `-- sha.js@2.4.8
| | | +-- create-hmac@1.1.6
| | | | `-- safe-buffer@5.0.1
| | | +-- diffie-hellman@5.0.2
| | | | `-- miller-rabin@4.0.0
| | | +-- pbkdf2@3.0.12
| | | +-- public-encrypt@4.0.0
| | | `-- randombytes@2.0.3
| | +-- domain-browser@1.1.7
| | +-- events@1.1.1
| | +-- https-browserify@0.0.1
| | +-- os-browserify@0.2.1
| | +-- path-browserify@0.0.0
| | +-- process@0.11.10
| | +-- punycode@1.4.1
| | +-- querystring-es3@0.2.1
| | +-- stream-browserify@2.0.1
| | +-- stream-http@2.7.1
| | | +-- builtin-status-codes@3.0.0
| | | +-- to-arraybuffer@1.0.1
| | | `-- xtend@4.0.1
| | +-- string_decoder@0.10.31
| | +-- timers-browserify@2.0.2
| | +-- tty-browserify@0.0.0
| | +-- url@0.11.0
| | | +-- punycode@1.3.2
| | | `-- querystring@0.2.0
| | +-- util@0.10.3
| | | `-- inherits@2.0.1
| | `-- vm-browserify@0.0.4
| | `-- indexof@0.0.1
| +-- source-map@0.5.6
| +-- supports-color@3.2.3
| | `-- has-flag@1.0.0
| +-- tapable@0.2.6
| +-- uglify-js@2.8.23
| | +-- uglify-to-browserify@1.0.2
| | `-- yargs@3.10.0
| | +-- camelcase@1.2.1
| | +-- cliui@2.1.0
| | | +-- center-align@0.1.3
| | | | +-- align-text@0.1.4
| | | | | +-- longest@1.0.1
| | | | | `-- repeat-string@1.6.1
| | | | `-- lazy-cache@1.0.4
| | | +-- right-align@0.1.3
| | | `-- wordwrap@0.0.2
| | `-- window-size@0.1.0
| +-- watchpack@1.3.1
| +-- webpack-sources@0.2.3
| | `-- source-list-map@1.1.2
| `-- yargs@6.6.0
| +-- camelcase@3.0.0
| +-- cliui@3.2.0
| | `-- wrap-ansi@2.1.0
| +-- decamelize@1.2.0
| +-- get-caller-file@1.0.2
| +-- os-locale@1.4.0
| | `-- lcid@1.0.0
| | `-- invert-kv@1.0.0
| +-- read-pkg-up@1.0.1
| | +-- find-up@1.1.2
| | | `-- path-exists@2.1.0
| | `-- read-pkg@1.1.0
| | +-- load-json-file@1.1.0
| | | +-- parse-json@2.2.0
| | | | `-- error-ex@1.3.1
| | | | `-- is-arrayish@0.2.1
| | | +-- pify@2.3.0
| | | `-- strip-bom@2.0.0
| | | `-- is-utf8@0.2.1
| | +-- normalize-package-data@2.3.8
| | | +-- hosted-git-info@2.4.2
| | | +-- is-builtin-module@1.0.0
| | | | `-- builtin-modules@1.1.1
| | | +-- semver@5.3.0
| | | `-- validate-npm-package-license@3.0.1
| | | +-- spdx-correct@1.0.2
| | | | `-- spdx-license-ids@1.2.2
| | | `-- spdx-expression-parse@1.0.4
| | `-- path-type@1.1.0
| +-- require-directory@2.1.1
| +-- require-main-filename@1.0.1
| +-- set-blocking@2.0.0
| +-- string-width@1.0.2
| | +-- code-point-at@1.1.0
| | `-- is-fullwidth-code-point@1.0.0
| | `-- number-is-nan@1.0.1
| +-- which-module@1.0.0
| +-- y18n@3.2.1
| `-- yargs-parser@4.2.1
| `-- camelcase@3.0.0
`-- webpack-dev-server@2.4.5
+-- ansi-html@0.0.7
+-- chokidar@1.7.0
| +-- anymatch@1.3.0
| | `-- arrify@1.0.1
| +-- async-each@1.0.1
| +-- glob-parent@2.0.0
| +-- inherits@2.0.3
| +-- is-binary-path@1.0.1
| | `-- binary-extensions@1.8.0
| +-- is-glob@2.0.1
| | `-- is-extglob@1.0.0
| +-- path-is-absolute@1.0.1
| `-- readdirp@2.1.0
| +-- minimatch@3.0.4
| | `-- brace-expansion@1.1.7
| | +-- balanced-match@0.4.2
| | `-- concat-map@0.0.1
| `-- set-immediate-shim@1.0.1
+-- compression@1.6.2
| +-- accepts@1.3.3
| | `-- negotiator@0.6.1
| +-- bytes@2.3.0
| +-- compressible@2.0.10
| | `-- mime-db@1.27.0
| +-- debug@2.2.0
| | `-- ms@0.7.1
| +-- on-headers@1.0.1
| `-- vary@1.1.1
+-- connect-history-api-fallback@1.3.0
+-- express@4.15.2
| +-- array-flatten@1.1.1
| +-- content-disposition@0.5.2
| +-- content-type@1.0.2
| +-- cookie@0.3.1
| +-- cookie-signature@1.0.6
| +-- debug@2.6.1
| | `-- ms@0.7.2
| +-- depd@1.1.0
| +-- encodeurl@1.0.1
| +-- escape-html@1.0.3
| +-- etag@1.8.0
| +-- finalhandler@1.0.2
| | +-- debug@2.6.4
| | | `-- ms@0.7.3
| | `-- unpipe@1.0.0
| +-- fresh@0.5.0
| +-- merge-descriptors@1.0.1
| +-- methods@1.1.2
| +-- on-finished@2.3.0
| | `-- ee-first@1.1.1
| +-- parseurl@1.3.1
| +-- path-to-regexp@0.1.7
| +-- proxy-addr@1.1.4
| | +-- forwarded@0.1.0
| | `-- ipaddr.js@1.3.0
| +-- qs@6.4.0
| +-- range-parser@1.2.0
| +-- send@0.15.1
| | +-- debug@2.6.1
| | +-- destroy@1.0.4
| | +-- http-errors@1.6.1
| | `-- ms@0.7.2
| +-- serve-static@1.12.1
| +-- setprototypeof@1.0.3
| +-- statuses@1.3.1
| +-- type-is@1.6.15
| | `-- media-typer@0.3.0
| `-- utils-merge@1.0.0
+-- html-entities@1.2.1
+-- http-proxy-middleware@0.17.4
| +-- http-proxy@1.16.2
| | +-- eventemitter3@1.2.0
| | `-- requires-port@1.0.0
| +-- is-glob@3.1.0
| | `-- is-extglob@2.1.1
| `-- micromatch@2.3.11
| +-- arr-diff@2.0.0
| | `-- arr-flatten@1.0.3
| +-- array-unique@0.2.1
| +-- braces@1.8.5
| | +-- expand-range@1.8.2
| | | `-- fill-range@2.2.3
| | | +-- is-number@2.1.0
| | | +-- isobject@2.1.0
| | | `-- randomatic@1.1.6
| | +-- preserve@0.2.0
| | `-- repeat-element@1.1.2
| +-- expand-brackets@0.1.5
| | `-- is-posix-bracket@0.1.1
| +-- extglob@0.3.2
| +-- filename-regex@2.0.1
| +-- kind-of@3.2.0
| | `-- is-buffer@1.1.5
| +-- normalize-path@2.1.1
| | `-- remove-trailing-separator@1.0.1
| +-- object.omit@2.0.1
| | +-- for-own@0.1.5
| | | `-- for-in@1.0.2
| | `-- is-extendable@0.1.1
| +-- parse-glob@3.0.4
| | +-- glob-base@0.3.0
| | `-- is-dotfile@1.0.2
| `-- regex-cache@0.4.3
| +-- is-equal-shallow@0.1.3
| `-- is-primitive@2.0.0
+-- opn@4.0.2
| `-- pinkie-promise@2.0.1
| `-- pinkie@2.0.4
+-- portfinder@1.0.13
| `-- async@1.5.2
+-- serve-index@1.8.0
| +-- batch@0.5.3
| +-- http-errors@1.5.1
| | `-- setprototypeof@1.0.2
| `-- mime-types@2.1.15
+-- sockjs@0.3.18
| +-- faye-websocket@0.10.0
| | `-- websocket-driver@0.6.5
| | `-- websocket-extensions@0.1.1
| `-- uuid@2.0.3
+-- sockjs-client@1.1.2
| +-- eventsource@0.1.6
| | `-- original@1.0.0
| | `-- url-parse@1.0.5
| | `-- querystringify@0.0.4
| +-- faye-websocket@0.11.1
| +-- json3@3.3.2
| `-- url-parse@1.1.9
| `-- querystringify@1.0.0
+-- spdy@3.4.4
| +-- handle-thing@1.2.5
| +-- http-deceiver@1.2.7
| +-- select-hose@2.0.0
| `-- spdy-transport@2.0.18
| +-- hpack.js@2.1.6
| +-- obuf@1.1.1
| `-- wbuf@1.7.2
| `-- minimalistic-assert@1.0.0
+-- strip-ansi@3.0.1
| `-- ansi-regex@2.1.1
`-- webpack-dev-middleware@1.10.2
`-- mime@1.3.4
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
但是我看不到bundle.js生成。
而且，如果我運行index.html，則只能看到空白頁，什么也看不到。
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
<script src="/my-app/src/App.js"></script>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
ReactDOM.render( <App />, document.getElementById('root') )
export default App;
的package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react-scripts": "0.9.5",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"dev": "webpack-dev-server --inline --hot",
"eject": "react-scripts eject"
}
}
怎么了 請幫忙。 謝謝..
編輯：我試圖運行webpack我收到錯誤：
C:\Users\siddhi jambhale\Desktop\react-demo>npm run webpack
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! missing script: webpack
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\siddhi jambhale\AppData\Roaming\npm-cache\_logs\2017-05-13T05_35_36_577Z-debug.log
當我安裝或運行webpack時，bundle.js並未創建。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
1 個解決方案
解決方案1
0 2017-05-13 05:31:30
您忘記將bundle.js文件包含在index.html ，應這樣編寫：
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
原因：檢查webpack config file ：
output: {
path: __dirname,
filename: "bundle.js"
}
當您運行webpack ，它將創建一個包含所有代碼的輸出文件bundle.js ，您需要將該文件包含在index.html 。
React Js 組件構造函數和可見狀態
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.