React筆記：快速構建腳手架（1）

libingql發表於2019-01-13
React筆記

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;

相關文章