React.js組件化開發第一步(框架搭建)

開始前

• 安裝 node.js;

• 安裝 cnpm;

• 安裝 yarn;
  安裝完成yarn後, 將鏡像替換成國內的:

  $ 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

項目初始化

命令行切到須要建立項目的目錄內, 而後執行:

// my-app 是項目的名稱, 也是文件夾的名稱
$ create-react-app my-app

// 命令行切到剛建立的項目
$ cd my-app

// 運行項目
// 執行如下命令會自動打開瀏覽器, 並防問 http://localhost:3000/
$ yarn run start

初始化生成的文件先無論, 作項目仍是得好好的分目錄的喲, 接下來安裝react-router

由於, 是在瀏覽器內運行的, 因此安裝react-router-dom; 命令行切到剛建立的項目目錄內, 而後執行安裝:

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

好了, 路由也有了, 如今能夠開始寫項目啦.

開始上路

• 在src目錄內建立一個comonents目錄, 用來放組件;

• 建立咱們本身的首頁: 在components目錄內建立一個Home目錄, 而後再Home目錄內建立一個Home.js, 寫入如下內容:

  // 組件必須先 import 進 react;
  import React from 'react';
  
  const Home = () => (
    <div>
      <h1>這是首頁</h1>
    </div>
  );
  
  export default Home;

• 建立about頁面: 在components目錄內建立一個About目錄, 而後再About目錄內建立一個About.js, 寫入如下內容:

  import About from 'react';
  
  const About = () => (
    <div>
      <h1>這是關於頁</h1>
    </div>
  );
  
  export default About;

• 如今咱們有兩個組件了, 可是還沒辦法在瀏覽器內防問, 接下來建立路由:
  先清空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';
  
  const App = () => (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
  
  export default App;

• 如今命令行切到項目根目錄, 執行yarn run start啓動項目, 會自動在瀏覽器內防問 http://localhost:3000/, 這就是咱們的 首頁 組件喲, 能夠手動修改url防問 關於頁(http://localhost:3000/about) 組件.

公共組件

• 咱們建立了兩個組件, 而且都有本身的獨立路由, 可是要防問須要手動輸入, 太麻煩啦, 那咱們能夠建立一個 導航 組件:
  在 components 目錄下建立一個 Common 文件夾並建立 NavBar.js 內容以下:

  import React from 'react';
  import {
    Link,
  } from 'react-router-dom';
  
  const NavBar = (props) => (
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li>來源於: { props.title }</li>
    </ul>
  );
  
  export default NavBar;

• 如今咱們有一個公共組件了, 接下來把它放到 Home 和 About 組件內:
  Home 內容以下:

  import React from 'react';
  import NavBar from '../Common/NavBar';
  
  const Home = () => (
    <div>
      <NavBar title="首頁" />
      <h1>這是首頁</h1>
    </div>
  );
  
  export default Home;

  About 內容以下:

  import React from 'react';
  import NavBar from '../Common/NavBar';
  
  const About = () => (
    <div>
      <NavBar title="關於頁" />
      <h1>這是關於頁</h1>
    </div>
  );
  
  export default About;

  如今命令行切到項目根目錄, 執行yarn run start啓動項目, 在瀏覽器內查看效果;

建立一個列表

雖然, 咱們如今有一個組件了, 可是內容都特別單調, 接下來建立一個列表的組件:
在 components 目錄下建立一個 List 文件夾並建立 List.js 內容以下:

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

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

  const dataDom = [
    <li key="1">1號</li>,
    <li key="2">2號</li>
  ];

  return (
    <div>
      <NavBar title="列表頁" />
      <ul>
        {
          data.map((item, index) => (
            <li key={index}>
              <strong>名字:</strong>
              <span>{item.name}</span>
              <strong>大小:</strong>
              <span>{item.age}</span>
            </li>
          ))
        }
        {
          dataDom
        }
      </ul>
    </div>
  );
};

export default List;

建立完成後, 修改 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 = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/list" component={List} />
    </div>
  </Router>
);

export default App;

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

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

const NavBar = (props) => (
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/list">List</Link></li>
    <li>來源於: {props.title}</li>
  </ul>
);

export default NavBar;

如今命令行切到項目根目錄, 執行yarn run start啓動項目, 在瀏覽器內查看效果;

第一步就先到這裏啦: 源碼
React.js組件化開發第二步(添加樣式及數據請求)