cvper's world !

（测试环境：windows）1. 第一步，需要一个目录，即一个文件夹， 这里我在 f 盘下建立了一个临时的 react-app-delete 目录，    目录里已经存在两个子目录 my-app  和  my-app-example ， 这里不用管（如下图）；2. 使用命令   npm install -g create-react-app  安装 create-react-app 这...

之前简单学习了react 组件是怎么写的，比如下面这个：import React from 'react';import './intro.css';export default class Intro extends React.Component { render(){ return( <div>我是简介页面</di...

在上一篇中，我们实现了项目默认进入首页，然后手动修改页面地址，显示相应的页面；现在我们实现下面的功能，进入项目，默认显示首页，首页中有三个按钮，点击相应的按钮，跳转到相应的页面； 我们需要做的是在上一篇项目的基础上增加点处理就可以了，我们使用上一篇中的所有代码； 现在默认显示的页面是 home，我们打开home.js 文件：import React from 'react...

今天使用 create-react-app 命令创建测试的react 项目，但是却出现了问题：始终是下面的状态，半天没有反应； 经历了一个下午的尝试，始终不行，换网络，开vpn ，也还是这样，关键还不报错；晚上尝试重启笔记本，然后稍等一会，成功了，重启大法好；...

之前，我们尝试了类似 tab选项卡功能的路由学习；现在我们来看下基本的各个页面间的路由的实现；下面实现一个基础的四个页面的项目的路由的处理： 我们默认进入首页 home， 也就是访问根目录的时候进入home 页面；当我们在地址栏中输入 /Intro 的时候，我们进入介绍页面；当我们在地址栏中输入/Func 的时候，我们进入功能页面；当我们在地址栏中输入/Show 的时候...

在写react 组件的过程中突然报错：'React' must be in scope when using JSX  react/react-in-jsx-scope查找了下导致的原因：import react, {Component} from 'react';react 应该大写，这里小写导致错误；...

react 页面样式的设置，和普通的页面样式设置没有太大区别；首先我们创建一个Index组件，目录如下：                                                               创建的这个Index组件只有一个index.js 文件和 index.css 文件； 我们先不管这两个文件中的内容，我们先把这个组件挂载到...

 使用 react-router-dom 中的 <Route> 组件，这个组件有个参数  exact ,下面举个例子,<Route path="/" component={Home} /><Route path="/introduce" component={Introduce} /><Route path="/detail"

之前我们了解了react-router-dom是路由的组件，下面看看这个路由的组件的使用；我们之前使用create-react-app 创建了简单的项目目录：my-app-level2，我们进入创建的项目目录中，使用 npm install --save react-router-dom 下载react-router-dom 这个模块，如下：安装完成之后，我们就可以使用这个路由的组...

在学习React 的过程中，当学习到路由的时候，就会发现 react-router 或者 react-router-dom 组件；这是已经写好的，可以直接拿来使用的react 路由组件； 第一个问题： 有的时候我们会看到有些react 的学习的例子中使用了 react-router ，另外一些却使用了                       react-router-dom (...

React 引入模块使用了 es6 的 import 的方式，在 示例中有如下代码：import {BrowserRouter as Router , Route, Switch, Link } from 'react-router-dom';上面使用了 import 语法，但是我们看到中间有个 as 的使用，这个 as 的意思是给当前的名字起一个小名，别名；我们原本是要引入...

之前我们基于 create-react-app 创建出下面目录结构的项目：  我们也简单了解了react 是如何使用 ReactDOM.render() 方法渲染我们的页面；一开始创建的项目在渲染的时候使用了组件的方式，但是我们在上一篇中演示了不用组件的方式来渲染页面；下面我们来使用组件的方式重新演示一下； 我们在 src 目录中新增一个Pages 目录，新增4个页...

为了优化react 项目在移动端的体验，可以 引入 fastclick ，解决点击延迟的类似问题；参考下载地址：https://www.npmjs.com/package/fastclick  我们在项目目录下使用命令： npm install --save fastclick进行安装安装完成之后，我们打开文件:  /src/index.js  ；先引入我们下载的fastcli...

我们通过create-react-app 创建了简单的 react 项目，也查看了这个自动创建的项目的目录；下面看一下，这个 react 页面是如何显示的：                                                            第一步，我们打开 public 目录下的index.html                即便我们对这个r...

1. 之前我们利用create-react-app 创建了一个简单的项目目录，如下图：    项目目录大概有四个部分，    第一个部分是所有的模块部分（node_modules），也就是项目需要用到的各种包，包括当前项目运行和编译所需要的所有    文件，也存放着后续我们增加的各种包，一般情况下不用管这块区域；    第二个部分（public）存放着我们的首页文件 index.h...

和 Vue 或者小程序类似，React 也有生命周期函数；react 生命周期官网参考文档：https://reactjs.org/docs/react-component.html#lifecycle-methods 下面通过例子来说明下面四个生命周期函数：constructor()   ，   componentWillMount()   ，  componentDidMoun...