资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React.js组件化开发第一步(框架搭建)

React.js组件化开发第一步(框架搭建)

Betta / 382人阅读

摘要：开始前安装安装安装安装完成后将镜像替换成国内的安装查看安装版本项目初始化命令行切到需要创建项目的目录内然后执行是项目的名称也是文件夹的名称命令行切到刚创建的项目运行项目执行以下命令会自动打开浏览器并防问初始化生成

开始前

安装 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 = () => (
  

    
这是首页

  

);

export default Home;

创建about页面: 在components目录内创建一个About目录, 然后再About目录内创建一个About.js, 写入以下内容:

import About from "react";

const About = () => (
  

    
这是关于页

  

);

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 = () => (
  
    

      
      
    

  
);

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) => (
  
    
    
  • Home
    • 
    
  • About
    • 
    
  • 来源于: { props.title }
    • 
  

);

export default NavBar;

现在我们有一个公共组件了, 接下来把它放到 Home 和 About 组件内:
Home 内容如下:

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

const Home = () => (
  

    
    
这是首页

  

);

export default Home;

About 内容如下:

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

const About = () => (
  

    
    
这是关于页

  

);

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 = [
    
  • 1号
    • ,
    
  • 2号
    • 
  ];

  return (
    
    
      
      
      
        {
          data.map((item, index) => (
            
    • 
              名字:
              {item.name}
              大小:
              {item.age}
            
      • 
          ))
        }
        {
          dataDom
        }
      
    
    
    
  );
};

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 = () => (
  
    
    
      
      
      
    
    
      
);

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;

    现在命令行切到项目根目录, 执行yarn run start启动项目, 在浏览器内查看效果;

    第一步就先到这里啦: 源码
    React.js组件化开发第二步(添加样式及数据请求)

    云服务器 专线服务 开发框架的搭建 js 组件框架 React.js 组件化开发

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/84606.html

    相关文章

    • React.js组件化开发第二步(添加样式及数据请求)

      摘要：第一步主要说了一下框架的搭建及组件与路由的创建接下来主要是样式的添加及从后台获取数据添加样式美化页面化美化一下我们的公共组件在目录下添加样式要应用当然还必须得在组件中引用才行的哟修改来源于当然也可以开添加 第一步主要说了一下框架的搭建及组件与路由的创建; 接下来主要是样式的添加及从后台获取数据: 添加样式美化页面 化美化一下我们的公共组件: 在 /src/components/Co...

      mengera88 评论0 收藏0

    • 前端每周清单半年盘点之 React 与 ReactNative 篇

      摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

      Barry_Ng 评论0 收藏0

    • React+webpack+Antd从0到1开发一个todoMvc

      摘要：在装载组件之前调用会组件的构造函数。当实现子类的构造函数时，应该在任何其他语句之前调用设置初始状态绑定键盘回车事件，添加新任务修改状态值，每次修改以后，自动调用方法，再次渲染组件。可以通过直接安装到项目中，使用或进行引用。 首先我们看一下我们完成后的最终形态：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

      sanyang 评论0 收藏0

    • 大前端2018现在上车还还得及么

      摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。 第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

      livem 评论0 收藏0

    • 大前端2018现在上车还还得及么

      摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。 第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

      stormgens 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    Betta

    男|高级讲师
    我要私信

    TA的文章

    阅读更多

    云社区相关服务

    提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
    最新活动
    阅读需要支付1元查看
    <