- 博客(12)
- 资源 (3)
- 收藏
- 关注
原创 20 React项目生成及部署
react项目的部署和普通的web项目部署过程不同。下面来看一下整个项目从生成到发布的整个流程。一、项目生成1 进入项目文件夹,在此处打开命令行工具,输入“npx create-reacr-app my test”生成一个名为mytest的项目文件,如图:2 然后进入到这个文件夹,输入命令“npm start”启动项目,如图: 3 如上所示就是一个简单的...
2018-11-06 08:39:07 2764 3
原创 19 React——Ant Design(按需加载样式文件)
在上篇文章中我们简单介绍了Ant Design组件的使用,但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件,这对于前端页面来说并不符合其开发要求,接下来我们介绍css样式文件的按需加载。1 首先,我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具,输入“npm install react-app-rewired --save”,如图:2 ...
2018-11-06 08:38:42 3781
原创 18 React——Ant Design的使用
之前的文章都在介绍React的入门,我们从一个react项目的创建到组件的新建,再到路由的配置,最后的路由模块化。我们可以创建的都是一些简单的react页面,它的样式我们最然可以写css文件来修饰,但是工作量有点大。 接下来我们讲解react搭配使用的一套组件库——Ant Design。它类似于Bootstrap,里面提供了丰富的组件,我们只需配置环境后即可按需引用它们来...
2018-11-05 16:01:52 2058
原创 17 React——路由的模块化及嵌套
一、路由模块化 路由的模块化其实就是类似于vue中的路由模块化,我们通过定义一个数组,将路径和组件包含在里面,然后在配置路由的时候用模块化写法就可以,如下所示:1 定义路由路径及组件包:2 配置路由时用模块化写法:3 在src目录下新建一个route目录,在此目录下新建一个routes组件,然后将上述的数组剪切到这个文件中,如图: 4 最后,在根组...
2018-11-05 15:56:54 3842 4
原创 16 React——JS跳转路由(实现登陆功能)
运用JS跳转路由实现登录功能。具体操作如下:1 定义一个登录组件,里面包含两个输入框,一个提交按钮,三个表单控件写在一个<form>标签里,同时,我们定义form的onSubmit事件,阻止它提交页面防止页面刷新,如下: 2 我们在表单提交事件中获取输入框的值,并做判断,在此处使用了ref操作dom的写法,当然,我们也可以使用react双向绑定数据的写法,如下:...
2018-11-05 15:51:02 4254
原创 15 React——路由配置(动态路由&GET传值)
一、动态路由 我们通过配置基本路由,可以实现页面间的切换,但是如果在一个页面中有一列表标题,我们点击各个标题,就能进入到此标题所表示的内容页面中,这该如何实现呢,下面就要用到我们的动态路由了,实际效果如下图所示: 首先,我们已经在App根组件中已经配置了主页、新闻、产品三个组件的路由,如下: 接下来我们要在News组件中定义一组数据,然后将其渲染到...
2018-11-05 15:46:13 8720 1
原创 14 React——生命周期函数
生命周期函数其实是控制组件各个阶段所触发的事件,以下是常见的几种生命周期函数: 组件生命周期函数执行流程大致可以这样区分: 一般来说,componentDidMount方法里面放置dom操作和请求数据的代码。...
2018-11-05 15:37:23 411
原创 13 React——约束性组件&非约束性组件
非约束性组件: <input type="text" defaultValue="a" /> 这里面的defaultvalue其实就是原生DOM中的value属性,这样写出来的组件,其value值就是用户输入的内容,react完全不管理输入过程。约束性组件: <input value={this.state.data} type="t...
2018-11-05 15:34:48 644
原创 12 React——事件对象、表单事件、双向数据绑定
1 事件对象 react中点击一个按钮,然后调用一个方法,在这个方法定义时如果定义一个参数event,此时的这个event就是事件对象,我们可以通过在控制台输出它来查看,如图: 此对象有一个target属性,我们可以获取它来获取到此时点击的这个dom节点,如图: 进而,可以通过getAttribute()方法获取到节点...
2018-11-05 15:32:48 2049
原创 11 React——定义&执行方法、获取&改变this.state中的数据、方法传参
一、定义&执行方法、获取this.state中的数据 在react中定义方法的时候,可以在consructor()和render()平级定义方法,它们之间不能用逗号进行分割,如下所示: 上述定义的就是一个hello方法,向页面输出一段字母。 如果我们定义一个方法去获取this.state中的msg的值的时候,会牵扯到一个this指向的问题...
2018-11-05 15:13:12 6176
原创 10 React——绑定数据、引入图片、数组循环
在react中我们可以实现数据的绑定。可以绑定组件的属性数据、样式数据等,通过绑定后它们的显示效果和之前直接写在代码中相比并无差异,只是实现了代码和数据的分离,如下图:下面来看一下具体的实现方式。一、绑定数据1 绑定数据 绑定的数据我们一般要放在构造函数中,如下: 通过this.state定义我们要绑定的数据,然后在组件的属性值位置我们可...
2018-11-05 15:03:45 3221
原创 09 React——创建组件、使用组件
创建好一个react应用程序后,我们就需要创建组件并且使用组件,其实react开发本身就是创建组件、使用组件的过程。下面来看一下示例: 上图中的html页面上总共有三个组件:根组件、Home组件和列表组件,下面就具体聊聊该怎么创建这些组件以及如何使用它们。创建组件:1 我们修改一下默认创建的react应用程序的代码结构,在src目录下创建相应的文件夹及文件,方...
2018-11-05 14:52:46 376
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人