cd react-demo
npm init -y
npm install react react-dom -S
注意：babel 6.x版本必须安装babel-loader@7 babel 7.x 必须安装babel-loader@8
webpack.config.js
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"
create-react-app my-testproject 生成项目模板，其中my-testproject是项目名称，随意定义
cd my-testproject
npm start or
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 强调组件的创建方式，里面模板jsx创建的方式
class App extends Component {
render() {
return (
<div>
<span>Hello, World.</span>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));