[S3-E399]React.js组件化开发第一步(框架搭建)

Posted 2021-05-01 前端JavaScript

开始前

• 安装 node.js(https://nodejs.org/);

• 安装 cnpm(https://cnpmjs.org/);

• 安装 yarn(https://yarnpkg.com/zh-Hans/);

  安装完成yarn后, 将镜像替换成国内的:

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

• 安装 create-react-app(https://github.com/facebookincubator/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启动项目, 在浏览器内查看效果;

第一步就先到这里啦: 源码(https://github.com/YuanWing/react-learns/tree/one-step)

React.js组件化开发第二步(添加样式及数据请求)(https://segmentfault.com/a/1190000010484283)

作者 : YuanWing

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 ====================