最先前

• 装置 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组件化开辟第二步(增加款式及数据要求)