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

啰嗦之前先安利，会渐渐丰富前端的知识点 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解决样式问题的更多相关文章

  1. 试着用React写项目-利用react-router解决跳转路由等问题（二）

    转载请注明出处:王亟亟的大牛之路 这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source- ...

  2. 试着用React写项目-利用react-router解决跳转路由等问题（一）

    转载请注明出处:王亟亟的大牛之路 继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套, 开始今天的内容前老规矩,先安利:https://g ...

  3. 试着用React写项目-利用react-router解决跳转路由等问题（三）

    转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...

  4. 试着用React写项目-利用Webpack搭环境

    转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  7. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  8. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  9. React初步学习-利用React构建个人博客

    React初步学习-利用React构建个人博客 用React和Webpack写了一个很简单的个人博客,主要是想要熟悉一下react中各种基本基本属性及方法的使用.在构建过程中碰到不少问题,通过阅读官方 ...

随机推荐

  1. struts2的s：iterator 标签 详解<转>

    struts2的s:iterator 可以遍历 数据栈里面的任何数组,集合等等 以下几个简单的demo: s:iterator 标签有3个属性:     value:被迭代的集合     id   : ...

  2. CCNP

    CCNP全称是:Cisco Certified Network Professional——思科认证网络高级工程师.CCNP专业人员表示通过认证的人员具有丰富的网络知识.获得CCNP认证的专业人员可以 ...

  3. 使用commons-email解析 eml文件

    在对eml文件进行索引的时候需要先对其进行解析,提取出其中的收件人.发件人.文件内容和附件等信息 下边是解析eml文件的一个demo(在运行之前需要先导入mail.jar 和commons-email ...

  4. 微信小程序 --- 动画

    动画的基本使用: 旋转动画 缩放动画 偏移动画 倾斜动画 矩阵动画 动画API:wx.createAnimation(object) 示例:创建一个点击的动画 <view class=" ...

  5. Thinkphp自定义工具类的使用！

    在使用Thinkphp做开发的时候,很多时候会用到一些自己写的类,为了方便管理,可以把这些类,单独放到一个文件里. 这就是自定义工具类: 首先在 Application 目录下新建 Component ...

  6. 【node】------node连接mongodb操作数据库------【巷子】

    1.下载第三方模块mongodb cnpm install mongodb --save 2.检测是否连接成功 1.引入第三方模块mongodb并创建一个客户端 const MongoClient = ...

  7. 【ES6】001---module模块------【巷子】

    001.前言 什么是模块化开发?   为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 怎么会有这么多js文件 ...

  8. opencv学习笔记——minMaxIdx函数的含义及用法

    opencv中有时需要对Mat数据需要对其中的数据求取最大值和最小值.opencv提供了直接的函数 CV_EXPORTS_W void minMaxLoc(InputArray src, CV_OUT ...

  9. 电子商务(电销)平台中订单模块(Order)数据库设计明细

    电子商务(电销)平台中订单模块(Order)数据库设计明细 - sochishun - 博客园 http://www.cnblogs.com/sochishun/p/7040628.html 电子商务 ...

  10. Python开发【Django】：组合搜索、JSONP、XSS过滤

    组合搜索 做博客后台时,需要根据文章的类型做不同的检索 1.简单实现 关联文件: from django.conf.urls import url from . import views urlpat ...