-
1、下载nodejs:https://nodejs.org/en/
lts - long time support 同时npm包管理工具也下载下来
2、reactjs官网:https://reactjs.org/
点击docs
点击右侧 create a new react app - create react app 创建react项目的脚手架
创建项目的命令行:
npx create-react-app 项目名
cd 项目名
npm run start - 自动启动初始化项目
查看全部 -
课程内容:react + redux
名词解释
react:facebook开源框架
react js 网页应用
react native 原生应用
react vr 全景式图像应用
react fiber:react16.0之后的react版本(16.1 16.2 16.3.......),因为这些版本改良了底层的核心算法,引入优先级、分片概念,使react代码运行更加流畅,尤其是处理复杂动画。
查看全部 -
什么是 jsx 语法?
在定义的组件中:
1.可以直接返回视图标签不报错。
2.外层必须要有一个根标签包裹着
3.根标签内部可以写 js 表达式,会自动编译,js 语句会报错
4. index.js 中 render 中引用组件时,组件名写在标签符号内。
jsx标签语法中还可以通过{}来写一下js表达式,不能写语句
查看全部 -
从项目入口、公共组件的作用、引入组件之后组件做了什么、怎么定义一个React组件,这四部了解整个项目的过程
1.项目入口在public/index.html2.src/index.js中引入的组件库的作用(React、ReactDOM)
React:识别组件
ReactDOM:渲染组件
3.首先我们声明一个App组件(首字母大写)使得React库识别到我们声明的是一个组件;
使用 ReactDOM自带的函数render使得组件能够渲染到页面中注意:这里有个观点:(点、面)
页面中的每个元素都可以是个组件(也可以理解成点);
整个页面的形式是一个个点的累积而形成的面
render函数可以携带两个参数(a,b)a:目标组件
b:目标DOM节点4.定义组件的方式:
第一种:class类继承的方式
列子:
import React ,{ Component } from 'react'
// 声明组件 继承React.Component类 或者可以写成class App extends React.Component{}class App extends Component{
render(){return {
// 组件内容
}}
}
export default App; //导出组件,如果不导出 外部无法使用
第二种:函数声明function App() {
return (
// 组件内容
);
}
export default App;
查看全部 -
this指向问题
查看全部 -
1:展开运算符[...](es6的写法)
2:setState()查看全部 -
1:jsx语法允许标签结构
2:{1+3}js的表达式不能写语句查看全部 -
1:reactDom 引入可以渲染内容 必须包含(render)
2:组件显示内容由render 导入, app导出查看全部 -
父组件通过属性的形式向子组件传递参数
子组件通过props接受props接受父组件传递过来的参数
子组件如果想和父组件通信,子组件要调用父组件传递过来的方法
查看全部 -
React的render() 方法内要求只能返回一个含有根元素的HTML元素,不能返回多个,可以使用<React.Fragment> 标签替代最外层的标签。
查看全部 -
import React, { Component, Fragment } from 'react'
查看全部 -
React.Fragment替换div包裹元素
查看全部 -
Create React App react脚手架工具
查看全部 -
this.handleBtnClick
这个this指的是当前TodoList
而handleBtnClick函数体中的this表示按钮,但是我们需要其指向TodoList,
解决方法:
this.handleBtnClick.bind(this)
查看全部 -
9999999999
查看全部
举报