React全家桶
关注
分享
扫一扫
文章平均质量分 85
React最新版本教程,后期会发布react-native教程
前端大白话
能用自己的力量站在这片大地上的人都是勇敢的人，而我想成为这样
展开
-
大白话React第一章基础入门
React 官方文档（https://reactjs.org/docs/getting-started.html ）就像是这个蛋糕制作团队的说明书，里面详细介绍了团队的各种工具和工作流程，一定要好好读一读。：想象一下，你要做一个特别复杂的蛋糕，直接在蛋糕胚上改来改去很容易把蛋糕弄坏。虚拟 DOM 就像是你先在纸上画好蛋糕的样子，反复修改设计图，觉得没问题了再动手做真正的蛋糕。在 React 开发里，JavaScript、HTML 和 CSS 就像是做蛋糕的三种关键原料，缺一不可。这个神奇的工具来帮忙。原创 2025-02-21 21:12:35 · 835 阅读 · 0 评论 -
npm run eject无法暴露配置文件
npm run eject无法暴露配置文件我在初始化一个react项目过程中使用npm run eject 暴露配置文件发现无法暴露配置文件并报错原因可能是你项目中某个文件没有用git选中提交报错如下解决方案git add .或者webstorm 当中右键选择你的项目弹出选项列表 选择git 里面有个 add + 之后就可以使用npm run eject 暴露文件了...原创 2020-02-24 11:59:02 · 482 阅读 · 0 评论 -
react中的数据共享之rudex不断更新中
redux1.1redux简介 redux是将react数据进行共享存储的一个仓库 redux是由Facebook官方使用的是 Flux 框架演化而来 redux通常用于中大型项目或者比较复杂的组件传值。...原创 2018-09-07 21:36:51 · 689 阅读 · 0 评论 -
react二级路由自己摸索
react二级路由 react二级路由，我使用的是react项目模版组件化的二级路由，所用的路由模式是哈希模式，因为写二级路由的话使用 BrowserRouter路由配置二级路由，会出现bug，需要进行重定向特别麻烦所以用哈希简单，效率高 一下是一级路由 这是一级路由的出口文件源码import React, { Component } from 'react';import { ...原创 2018-06-28 14:55:10 · 7177 阅读 · 2 评论 -
react入门之-------组件传值代码解析
react入门之——-组件传值react的组件传值方式有父传子，子传父，非父子首先是组件传值有两种方法1、函数式组件传值 2、类组件传值一、父传子–简化版 1、函数式组件传值 <!DOCTYPE html> <html> <head> <meta charset="原创 2018-06-11 12:14:13 · 321 阅读 · 0 评论 -
react无状态组件和有状态组件的区别
react无状态组件和有状态组件的区别无状态组件：无状态组件(Stateless Component)是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。有状态组件：在无状态组件的基...原创 2018-06-22 11:54:43 · 2056 阅读 · 0 评论 -
react实现星级评分组件代码
react电影星级评分组件封装import React, {Component} from 'react';export class Star extends Component { constructor(props) { super(props) console.log(this.props.name) this.state={...原创 2018-06-23 14:19:25 · 5412 阅读 · 5 评论 -
React购物车组件代码
这是使用react框架项目做得购物车import React, { Component } from 'react';import {Tabs} from './Tabs'import 'whatwg-fetch'import '../assets/css/Tab3.css'import {Link} from 'react-router-dom'export class ...原创 2018-06-06 21:30:47 · 4917 阅读 · 8 评论 -
react出现内存泄漏的原因及解决方法
react出现内存泄漏的原因及解决方法今天我在写项目的时候出现了报错，经过翻译说是存在内存泄漏。 警告：不能在卸载组件上调用setState（或强迫）。这是一个无操作，但它表示应用程序中的内存泄漏。要修复，取消组件中的所有订阅和异步任务。 在Tab（由Main创建） 解决方法 在组件中不同时存在挂载和更新负责回报内存泄漏，解决方法删除其中一个生命周期钩子函数...原创 2018-06-10 18:22:48 · 9416 阅读 · 0 评论 -
react 二级tab切换+feth渲染数据 源码
react 二级tab切换，有点象二级路由，声明我的数据都是fetch渲染的json数据 实现思路<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &原创 2018-06-10 19:49:51 · 1009 阅读 · 0 评论 -
react入门------第一章react介绍
react介绍 react是什么 React是一个用于构建用户界面的 JAVASCRIPT 库，React主要用于构建UI，很多人认为 React 是 MVC中的 V（视图）。 react起源 React起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一...原创 2018-05-17 17:40:52 · 373 阅读 · 0 评论 -
react入门---------- 第二章如何使用react
如何使用react react的使用离不开三个核心库 react.js 核心的js文件 react-dom.js dom操作 babel.js 将jsx(允许js和html混写) 转化为浏览器能够支持的es5使用方法 使用nodejs NPM安装 react ...原创 2018-05-19 08:20:35 · 213 阅读 · 0 评论 -
react入门--------第三章react和vue的区别
react入门--------第三章react和vue的区别react和vue的区别要从列表渲染、条件渲染、事件绑定、属性绑定 vue 1、列表渲染 v-for 2、条件渲染 v-if 3、事件绑定 v-on 4、属性绑定 v-bind react ...原创 2018-05-19 08:31:55 · 471 阅读 · 0 评论 -
react生命周期构造函数
react生命周期构造函数1.componentWillMount在完成首次渲染之前调用，此时仍可以修改组件的state。2.render必选的方法，创建虚拟DOM，该方法具有特殊的规则：只能通过this.props和this.state访问数据可以返回null、false或任何React组件只能出现一个顶级组件（不能返回数组）不能改变组件的状态不能修改DOM的输出3.componentDidMo...原创 2018-05-17 14:34:21 · 470 阅读 · 0 评论 -
React模板创建及路由配置
React模板创建及路由配置react模板创建1、全局安装：npm install -g create-react-app2、创建react 模板create-react-app 你的项目名3、进入你的项目模板cd 你的项目名4、运行你的项目npm start...原创 2018-05-17 12:14:09 · 13520 阅读 · 0 评论 -
react+fetch+api接口渲染数据移动端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content原创 2018-05-16 14:24:40 · 1360 阅读 · 0 评论 -
react+axios+api接口 渲染数据 代码
react+axios+api接口 渲染数据 源码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewpo原创 2018-05-15 09:45:42 · 2509 阅读 · 0 评论 -
react +axios渲染数据 非父子组件传值tab切换 源码
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta cha原创 2018-05-13 18:50:42 · 673 阅读 · 0 评论 -
react 父子组件传值tab切换二if条件判断
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;原创 2018-05-13 18:57:13 · 644 阅读 · 0 评论 -
react 父子组件传值tab切换 源码
react 最简单的选项卡 源码&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;q原创 2018-05-09 08:09:06 · 798 阅读 · 0 评论