create-react-app安裝及使用

create-react-app學習以前能夠從它的官網開始瞭解

推薦網址

安裝

推薦網址

按這個步驟走下去：

• npm install -g create-react-app

• create-react-app my-app

使用命令建立應用，myapp爲項目名稱

• cd my-app

進入目錄，而後就啓動

• npm start

啓動以後打開的頁面：

這是我如今的項目目錄：

下面代碼：

若是以爲不舒服，能夠本身新建文件夾

在App.js先寫一些東西，看看它是否運行

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>asdfghj</h1>
    );
  }
}

export default App;

這是運行的效果圖：

安裝最後一步:推薦網址

• npm install --save react-router-dom

安裝完以後能夠在項目目錄src下建立幾個文件夾

看個人代碼：

App.js

import React,{ Component } from 'react';
import { BrowserRouter, Route,Link} from 'react-router-dom';


import Home from './components/Home';
import Product from './components/Product';
import About from './components/About';

class App extends Component {
    render() {
        return (
          <BrowserRouter>
            <div>
              <a href="/abc">家</a>
              <a href="/abc1">產品</a>
              <a href="/abc2">咱們</a>
              <br/>
              <Link to="abc"> 家</Link>
              <Link to="abc1"> 產品</Link>
              <Link to="abc2">咱們</Link>
              <br/>
              <Route path="/abc" component={Home}/>
              <Route path="/abc1" component={Product}/>
              <Route path="/abc2" component={About}/>
            </div>
              
          </BrowserRouter>
               
        );
    }
}

export default App;

About.js

import React from 'react';

class About extends React.Component {
    render() {
        return (
                <h1>關於咱們</h1>
        );
    }
}

export default About;

Home.js

import React from 'react';

class Home extends React.Component {
    render() {
        return (
                <h1>hihihihi</h1>
        );
    }
}

export default Home;

Product.js

import React from 'react';

class Product extends React.Component {
    render() {
        return (
                <h1>產品列表</h1>
        );
    }
}

export default Product;

效果圖：