1. 创建 react 项目

  npx create-react-app my-app

2. src 目录下删除 除了 index.js index.css app.js 的文件

3. 引入 styled-components 样式组件

  yarn add styled-components

4. 修改 index.css 改名为 style.js 并书写 style.js 写入 reset.css

  #style.js

import { createGlobalStyle } from 'styled-components';

export const Globalstyle = createGlobalStyle`

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

`

5. 修改 index.js 使 style.js 默认样式 作用于全局

import React, {Fragment} from 'react';

import ReactDOM from 'react-dom';

import { Globalstyle } from './style.js';

import App from './App';

const NewApp = (<Fragment>

<Globalstyle />

<App />

</Fragment>);

ReactDOM.render(NewApp, document.getElementById('root'));

1. react 简书 项目初始化的更多相关文章

  1. react 简书开发笔记

    详见文章<React简书开发实战课程笔记>

  2. react简书笔记一 环境, git 和 项目 关联

    1.. 建立git项目  ( 码云, github 都可以 ), 具体步骤: https://www.cnblogs.com/andy-lehhaxm/p/10720717.html 1.1  git ...

  3. react简书

    开发项目之前的准备 https://www.chromefor.com/  登录此网站 下载相关crx react插件 不然要FQ 下载 React Developer Tools 谷歌插件下载 Re ...

  4. React 简书

    create-react-app   jianshu yarn add styled-components -D       利用js写css样式  样式会更高效 https://github.com ...

  5. 2. react 简书 头部(header) 图标添加

    1. 访问 iconfont 并注册 登陆 2. 进入 iconfont 头部 图标管理->我的项目 3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可 4.在 搜索框 搜索 ...

  6. 4 react 简书 引入 redux 的 combineReducers 对 redux 数据进行管理

    1. src 下的 common 下的 header 创建 store 文件夹 下创建 reducer.js # src/common/header/store/reducer.js const st ...

  7. 3 react 简书 添加 头部搜索动态效果

    1. 添加动态效果组件 yarn add react-transition-group 2. 修改 src/common/header/index.js import React, {Componen ...

  8. 2. react 简书 头部 (header) 样式编写

    1. 在 src 下 创建 common 文件下 创建 header 文件夹下 创建 index.js #src/common/header/index.js import React, {Compo ...

  9. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

随机推荐

  1. Linux开机流程及运行级别

    启动流程: 没有运行程序的硬件除了会电人,没有别的用处.那么计算机是如何识别软件并执行的呢?下面介绍操作系统的开机启动流程: BIOS:开机时主动执行的第一个程序,会识别存储设备. MBR:第一个可开 ...

  2. 「POI2015」KIN

    传送门 Luogu 解题思路 想要做这道题,只要会维护区间最大子段和就好了. 而这个可以用线段树维护模板点这里 对于重复的情况,我们可以对每一个位置记一个前驱表示和当前位置种类相同的前一个位置. 然后 ...

  3. SpringBoot 解决“不支持发行版本xx”的问题

    原因:很多地方都要配置jdk版本,某些地方配置的jdk版本不同.比如你要使用jdk8,某些地方配成了jdk7. 最常见配置错的地方:Ctrl+Shift+Alt+S 如果没问题,查看Project中的 ...

  4. WebEx如何录制电脑内的声音

    WebEx如何录制电脑内的声音     事情是这样的,我需要参加一个网络课程,视频讲课的,但是呢,又因为自己白天需要干别的事,就想着怎么把视频录下来晚上回去看,找了WebEx录屏软件,尝试了下,录屏听 ...

  5. Ubuntu基于Apache为自己的网站开启HTTPS

    暂时放这里链接,之后整理 https://www.deanhan.cn/ubuntu-apache-https.html

  6. 010-PHP输出数组中第某个元素

    <?php $monthName = array(1 => "January", "February", "March",//初 ...

  7. 002-var_dump用法

    <?php $a = 2150; //小刘的工资2150 $b = 2240; //小李的工资2240 echo "a=" . $a . "  b=" . ...

  8. 数据结构——Java Stack 类

    定义 栈是Vector的一个子类,它实现了一个标准的后进先出的栈.堆栈只定义了默认构造函数,用来创建一个空栈. 堆栈除了包括由Vector定义的所有方法,也定义了自己的一些方法. 图例 在下面图片中可 ...

  9. JAVA面试题0 JAVA语言的基本知识

    JAVA语言的特点是什么? >面向对象:两个基本概念:类和对象:三大基本特性:封装.继承.多态: >健壮性:java吸收了C/C++的优点,但是去掉了它们影响健壮性的部分,例如指针和内存申 ...

  10. 《ES6标准入门》(阮一峰)--6.正则的扩展

    1.RegExp 构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new Re ...