您的位置：首页 > Web前端 > React

试着用React写项目-利用styled-components解决样式问题

2017-02-15 17:42 901 查看

转载请注明出处：王亟亟的大牛之路

啰嗦之前先安利，会渐渐丰富前端的知识点 https://github.com/ddwhan0123/Useful-Open-Source-Android

昨天用webpack把我们的项目跑了起来，没看的可以看下，比较有条理性：http://blog.csdn.net/ddwhan0123/article/details/55095661

今天我们就要写react的内容了，首先先要用npm来下载相关需要的依赖库

分别是react和react-dom

npm install --save react react-dom

当你下完react相关后就要解决es6和jsx的支持，这部分交由Babel解决

npm install --save-dev babel-cli babel-preset-react

npm install --save-dev babel-cli babel-preset-es2015

因为用Webpack构建项目，所以css 相关内容也可以像加载普通js一样处理，只需要加入几个加载库

npm install css-loader style-loader --save-dev

下完之后在配置文件里添加支持就好

var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
"presets": ["es2015", "react"]
}
}, {
test: /\.css$/,
loader: 'style!css'
}
]
}
};

module.exports = config;

七大姑八大姨都配置好就可以干活了，我们写个简单的

<H1>

试试

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="root"></div>
<h1>
hi
</h1>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>

接下来看下入口js

import React from 'react';
import ReactDOM from 'react-dom';

export default class Hello extends React.Component {
render() {
return (
<H1>hi all</H1>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);

跑下来就是在页面上打了个hi all这里就不截图了。

手写css不难，但是很烦，因为会瞎眼睛，找了找各种封装的库，找了个靠谱的，推荐给大家

https://github.com/styled-components/styled-components

npm install --save styled-components

下载也是走 npm，下完就好，作者提供了一个供大家试玩的网站，地址如下：

http://www.webpackbin.com/V1VNoINA-

对html的那些标签进行了封装，使用它就跟使用默认的html一样，整个css架构都跟着组件走，而不需要你从中调度。

具体支持哪写可以看https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js

大致长这样

使用起来也非常简单，我们把我们的demo加以修改

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;

&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
const H1 = styled.h1`
background-color: #a1a
`;

export default class Hello extends React.Component {
render() {
return (
<div>
<Input placeholder="@mxstbr" type="text" />
<H1>hi all</H1>
</div>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);

改完后长这样

使用完全就像使用常规html标签一样非常简便，加以简单的设置就可以达到任意你想要的效果

这一篇内容比较简单，主要是开工前的准备第二期，但是组织好了好工具才会事半功倍吧？

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航