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;

posted @ 2019-01-13 20:57 libingql 阅读(...) 评论(...) 编辑 收藏