试着用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标签一样非常简便,加以简单的设置就可以达到任意你想要的效果
这一篇内容比较简单,主要是开工前的准备第二期,但是组织好了好工具才会 事半功倍吧?
试着用React写项目-利用styled-components解决样式问题的更多相关文章
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
转载请注明出处:王亟亟的大牛之路 这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source- ...
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
转载请注明出处:王亟亟的大牛之路 继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套, 开始今天的内容前老规矩,先安利:https://g ...
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...
- 试着用React写项目-利用Webpack搭环境
转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- React初步学习-利用React构建个人博客
React初步学习-利用React构建个人博客 用React和Webpack写了一个很简单的个人博客,主要是想要熟悉一下react中各种基本基本属性及方法的使用.在构建过程中碰到不少问题,通过阅读官方 ...
随机推荐
- 禁止同一条ajax请求重复发出的方法
在项目中,遇到的问题是: 四个tab发送四个不同的请求,当用户连续在不同的按钮之间来回切换时,会出现不清楚那条数据是需要展示的的问题,和当连续点击同一个按钮时,基本同时返回的数据会全都展示出来的问题. ...
- UINavigationController和UITabBarController
UINavigationController和UITabBarController 目录 概述 UINavigationController UITabBarController 实用功能 待解决 概 ...
- CentOS oracle Client客户端安装
CentOS客户端安装方法如下: 1.安装客户端 rpm -ivh /当前目录/oracle-instantclient12.1-basic-12.1.0.2.0-1.x86_64.rpm rpm - ...
- SpringMVC实现简单应用
我们都知道,servlet代码一般来说只能在一个servlet中做判断去实现一个servlet响应多个请求, 但是springMVC的话还是比较方便的,主要有两种方式去实现一个controller里能 ...
- centos7 安装后,出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]
PS:出现以上信息,是要求你阅读或者接收协议: Initial setup of CentOS Linux 7 (core)解决步骤如下: 1,输入[1],按Enter键阅读许可协议,2,输入[2], ...
- pta 习题集 5-17九宫格输入法
假设有九宫格输入法键盘布局如下: [ 1,.?! ] [ 2ABC ] [ 3DEF ] [ 4GHI ] [ 5JKL ] [ 6MNO ] [ 7PQRS ] [ 8TUV ] [ 9WXYZ ] ...
- numpy基本方法总结 --good
https://www.cnblogs.com/xinchrome/p/5043480.html 一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于 ...
- Django - 常用配置
一.logging配置 Django项目常用的logging配置 settings.py LOGGING = { 'version': 1, 'disable_existing_loggers': F ...
- linux内存管理之vmalloc函数分析
2017-07-09 今天周末,闲来无事聊聊linux内核内存分配那点事……重点在于分析vmalloc的执行 流程 以传统x86架构为例,内核空间内存(3G-4G)主要分为三大部分:DMA映射区,一致 ...
- CSS之Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...