首页 > 代码库 > 试着用React写项目-利用styled-components解决样式问题

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

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

啰嗦之前先案例,会渐渐丰富前端的知识点 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标签一样非常简便,加以简单的设置就可以达到任意你想要的效果

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

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

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