摘要：開始前安裝安裝安裝安裝完成后將鏡像替換成國內(nèi)的安裝查看安裝版本項(xiàng)目初始化命令行切到需要?jiǎng)?chuàng)建項(xiàng)目的目錄內(nèi)然后執(zhí)行是項(xiàng)目的名稱也是文件夾的名稱命令行切到剛創(chuàng)建的項(xiàng)目運(yùn)行項(xiàng)目執(zhí)行以下命令會(huì)自動(dòng)打開瀏覽器并防問初始化生成

安裝 node.js;

安裝 cnpm;

安裝 yarn;
安裝完成yarn后, 將鏡像替換成國內(nèi)的:

$ yarn config set registry "https://registry.npm.taobao.org"

安裝 create-react-app:

$ sudo cnpm install -g create-react-app

// 查看安裝版本
$ create-react-app --version
1.3.3

命令行切到需要?jiǎng)?chuàng)建項(xiàng)目的目錄內(nèi), 然后執(zhí)行:

// my-app 是項(xiàng)目的名稱, 也是文件夾的名稱
$ create-react-app my-app

// 命令行切到剛創(chuàng)建的項(xiàng)目
$ cd my-app

// 運(yùn)行項(xiàng)目
// 執(zhí)行以下命令會(huì)自動(dòng)打開瀏覽器, 并防問 http://localhost:3000/
$ yarn run start

初始化生成的文件先不管, 做項(xiàng)目還是得好好的分目錄的喲, 接下來安裝react-router

因?yàn)? 是在瀏覽器內(nèi)運(yùn)行的, 所以安裝react-router-dom; 命令行切到剛創(chuàng)建的項(xiàng)目目錄內(nèi), 然后執(zhí)行安裝:

$ yarn add react-router-dom
// 我這里安裝的是 ^4.1.2 版本的

好了, 路由也有了, 現(xiàn)在可以開始寫項(xiàng)目啦.

在src目錄內(nèi)創(chuàng)建一個(gè)comonents目錄, 用來放組件;

創(chuàng)建我們自己的首頁: 在components目錄內(nèi)創(chuàng)建一個(gè)Home目錄, 然后再Home目錄內(nèi)創(chuàng)建一個(gè)Home.js, 寫入以下內(nèi)容:

// 組件必須先 import 進(jìn) react;
import React from "react";

const Home = () => (
  

    
這是首頁
  
);

export default Home;

創(chuàng)建about頁面: 在components目錄內(nèi)創(chuàng)建一個(gè)About目錄, 然后再About目錄內(nèi)創(chuàng)建一個(gè)About.js, 寫入以下內(nèi)容:

import About from "react";

const About = () => (
  

    
這是關(guān)于頁
  
);

export default About;

現(xiàn)在我們有兩個(gè)組件了, 但是還沒辦法在瀏覽器內(nèi)防問, 接下來創(chuàng)建路由:
先清空src/App.js內(nèi)的內(nèi)容, 然后寫入以下內(nèi)容:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
import Home from "./components/Home/Home";
import About from "./components/About/About";

const App = () => (
  
    

      
      
    
  
);

export default App;

現(xiàn)在命令行切到項(xiàng)目根目錄, 執(zhí)行yarn run start啟動(dòng)項(xiàng)目, 會(huì)自動(dòng)在瀏覽器內(nèi)防問 http://localhost:3000/, 這就是我們的 首頁 組件喲, 可以手動(dòng)修改url防問 關(guān)于頁(http://localhost:3000/about) 組件.

我們創(chuàng)建了兩個(gè)組件, 并且都有自己的獨(dú)立路由, 但是要防問需要手動(dòng)輸入, 太麻煩啦, 那我們可以創(chuàng)建一個(gè) 導(dǎo)航 組件:
在 components 目錄下創(chuàng)建一個(gè) Common 文件夾并創(chuàng)建 NavBar.js 內(nèi)容如下:

import React from "react";
import {
  Link,
} from "react-router-dom";

const NavBar = (props) => (
  

    
Home
    
About
    
來源于: { props.title }
  
);

export default NavBar;

現(xiàn)在我們有一個(gè)公共組件了, 接下來把它放到 Home 和 About 組件內(nèi):
Home 內(nèi)容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const Home = () => (
  

    
    
這是首頁
  
);

export default Home;

About 內(nèi)容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const About = () => (
  

    
    
這是關(guān)于頁
  
);

export default About;

現(xiàn)在命令行切到項(xiàng)目根目錄, 執(zhí)行yarn run start啟動(dòng)項(xiàng)目, 在瀏覽器內(nèi)查看效果;

雖然, 我們現(xiàn)在有一個(gè)組件了, 但是內(nèi)容都特別單調(diào), 接下來創(chuàng)建一個(gè)列表的組件:
在 components 目錄下創(chuàng)建一個(gè) List 文件夾并創(chuàng)建 List.js 內(nèi)容如下:

import React from "react";
import NavBar from "../Common/NavBar";

const List = () => {
  const data = [{
    name: "小白",
    age: 5
  }, {
    name: "大黃",
    age: 3
  }];

  const dataDom = [
    
1號(hào)
,
    
2號(hào)
  ];

  return (
    

      
      

        {
          data.map((item, index) => (
            

              名字:
              {item.name}
              大小:
              {item.age}
            
          ))
        }
        {
          dataDom
        }
      
    
  );
};

export default List;

創(chuàng)建完成后, 修改 src/App.js 將我們的列表組件添加到路由中:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import List from "./components/List/List";

const App = () => (
  
    

      
      
      
    
  
);

export default App;

修改 src/components/Common/NavBar.js:

import React from "react";
import {
  Link,
} from "react-router-dom";

const NavBar = (props) => (
  

    
Home
    
About
    
List
    
來源于: {props.title}
  
);

export default NavBar;

現(xiàn)在命令行切到項(xiàng)目根目錄, 執(zhí)行yarn run start啟動(dòng)項(xiàng)目, 在瀏覽器內(nèi)查看效果;

第一步就先到這里啦: 源碼
React.js組件化開發(fā)第二步(添加樣式及數(shù)據(jù)請(qǐng)求)