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

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"

React脚手架 (Facebook官方出品)

npm install -g create-react-app 全局全装脚手架工具

create-react-app my-testproject 生成项目模板，其中my-testproject是项目名称，随意定义

cd my-testproject

npm start or yarn start

React版hello world

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'));