资讯专栏INFORMATION COLUMN

react、react-router、redux 也许是最佳小实践1

Betta / 1808人阅读

摘要:通过声明式编程模型定义组件,是最强大的核心功能。无论是的浏览器书签,还是的导航功能,只要是可以使用的地方,就可以使用。二级路由使用渲染组件属性状态请选择一个主题。也许是最佳小实践地址,觉得有帮助的话,请点击一下,嘿嘿

小前言

这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。

这是基于create-react-app来开发的,一种简单的快速创建 React web 项目的方式是使用 Create React App 工具,相当于一个react手脚架,此工具由 Facebook 开发并维护。如果你还没有使用过 create-react-app,你需要先安装。然后就可以通过它创建一个新项目。

React Router4.0 号称一次学习,随处路由。通过声明式编程模型定义组件,是 React 最强大的核心功能。 React Router 可以为您的应用已声明式的方式定义导航组件最强大的核心功能。 无论是 Web App 的浏览器书签 URLs,还是 React Native 的导航功能, 只要是可以使用 React 的地方,就可以使用 React Router

Redux 是一个用来管理JavaScript应用中 data-state(数据状态)和UI-state(UI状态)的工具,对于那些随着时间推移状态管理变得越来越复杂的单页面应用(SPAs)它是比较理想。阮老师redux的教程

下面我们看看完成后的小 demo

开始用create-react-app创建我们的 app

首先 安装好create-react-app,已经安装好了就不用重复安装啦。

npm install -g create-react-app

mac不成功记得用 sudo

安装完毕之后:

create-react-app react-plan 
cd react-plan/
npm start

安装会有点慢,耐心等待一下

安装完毕之后,在浏览器地址栏输入localhost:3000,就可以浏览到刚才创建的 app 啦,这个手脚架很简单。如下图

代码开始

创建好应用之后,我们就开始写我们的代码了,在 src文件夹下面创建一个components文件夹,并且在这个文件夹下面创建一个home.js的文件,然后写上我们首页的内容。

首页介绍组件

src/components/home.js

import React, { Component } from "react"
class Home extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            

首页

这是一个 react 学习的基本操作的小栗子

通过本次学习可以清楚的掌握, react-router、redux的基本使用方法




) } } export default Home

写好了 home.js 之后我们先引入我们的 app 看看

然后在src/App.js引入我们的 home.js,App.js就变成了

src/App.js

import React, { Component } from "react";
import logo from "./logo.svg";
// 引入 homejs
import Home from "./components/home.js"
import "./App.css";

class App extends Component {
  render() {
    return (
      

Welcome to React

To get started, edit src/App.js and save to reload.

// 使用 home 组件
); } } export default App;

写好之后我们就可以成功的写完了home.js组件啦,是不是很简单,是不是很happy?

一鼓作气,完成所有组件

继续在components文件夹创建一个plan.js(计划表)、detail.js(计划详情)、pupop.js(添加计划)、的js文件和comment.css(组件的样式),我们这时候不涉路由的跳转,只要把所有静态的组件先一鼓作气写好来。

tips:这个例子小,为了方便,我把所有的组件样式文件都写到comment.css里面了,这时候写好的了 css 记得在App.js里面引入

src/App.js增加一句 import "./components/comment.css"

src/components/comment.css

.main {
  padding: 10px;
  flex-direction: row;
  display: flex;
}
.NavBox {
    width: 250px;
    margin-right: 20px;
}
.listNav{
    text-align: center;
}
.listNav li {
    line-height: 40px;
}
.listNav li a {
    text-decoration: none;
}
.listNav li.active{
    background: #00a6f7;
}
.listNav li.active a{
    color: #fff;
}
.side{
    width: 100%;
}
.slist{
    font-size: 14px;
}
.addBtn {
    font-size: 14px;
    font-weight: normal;
    background: skyblue;
    display: inline-block;
    padding: 10px;
    margin-left:  10px;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}
.slist li{
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid 1px cornflowerblue;
}

.slist li h3{
    font-weight: normal;
}

.slist li div span{
    text-decoration: underline;
    padding: 0 10px;
}
.popup{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.popup .pbox {
    width: 50%;
    height: 320px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
}
.popup .pbox h4{
    font-size: 14px;
}
.popup .pbox input {
    margin: 10px 0 20px 0;
}
.popup .pbox input, .popup .pbox textarea{
    display: block;
    width: 100%;
    height: 32px;
    border: 1px solid skyblue;
    text-indent: 10px;
}

.popup .pbox textarea {
    resize: none;
    height: 100px;
    margin: 10px 0;
}

.popup .pbox .close {
    position: absolute;
    width: 30px;
    height: 30px;
    background: red;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #ffffff;
    right: -15px;
    top: -15px;
    transition: 0.5s;
    cursor: pointer;
}
.popup .pbox .close:hover{
    transform: rotate(180deg);
}
.popup .pbox .pBtn {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.popup .pbox .pBtn span{
    padding: 10px 20px;
    background: skyblue;
    margin: 0 10px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}
.plant{
    line-height: 50px;
    position: relative;
}
.plant p{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    background: blue;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
}
.planlist{
    width: 100%;
    padding: 10px;
    border-collapse: collapse;
}
.planlist td, th{
    border: 1px solid blue;
    line-height: 32px;
    font-size: 14px;

}
.plan-delect{
    color: red;
    cursor: pointer;
}
.plan-delect:hover{
    color: blue;
    text-decoration: underline;
}
.plan-title{
    width: 80%;
}

计划组件

src/components/plan.js

import React, { Component } from "react"

class Plan extends Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            

计划表

添加计划

标题 操作
计划1 删除
) } } export default Plan;

