![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
Mrs彬
带你上路,直到入坑
展开
-
10 react表单操作(未封装版) 喜欢点赞加关注!谢谢
import React, { Component } from "react"import { log } from "util";export default class Form extends Component { constructor() { super() this.state = { user: {//要提交给后端的数据 起名字后端叫什么我们也叫什么 username: '',原创 2021-03-31 22:16:17 · 88 阅读 · 0 评论 -
09 react 事件相关
一、事件绑定1、如何绑定事件2、如何传参3、Event如何获取4、如何阻止默认事件5、如何阻止事件传播二、react 绑定事件的两种方式1)箭头函数2)bindexport default class Event extends Component { alert1(){ alert(1) } render () { return ( <div> {/* 如何绑定事件原创 2020-12-07 20:50:13 · 103 阅读 · 1 评论 -
react数据操作
import React, { Component } from "react"export default class State extends Component { constructor() { super() this.state = { name: '张三', num: 10, json: { story: "呼号浩特", .原创 2021-03-30 20:26:43 · 196 阅读 · 0 评论 -
react组件传参
一、函数组件传参父组件传给子组件父组件 {/* 和vue一样自定义属性传参,接受和vue一样通过props */} <One msg={msg}></One>子组件子组件(函数组件)function One(props){ // one组件所有的属性 return( <div>你好我是one组件{/* 函数组件的第一个参数就是组件的所有信息 */} <p>{props.msg}</p原创 2021-03-16 09:01:17 · 106 阅读 · 0 评论 -
react 经典面试题
React面试题一、react优缺点优点:速度快跨浏览器兼容一切皆组件单项数据流Jsx语法缺点:1)首次加载时间过长(所有单页面都有这个缺点)2)如果要开发一个大型的项目,只有react是无法实现的,需要借助react-router-dom、redux等插件实现二、React解决了什么问题组件化:全部都是组件化开发效率:组件化,基于webpack,ES6的模块化思想运行效率:虚拟DOM机制可维护性:flux | redux(像vuex 也是状态管理,可以快速定位代码的错误)可以原创 2020-12-07 20:44:42 · 152 阅读 · 0 评论 -
08 react中渲染数据
React条件渲染React条件渲染(主要是三元运算符)import React, { Component } from 'react'class Three extends Component{ render(){ // 还没有说到state所以暂时现在这里定义 var el1=<div>收藏</div> var el2=<div>取消收藏</div> var isTrue=tru原创 2020-12-07 20:42:59 · 88 阅读 · 0 评论 -
07 react中组件的定义方式
1、函数定义1)在src中新建一个js文件2)在js内引入react(作用:引入了react才能使用jsx语法)3)函数中 return的内容就是你要显示在页面上的内容组件的使用 在index.Js入口文件中引入 App组件新建一个组件one.jsimport React from 'react'import WebsiteNav from './websiteNav'function One(props){ // one组件所有的属性 return( &l原创 2020-12-07 20:12:27 · 146 阅读 · 0 评论 -
06 react 脚手架目录结构说明
这里面的都可以不要,都可以删除Index.js和vue中的main.js一样是入口文件可以向我们之前写的一样写一个虚拟dom然后渲染.gitignore 上传git时忽略的文件 这样控制一些文件不用上传gitHup但是本地依然是存在的,只是上传githup时不会上传Package.json 放的是所有的依赖包Package-lock.json是自动生成的不用管Npm run startNpm run buildNpm run testNpm run eject我们使用的是npm .原创 2020-12-06 17:51:29 · 114 阅读 · 0 评论 -
05 react脚手架一次学会
一 。配置环境:1)安装Nodejs (注意配置环境变量)2)window+r 打开命令窗口 输入node -v3)接着输入 npm -v二、使用npm 可以正常下载react脚手架 但是会很慢解决方法 如下原下载地址:npm config set registry http://registry.npmjs.org设置国内淘宝径向一、安装淘宝镜像就可以使用 cnpmwindow+r 输入npm install -g cnpm --registry=https://registry.原创 2020-12-06 16:58:49 · 109 阅读 · 0 评论 -
04 react中jsx语法展示数据
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Do原创 2020-12-06 16:40:32 · 139 阅读 · 0 评论 -
03 react体验jsx语法
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Do原创 2020-12-06 16:35:39 · 101 阅读 · 1 评论 -
02 react初次体验-小试牛刀
一、新建一个html文件二、引入react.js和react-dom.js<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><meta http-equiv='X-UA-Compatible' content='ie=edg原创 2020-12-06 16:29:51 · 77 阅读 · 1 评论 -
01 react简介
React简单介绍1)React是用于构建用户界面的javascript库2)react不是mvc模式,它最多只能算是一个View(mvc中的v)3)react是faceBook开发的4)react引入了虚拟dom机制5)react使用了jsx语法6)react引入了组件化的思想React解决了什么问题?组件化:全部都是组件化开发效率:组件化,基于webpack,ES6的模块化思想运行效率:虚拟DOM机制可维护性:flux | redux(像vuex 也是状态管理,可以快速定位代码的错原创 2020-12-06 16:20:02 · 272 阅读 · 0 评论