背景
最近终于开始折腾前端,经过大量的阅读和研究,决定使用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的直接使用方式有所不同,试验了好多次,才理解。后来想想,还是本人对前端的思维不熟练导致的,要加强实践,加油!