reactjs前端实践|第一篇:调色板示例组件的使用

背景

最近终于开始折腾前端,经过大量的阅读和研究,决定使用react.js及相关产品来架构我的前端技术。我本是个纯后端,喜欢算法,几年前,发现了node.js,因为它开源,底层是C++,正中我下怀,呵呵!

原因

  • react.js以javascript为主,将HTML放置在JS中,与Angular、 Ember和Knockout相反。感谢《react: the other side of the coin》这篇文章的作者与译者;

  • 组件编程,提倡组件化到最小粒度,重用率比较高,长期积累,可形成自己的组件库;

  • 开源、轻量库,生态圈好;

技术栈

  • es6

  • react.js

  • react-router-dom v4 (第四版,有好多改变,花了不少时间)

  • redux

  • redux-saga (还在犹豫,是否用它)

  • styled-components

工具

  • create-react-app

在学习、开发阶段,有它真好。我发现,拖了这久我才行动起来,原来是我没有遇见create-react-app这个神器啊,呵呵。

实践一

color-card(调色板)示例

示例描述

显示一块调色板,上面一个正方形展现真实颜色,下面一个文字标签显示颜色的16进制编码,色值由父类单入口传递。

代码结构

整个App分解为三个组件,一个父组件(Card)、两个子组件(Square、Label),颜色值由Card组件的Props向子组件单向传递,样式使用styled-components来定义。

代码分析

父组件(Card)

import React, { Component } from 'react';
import styled from 'styled-components';
import Square from './Square';
import Label from './Label';

const CardDiv = styled.div`                                     //定义卡片div
    height: 200px;
    width: 150px;
    padding: 0,
    background-color: #FFF;
    -webkit-filter: drop-shadow(0px 0px 5px #666);              //这行可以删除
    filter: drop-shadow(0px 0px 5px #666);
`;
class Card extends Component {
    render() {
        return (
            <CardDiv>
                <Square color={this.props.color}/>            //传递Props
                <Label color={this.props.color}/>
            </CardDiv>
        );
    }
}

export default Card;

子组件(Square)

import React, { Component } from 'react';
import styled from 'styled-components';

const SquareDiv = styled.div`
    height: 150px;
    background-color: ${props => props.color};                   //styled-components中接收父组件传递来的参数的方式
    `;
class Square extends Component {
    render() {
        return (
            <SquareDiv {...this.props}></SquareDiv>              //延展符的使用,传递属性到styled-components中
        );
    }
}

export default Square;

子组件(Label)

import React, { Component } from 'react';
import styled from 'styled-components';

const P = styled.p`
        font-family: sans-serif;
        font-weight: bold;
        padding: 13px;
        margin: 0;
    `;

class Label extends Component {
    render() {
        return (
            <P>{this.props.color}</P>
        );
    }
}

export default Label;

组件加载(index.js)

import Card from './components/Card';

ReactDOM.render(
  <Card color="#FFA737"/>,
  document.getElementById('root')
);

项目地址

https://git.oschina.net/zhoutk/reactodo.git
https://github.com/zhoutk/reactodo.git

使用方法

git clone https://git.oschina.net/zhoutk/reactodo.git
or git clone https://github.com/zhoutk/reactodo.git
cd reactodo
npm i
git checkout color-card
npm start

小结

这是第一篇,主要是技术选型思考,样式的处理思考了很久,最后决定用style-components,希望它不要让我失望。难点:父组件的属性传递到styled-components组件中的方式,它以子组件的方式来组织的,并采用了回调函数的方式,与JSX的直接使用方式有所不同,试验了好多次,才理解。后来想想,还是本人对前端的思维不熟练导致的,要加强实践,加油!

    原文作者:zhoutk
    原文地址: https://segmentfault.com/a/1190000009182089
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