React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 React 入门学习笔记整理(五)-- state React 入门学习笔记整理(六)-- 组件通信 React 入门学习笔记整理(七)-- 生命周期 React 入门学习笔记整理(八)-- todoList React 入门学习笔记整理(九)--路由…

1.定义组件 1)函数组件 function GreateH(props){ return <div> <h2>hello,{props.name}</h2> </div> } ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root')); 2)类组件 class GreateH extends React.Component{ rende…

1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的值,并显示 class GreateH extends React.Component{ static defaultProps = { name:'CoCo' }; constructor(props){ super(props); this.state ={ name:props.name } } ren…

1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过this.函数名去调用 class GreateH extends React.Component{ static defaultProps = {name:'CoCo'}; handler(){ console.log("click"); } render(){ return <div&…

1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,setState会导致组件重新渲染. class GreateH extends React.Component{ constructor(props){ super(props); this.state ={ name:'CoCo' } } handler(params){ this.setState(…

(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑定方法,可以在构造函数中完成. 注意:状态不会随着属性的更新而更新.为了保证属性和状态同步,通常需要状态提升. 2) static getDerivedStateFromProps(nextProps, prevState) 组件实例化和接收新属性时将会getDerivedStateFromProp…

(1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. React-router-dom React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由.例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom. 安装: npm…

使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下,输入Win+R输入cmd ,打开运行窗口,输入 node -v 显示版本号则表示安装成功.接下来可以看下是否安装npm,输入npm -v ,显示版本号则表示安装成功. 2.全局安装 npm i create-react-app -g. 安装完成之后,输入 create-react-app -V检测是…

先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; let h = <React.Fragment> <h2>hello</h2> <ul></ul> </React.Fragment>…

APP.js import React, { Component,createRef,Fragment} from 'react'; import Todos from './components/todos'; import Footer from './components/footer'; import './main.css'; class App extends Component { constructor(props){ super(props); this.state ={ to…