react初接触

第一步：安装node
第二部：npm init

D:ceshidome>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (dome) dome
version: (1.0.0)
description:
entry point: (index.js) index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:ceshidomepackage.json:

{
"name": "dome",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this OK? (yes) y

第三步：npm install --save react react-dom

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN dome@1.0.0 No description
npm WARN dome@1.0.0 No repository field.

• react@16.8.6
• react-dom@16.8.6
  added 8 packages from 3 contributors and audited 26 packages in 3.243s
  found 0 vulnerabilities

第四步：npm install --save-dev @babel/preset-react
第五步：npm install -g webpack
第六步：npm install -g webpack-dev-server
第七步：npm install webpack-dev-server --save
第八步：npm install webpack --save
第九步：webpack
报错：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
因为版本改了，新版本初始化时不一样，需要换版本
第十步：webpack --watch 监听代码，代码发生改变时页面也自动改变
第十一步：webpack-dev-server 热加载或者 webpack-dev-server --contentbase src
第十二步：webpack-dev-server --contentbase src --inline --hot 指定打开的页面地址栏地址并热加载