React 开发准备

Create by jsliang on 2019-04-25 16:20:59
Recently revised in 2019-05-31 14:51:17

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 前言

二 前言

返回目录

在使用 Create React App 搭建脚手架的时候,有些步骤是重复的,有时候甚至还会忘记这些配置的使用方法,故在此记录一些常用步骤(插件安装等),方便自己回顾。

三 初始化目录

返回目录

  1. 下载 Node.js
  2. 安装 Create React App:
    1. npm i create-react-app -g
  3. 开启新项目:
    1. create-react-app todolist
    2. cd todolist
    3. npm start
  4. 打包项目:npm build

项目目录:

- todolist
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
    - mainfest.json      —— 提供 meta 信息给项目,并与 serviceWorker.js 相呼应,进行离线 APP 定义
  - src ——————————————————— 项目主要目录
    - App.css            —— 主组件样式
    - App.js             —— 主组件入口
    - App.test.js        —— 自动化测试文件
    - index.css          —— 全局 css 文件
    - index.js           —— 所有代码的入口
    - logo.svg           —— 页面的动态图
    - serviceWorker.js   —— PWA。帮助开发手机 APP 应用,具有缓存作用
  - .gitignore ———————————— 配置文件。git 上传的时候忽略哪些文件
  - package-lock.json ————— 锁定安装包的版本号,保证其他人在 npm i 的时候使用一致的 node 包
  - package.json —————————— node 包文件,介绍项目以及说明一些依赖包等
  - README.md ————————————— 项目介绍文件

当然,一般我们都需要进行项目定制化,有些功能不需要的(例如 Service Worker),有些文件不需要的(例如 logo.svg),有些文件需要修改的(例如 index.html),就需要进行简化下:

- demo
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    + mock               —— 本地 Mock 文件夹
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
  - src ——————————————————— 重要的目录
    + api                —— 封装 API 接口文件
    - assets             —— 静态资源文件夹
      + img              —— 图片资源文件夹
    + components         —— 共用组件
    + pages              —— 路由页面
    + store              —— 全局配置 store
    - style              —— 全局配置样式
      - index.css        —— 全局样式
      - reset.css        —— 重置浏览器样式
      - common.css       —— 项目复用样式
      - icon.css         —— 图标样式
    - App.js             —— 主组件入口
    - index.js           —— 所有代码的入口
  - .gitignore ———————————— 配置文件。Git 上传的时候忽略哪些文件
  - package.json —————————— Node 包文件。介绍项目以及说明一些依赖包等
  - README.md ————————————— 项目介绍文件

Reset CSS

reset.css

/* 
  * reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
  * The purpose of reset is not to allow default styles to be consistent across all browsers, but to reduce the potential problems of default styles.
  * create by jsliang
*/

/** 清除内外边距 - clearance of inner and outer margins **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 结构元素 - structural elements */
dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */
pre, /* 文本格式元素 - text formatting elements */
form, fieldset, legend, button, input, textarea, /* 表单元素 - from elements */
th, td /* 表格元素 - table elements */ {
  margin: 0;
  padding: 0;
}

/** 设置默认字体 - setting the default font **/
body, button, input, select, textarea {
    font: 16px/1.5 '黑体', Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; }

/** 重置列表元素 - reset the list element **/
ul, ol { list-style: none; }

/** 重置文本格式元素 - reset the text format element **/
a, a:hover { text-decoration: none; }

/** 重置表单元素 - reset the form element **/
button { cursor: pointer; }
input { font-size: 16px; outline: none; }

/** 重置表格元素 - reset the table element **/
table { border-collapse: collapse; border-spacing: 0; }

/*
  * 图片自适应 - image responsize 
  * 1. 清空浏览器对图片的设置
  * 2. <div>图片</div> 的情况下,图片会撑高 div,这么设置可以清除该影响
*/
img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; }

/* 
  * 默认box-sizing是content-box,该属性导致padding会撑大div,使用border-box可以解决该问题
  * set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger
*/
div, input { box-sizing: border-box; }

/** 清除浮动 - clear float **/
.jsliang-clear:after, .clear:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.jsliang-clear, .clear {
  *zoom: 1;
}

/** 设置input的placeholder - set input placeholder **/
input::-webkit-input-placeholder { color: #919191; font-size: .32rem } /* Webkit browsers */
input::-moz-placeholder { color: #919191; font-size: .32rem } /* Mozilla Firefox */
input::-ms-input-placeholder { color: #919191; font-size: .32rem } /* Internet Explorer */

Npm Install

  • 安装 Redux:npm i redux -S
  • 安装 React-Redux:npm i react-redux -S
  • 安装 Redux-Saga:npm i redux-saga -S
  • 安装 React-Router:npm i react-router-dom -S
  • 安装 Ant Design:npm i antd -S
  • 安装 Axios:npm i axios -S

  • 总:cnpm i redux react-redux redux-saga react-router-dom antd axios -S

React Router DOM

案例

import React, { Fragment } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Header from './components/Header';
import TimeLine from './pages/TimeLine';

function App() {
  return (
    <Fragment>
      <BrowserRouter>
        <Header />
        <Route path="/" exact component={TimeLine}></Route>
      </BrowserRouter>
    </Fragment>
  );
}

export default App;

jsliang 广告推送:
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看!

图 图

知识共享许可协议
jsliang 的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-05-31 14:51:17

results matching ""

    No results matching ""