react
mkdir react-demo
cd react-demo
npm init -y
npm install react react-dom -S
npm install webpack webpack-cli webpack-dev-server babel babel-cli babel-core babel-loader@7 babel-preset-react babel-preset-env babel-preset-es2015 -D （解析jsx和es6语法）
注意：babel 6.x版本必须安装babel-loader@7 babel 7.x 必须安装babel-loader@8
module.exports = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js',
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015']
}
}
}]
}
}
-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
-
main.js
// React 是 React 库的入口
// React组件可以通过扩展 React.Component来定义
import React, { Component } from 'react';
// react-dom 包提供了 DOM 特定的方法，可以在你的应用程序的顶层使用，如果你需要的话，也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <h1> Hello, world! </h1>
}
}
// 渲染一个 React 元素到由 container 提供的 DOM 中，并且返回组件的一个 引用
ReactDom.render(
<App />,
document.getElementById('root')
)
-
package.json
"start": "webpack-dev-server --inline --hot --open --port 8090 --mode development"
npm install -g create-react-app
create-react-app my-testproject
cd my-testproject
npm start or
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h1> Hello, world! </h1>,
document.getElementById('root')
)
