React笔记：快速构建脚手架（1）

1. Create React APP

　　React官方提供的脚手架工程Create React App：https://github.com/facebook/create-react-app

　　Create React App基于最佳实践，将Webpack、Babel、ESLint等工具的配置进行封装。

1.1 安装

　　全局安装：

npm install -g create-react-app

1.2 创建应用

npx create-react-app libing.react

1.3 运行应用

cd libing.react
npm start

　　应用启动成功后，在浏览器中打开http://localhost:3000/，即可访问应用。

1.4 HelloWorld组件

　　新增组件：src/components/HelloWorld.js

import React, { Component } from "react"

class HelloWorld extends Component {
    render() {
        return ( 
            <div> Hello World! </div>
        );
    }
}

export default HelloWorld;

　　修改App.js

import React, { Component } from \'react\';
import logo from \'./logo.svg\';
import HelloWorld from \'./components/HelloWorld\'
import \'./App.css\';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <HelloWorld />
        </header>
      </div>
    );
  }
}

export default App;