测试的时候直接把App.js刚才写的import Home from "./components/home.js"改成 import Home from "./components/plan.js",就可以测试plan 组件啦。是不是很简单?下面的同理。

计划详情组件

src/components/detail.js

import React, { Component } from "react"

class Detail extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            

计划详情

id: 123

标题: 测试标题

内容: 测试内容

) } } export default Detail

添加计划组件

src/components/popup.js

import React, { Component } from "react"

class Pupop extends Component{
  constructor (props) {
    super(props)
    this.state = {
      id: "",
      title: "1",
      content: "1"
    }
  }
  render() {
    let self = this;
    return (
      
X

计划标题

计划内容

取消 确认
) } } export default Pupop

呼~~~终于把所有组件都写好了。下面我们就用路由把他们全都串联起来吧。实现点击跳转咯

加入路由

首先记得安装路由 npm install react-router-dom history --save

history这个模块是用来做 js 的跳转,后面我们会介绍到。

安装完成路由模块之后,在src/components/下面我们在增加一个测试二级路由的文件testrouter.js,里面的内容很简单,直接把官网的拿进来。

src/components/testrouter.js

import React, { Component } from "react"
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"

const Topic = ({ match }) => (
  

{match.params.topicId}

) class TestRouter extends Component { constructor(props) { super(props); console.log(this.props) } render () { return (

二级路由

  • 使用 React 渲染
  • 组件
  • 属性 v. 状态
(

请选择一个主题。

)}/>
) } } export default TestRouter

然后在App.js做一点改动,引入所有需要的模块,看注释

src/App.js

import React, { Component } from "react"
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"
import logo from "./logo.svg"
// 引入4个模块组件
import Plan from "./components/plan.js"
import Home from "./components/home.js"
import Popup from "./components/popup.js"
import TestRouter from "./components/testrouter.js"
import Detail from "./components/detail.js"
// 引入样式文件
import "./App.css"
import "./components/comment.css"
// 引入路由
import createHistory from "history/createBrowserHistory"
const history = createHistory()
// 开始代码
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

Welcome to React Plan

// 路由配置
// 编写导航
  • 首页
  • 计划表
  • 二级路由
// 路由匹配
); } } export default App

不是结束的结束:好啦~~~路由也配置好,打开浏览器,在代码正确的情况下,可以愉快的实现跳转咯。之后我们再把 redux 加入进来,这样子就可以,每个组件就可以操作全局的数据了。稍后奉上。react、react-router、redux 也许是最佳小实践2

github地址,觉得有帮助的话,请点击一下 start,嘿嘿

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

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

相关文章

  • reactreact-router、redux 许是最佳实践2

    摘要:上一篇也许是最佳小实践加入在组件之间流通数据更确切的说,这被叫做单向数据流数据沿着一个方向从父组件流到子组件。这个将这个新的对象附加到上,并将它返回,用来更新。这一次,将当前的状态仍旧是空数组和对象一起传递给了。 上一篇:react、react-router、redux 也许是最佳小实践1 加入 redux React 在组件之间流通数据.更确切的说,这被叫做单向数据流——数据沿着一个...

    AaronYuan 评论0 收藏0
  • React.js 最佳实践(2016)_链接修正版

    摘要:译者按最近依旧如火如荼相信大家都跃跃欲试我们团队也开始在领域有所尝试年应该是逐渐走向成熟的一年让我们一起来看看国外的开发者们都总结了哪些最佳实践年在全世界都有很多关于新的更新和开发者大会的讨论关于去年的重要事件请参考那么年最有趣的问题来了我 译者按:最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,我们团队也开始在React领域有所尝试. 2016年应该是Reac...

    syoya 评论0 收藏0
  • TypeScript 3.0 + React + Redux 最佳实践

    摘要:首先声明这篇文章是想说明一下最新版本的的新特性带来的极大的开发体验提升而不是如何利用开发应用这个特性就是对的支持在的中有说明具体可以参考这里在版本之前我们在开发应用尤其是在配合一类库的时候经常用到诸如之类的封装而这些函数其实都可以用装饰器的 首先声明, 这篇文章是想说明一下最新版本的 TypeScript(3.0) 的新特性带来的极大的 React 开发体验提升. 而不是如何利用 Ty...

    CloudwiseAPM 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<