背景
最近终于开始折腾前端，经过大量的阅读和研究，决定使用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的直接使用方式有所不同，试验了好多次，才理解。后来想想，还是本人对前端的思维不熟练导致的，要加强实践，加油！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。