试着用React写项目-利用styled-components解

作者: 王亟亟 | 来源:发表于2017-02-16 09:43 被阅读190次

试着用React写项目-利用styled-components解
React天气预报
试着用React写项目-利用react-router解决跳转路由
试着用React写项目-利用react-router解决跳转路由
试着用React写项目-利用react-router解决跳转路由
React学习笔记5-慕课案例学习
react+typescript+antd随笔（一）
用typescript写styled-components报错一
android开发学习之Gson解析
react项目中利用标签嵌入 VUE项目</a></li></ol></div> <h3>转载请注明出处：<a href="https://link.jianshu.com?t=http://blog.csdn.net/ddwhan0123" target="_blank" rel="nofollow">王亟亟的大牛之路</a> </h3> <p>啰嗦之前先安利，会渐渐丰富前端的知识点 <a href="https://link.jianshu.com?t=https://github.com/ddwhan0123/Useful-Open-Source-Android" target="_blank" rel="nofollow">https://github.com/ddwhan0123/Useful-Open-Source-Android</a></p> <p>昨天用webpack把我们的项目跑了起来，没看的可以看下，比较有条理性：<a href="https://link.jianshu.com?t=http://blog.csdn.net/ddwhan0123/article/details/55095661" target="_blank" rel="nofollow">http://blog.csdn.net/ddwhan0123/article/details/55095661</a></p> <hr> <p>今天我们就要写react的内容了，首先先要用npm来下载相关需要的依赖库</p> <p>分别是react和react-dom</p> <pre><code>npm install --save react react-dom </code></pre> <p>当你下完react相关后就要解决es6和jsx的支持，这部分交由Babel解决</p> <pre><code>npm install --save-dev babel-cli babel-preset-react npm install --save-dev babel-cli babel-preset-es2015 </code></pre> <p>因为用Webpack构建项目，所以css 相关内容也可以像加载普通js一样处理，只需要加入几个加载库</p> <pre><code>npm install css-loader style-loader --save-dev </code></pre> <p>下完之后在配置文件里添加支持就好</p> <pre><code>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; </code></pre> <p>七大姑八大姨都配置好就可以干活了，我们写个简单的<code><H1></code>试试</p> <p>index.html</p> <pre><code><!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> </code></pre> <p>接下来看下入口js</p> <pre><code>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') ); </code></pre> <p>跑下来就是在页面上打了个hi all这里就不截图了。</p> <hr> <p>手写css不难，但是很烦，因为会瞎眼睛，找了找各种封装的库，找了个靠谱的，推荐给大家</p> <p><a href="https://link.jianshu.com?t=https://github.com/styled-components/styled-components" target="_blank" rel="nofollow">https://github.com/styled-components/styled-components</a></p> <pre><code>npm install --save styled-components </code></pre> <p>下载也是走 npm，下完就好，作者提供了一个供大家试玩的网站，地址如下：<br> <a href="https://link.jianshu.com?t=http://www.webpackbin.com/V1VNoINA-" target="_blank" rel="nofollow">http://www.webpackbin.com/V1VNoINA-</a></p> <p>对html的那些标签进行了封装，使用它就跟使用默认的html一样，整个css架构都跟着组件走，而不需要你从中调度。<br> 具体支持哪写可以看<a href="https://link.jianshu.com?t=https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js" target="_blank" rel="nofollow">https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js</a></p> <p>大致长这样</p> <img src="https://img.haomeiwen.com/i1441264/d60e5a15790e29e9"> 这里写图片描述 <p>使用起来也非常简单，我们把我们的demo加以修改</p> <pre><code>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') ); </code></pre> <p>改完后长这样</p> <br> <img src="https://img.haomeiwen.com/i1441264/d6f18210fa9a91a6"> 这里写图片描述 <p>使用完全就像使用常规html标签一样非常简便，加以简单的设置就可以达到任意你想要的效果</p> <p>这一篇内容比较简单，主要是开工前的准备第二期，但是组织好了好工具才会事半功倍吧？</p> </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/kxtcqttx.html"><img src="https://img.haomeiwen.com/is1441264/d60e5a15790e29e9" width="80"></a><h3><a href="/subject/pvvcwttx.html">试着用React写项目-利用styled-components解</a></h3><p>转载请注明出处：王亟亟的大牛之路啰嗦之前先安利，会渐渐丰富前端的知识点 https://github.com/d...</p></li><li id="r2"><a href="/user/zicqettx.html"><img src="https://img.haomeiwen.com/is5539663/6a7bde940f4ae47b.png" width="80"></a><h3><a href="/subject/mdrppftx.html">React天气预报</a></h3><p>用create-react-app创建项目样式用styled-components解决数据用redux交流定位用高...</p></li><li id="r3"><a href="/user/kxtcqttx.html"><img src="https://img.haomeiwen.com/is1441264/1b0d5bfd50ad8c2f" width="80"></a><h3><a href="/subject/clbswttx.html">试着用React写项目-利用react-router解决跳转路由</a></h3><p>转载请注明出处：王亟亟的大牛之路继续本周的大方向，继续学习React，昨天把简单的hi all内容呈现出来后，今...</p></li><li id="r4"><a href="/user/kxtcqttx.html"><img src="https://img.haomeiwen.com/is1441264/c56841406997d446" width="80"></a><h3><a href="/subject/nnwywttx.html">试着用React写项目-利用react-router解决跳转路由</a></h3><p>转载请注明出处：王亟亟的大牛之路这一篇还是继续写react router相关的内容，废话之前先安利：https:...</p></li><li id="r5"><a href="/user/kxtcqttx.html"><img src="https://img.haomeiwen.com/is1441264/16a07ce3614d2b63" width="80"></a><h3><a href="/subject/ufnvwttx.html">试着用React写项目-利用react-router解决跳转路由</a></h3><p>转载请注明出处：王亟亟的大牛之路本来想一下子把路由的接下来的内容都写完的，但是今天白天开了会，传了些代码打了个包...</p></li><li id="r6"><a href="/user/qhraixtx.html"><img src="https://img.haomeiwen.com/is20991285/0b448c5e7cb4e95b.png" width="80"></a><h3><a href="/subject/flzccktx.html">React学习笔记5-慕课案例学习</a></h3><p>创建项目 create-react-app jianshu 使用Styled-Components，减少样式的耦合...</p></li><li id="r7"><a href="/user/caxbjttx.html"><img src="https://img.haomeiwen.com/is4887432/9b63b604b5917269.png" width="80"></a><h3><a href="/subject/dktdqctx.html">react+typescript+antd随笔（一）</a></h3><p>最近在学习typescript，所以试着用typescript来写react项目，记录一下过程中遇到的一些问题及解...</p></li><li id="r8"><a href="/user/lzryjttx.html"><img src="https://img.haomeiwen.com/is4804313/c5ecf55177585676.jpg" width="80"></a><h3><a href="/subject/munylftx.html">用typescript写styled-components报错一</a></h3><p>小试 styled-components styled-components 是一个常用的很适合 React 技术...</p></li><li id="r9"><a href="/user/nyukkttx.html"><img src="https://img.haomeiwen.com/ud/12-aeeea4bedf10f2a12c0d50d626951489.jpg" width="80"></a><h3><a href="/subject/nfusbttx.html">android开发学习之Gson解析</a></h3><p>最近在学习一些新的知识，试着用MVP模式写项目。以前在项目中使用的都是JsonObject和JsonArray来解...</p></li><li id="r10"><a href="/user/hovibxtx.html"><img src="https://img.haomeiwen.com/is20452983/20a65f27ae092d49.png" width="80"></a><h3><a href="/subject/jqvxyktx.html">react项目中利用<iframe>标签嵌入 VUE项目</a></h3><p>目前公司官网用react写的。东西台多还比较繁重。索性利用iframe标签嵌入vue项目 vardata={'co...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul><li><a href="/c/bpxttttx.html">Web前端之路</a></li><li><a href="/c/eieptttx.html">React-Native 开发阵营</a></li><li><a href="/c/xjxttttx.html">让前端飞</a></li><li><a href="/c/lbtytttx.html">React Native开发</a></li></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">试着用React写项目-利用styled-components解</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/pvvcwttx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/bpxttttx.html">Web前端之路</a><a class="meiwen" href="/c/eieptttx.html">React-Native 开发阵营</a><a class="meiwen" href="/c/xjxttttx.html">让前端飞</a><a class="meiwen" href="/c/lbtytttx.html">React Native开发</a><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/jmvcwttx.html">《数学之美》——计算机里的高数概率论线代美</a></li><li><a class="meiwen" href="/subject/kmvcwttx.html">Swift中的闭包</a></li><li><a class="meiwen" href="/subject/qmvcwttx.html">其实我十分羡慕你们的热爱</a></li><li><a class="meiwen" href="/subject/fmvcwttx.html">我称这些时光叫：碎片</a></li><li><a class="meiwen" href="/subject/zpvcwttx.html">情人节快乐</a></li><li><a class="meiwen" href="/subject/apvcwttx.html">笔记</a></li><li><a class="meiwen" href="/subject/npvcwttx.html">那些被称作往事的东西</a></li><li><a class="meiwen" href="/subject/gpvcwttx.html">心灵点滴观后感</a></li><li><a class="meiwen" href="/subject/wpvcwttx.html">大家好，我是尹沉舟，我来简书啦</a></li><li><a class="meiwen" href="/subject/ppvcwttx.html">关于Handler.removemessages方法</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/bpxttttx.html">Web前端之路</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/yzkttttx.html">传统 Ajax 已死，Fetch 永生</a></li><li><a class="meiwen" href="/subject/amrttttx.html">安利一个14年撸的轮子 - Node.js 多版本管理器</a></li><li><a class="meiwen" href="/subject/uwuctttx.html">聊聊前端面试那点事儿</a></li><li><a class="meiwen" href="/subject/koqhtttx.html">怎样的页面更易读？</a></li><li><a class="meiwen" href="/subject/yjkrtttx.html">现在很多网站的字号都太小了</a></li><li><a class="meiwen" href="/subject/kijrtttx.html">Web 开发者必上的 10 个网站</a></li><li><a class="meiwen" href="/subject/pnejtttx.html">Web Workers 介绍</a></li><li><a class="meiwen" href="/subject/yzxstttx.html">淘宝前端工程师：国内WEB前端开发十日谈</a></li><li><a class="meiwen" href="/subject/fumetttx.html">免费高清！N个无/少版权限制的大图特供网站</a></li><li><a class="meiwen" href="/subject/ynwetttx.html">表单验证工具－－formFilter</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/eieptttx.html">React-Native 开发阵营</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/kjndqttx.html">Higher-order Components 高阶组件</a></li><li><a class="meiwen" href="/subject/soqlhttx.html">ReactNative的Atom编辑器</a></li><li><a class="meiwen" href="/subject/iberhttx.html">用Sublime 3作为React Native的开发IDE</a></li><li><a class="meiwen" href="/subject/qqrhlttx.html">React Native常用组件之ScrollView</a></li><li><a class="meiwen" href="/subject/lndwlttx.html">无状态组件(Stateless Component) 与高阶组件</a></li><li><a class="meiwen" href="/subject/feqzlttx.html">React Native 入门笔记</a></li><li><a class="meiwen" href="/subject/favedttx.html">React Native 引用第三方组件</a></li><li><a class="meiwen" href="/subject/gxcvdttx.html">React Native学习过程遇到的一些坑</a></li><li><a class="meiwen" href="/subject/uqcbdttx.html">React Native基础教程—从0开始构建RN应用</a></li><li><a class="meiwen" href="/subject/escbdttx.html">我的 React Native 技能树点亮计划の React </a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/xjxttttx.html">让前端飞</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/qylttttx.html">搭建博客方法汇总</a></li><li><a class="meiwen" href="/subject/pcyttttx.html">如何开始一个模块化可扩展的Web App</a></li><li><a class="meiwen" href="/subject/bruftttx.html">JavaScript中的property和attribute的区</a></li><li><a class="meiwen" href="/subject/htmftttx.html">Javascript - ES6,ES8,ES2017,ECMA</a></li><li><a class="meiwen" href="/subject/gcnftttx.html">web前端网站收藏</a></li><li><a class="meiwen" href="/subject/uwuctttx.html">聊聊前端面试那点事儿</a></li><li><a class="meiwen" href="/subject/anfrtttx.html">高效学习（一）互动篇：编程Vim正则表达式和英语</a></li><li><a class="meiwen" href="/subject/stqrtttx.html">CSS 最核心的几个概念</a></li><li><a class="meiwen" href="/subject/kijrtttx.html">Web 开发者必上的 10 个网站</a></li><li><a class="meiwen" href="/subject/btgrtttx.html">【字體】爲什麼在Medium上閱讀非常舒服？</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/lbtytttx.html">React Native开发</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/tcpftttx.html">升级至React Native 0.19 RC1</a></li><li><a class="meiwen" href="/subject/agusqttx.html">react-native 知名库</a></li><li><a class="meiwen" href="/subject/nvlvqttx.html">react native 准备</a></li><li><a class="meiwen" href="/subject/ydsvqttx.html">react-native中NavigatorIOS的使用</a></li><li><a class="meiwen" href="/subject/jzfmcttx.html">在现有App项目中使用React-Native(译)</a></li><li><a class="meiwen" href="/subject/pjkbcttx.html">React Native 中文版(含最新Android章节)</a></li><li><a class="meiwen" href="/subject/dzybcttx.html">React Native For Android初体验</a></li><li><a class="meiwen" href="/subject/ywaxhttx.html">平安科技移动开发二队技术周报（特别版のReact Native专</a></li><li><a class="meiwen" href="/subject/zkakhttx.html">Windows下搭建React Native开发环境</a></li><li><a class="meiwen" href="/subject/xwakhttx.html">整理了一份React-Native学习指南</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/pvvcwttx.html">试着用React写项目-利用styled-components解</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>