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的直接使用方式有所不同，试验了好多次，才理解。后来想想，还是本人对前端的思维不熟练导致的，要加强实践，加油！