1、本地配置代理服务:   create-react-app 创建的react项目

package.jsoin 中 加入:

  "proxy": "http://localhost:8000"

 即可。

2、react引入图片

import xxx from './xxx.png'
... <img src={xxx} />
或 <img src={require('./xxx.png')} />

3、组件生命周期

装载组件触发

componentWillMount

只会在装载之前调用一次,在 render 之前调用,你可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render

componentDidMount

只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的 DOM 节点。

更新组件触发

这些方法不会在首次 render 组件的周期调用

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate

卸载组件触发

  • componentWillUnmount

3、嵌入复制插件

componentDidMount() {
this._notificationSystem = this.refs.notificationSystem;
let url = window.location.host + '/Bussiness/' + this.props.match.params.id;
let v = this;
new Clipboard('#copyBtn', {
text() {
v._notificationSystem.addNotification({
title: 'Success',
message: '已复制!',
autoDismiss: 3,
level: 'success',
position: 'tr'
});
return url;
}
});
}

4、项目结构:

5、定义routes

import React from 'react'
import {BrowserRouter,Route} from 'react-router-dom' import Home from '../views/Home'
import GamePage from '../views/GamePage' const routes = (
<BrowserRouter >
<div>
<Route path="/" component={Home} exact />
<Route path="/game" component={GamePage} />
</div>
</BrowserRouter>
) export default routes;

6、修改 node_modules\react-scripts\config\webpack.config.dev.js 中 ,以支持  css modules (样式模块化)

  

test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]-[hash:base64:5]",
},
},

7、添加 装饰器支持 即: @connect 形式的注册 redux

  

cnpm i --save-dev babel-plugin-transform-decorators-legacy

  修改 node_modules\react-scripts\config\webpack.config.dev.js 中

  

{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: ["transform-decorators-legacy"]
},
},

8、  index.css 中引入 reset.css 必须

@import "./assets/reset.css";

react 学习日记的更多相关文章

  1. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  2. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  3. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  4. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

  5. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  6. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  7. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  8. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  9. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

随机推荐

  1. C# 读取txt文件内容

    if (!System.IO.File.Exists(@"E:\\111.txt")) { Console.Write("没有找到文件!"); } System ...

  2. Ubuntu 14.04 编写service 服务

    有时我们需要将特定操作封装成服务,通过服务启动停止,例如nginx的启动停止,service nginx start 或者service nginx stop 下面我们将编写一个demo cd /et ...

  3. html 表格中添加圆

    效果: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  4. shell 字符串提取数字

    echo "2014年7月21日" | tr -cd "[0-9]" 这样就可以提取出2014721

  5. django路由转发

    一.路由转发 通常,我们会在每个app里,各自创建一个urls.py路由模块,然后从根路由出发,将app所属的url请求,全部转发到相应的urls.py模块中. 例如,下面是Django网站本身的UR ...

  6. Flutter学习笔记(四)--Flutter几个小知识点

    Flutter的Widget采用的是现代化的React风格,该风格的设计灵感来源于React这么语言.最核心的理念是你可以使用Widget设计界面.Widget通过当前的state和注册信息来描述vi ...

  7. Machine Learning 资料

    Awesome系列 Awesome Machine Learning Awesome Deep Learning Awesome TensorFlow Awesome TensorFlow Imple ...

  8. iframe 通信问题

    iframe作用: 1:页面部分刷新(iframe也是一个window,html是完整的不是部分html片段) 2:跨域 3:父子window通信 iframe1.window.xx=xx;paren ...

  9. iconfont使用方法

    最近才发现一种新的iconfont的使用方法 http://www.iconfont.cn/ 经常使用的图标放在一个项目里 需要关注的几点: 使用方法有三种方式unicode  , font clas ...

  10. DownLoadImage

    Private Declare Function URLDownloadToFile Lib "urlmon" Alias "URLDownloadToFileA&quo ...