前言:
休了两个月的假期,手头上的知识有点遗漏很多了,赶着在入职前复习一轮,正好把之前的东西做一个完整的归纳。【PS:所有的笔记都可能在日后做更新补充】
=============================================================================================
一、搭建一个React环境基础【由于是在一台新的电脑上搭建全新的环境,所以所有的安装都走一遍】:
(1) 电脑上有Node环境【下载安装环境:https://nodejs.org/en/】
(2)安装相应的编译器(个人用VsCode,可根据个人喜好进行不同编译器下载配置)【下载地址:https://code.visualstudio.com/download】
(3)cmd切换到工作文档目录(有Git控制软件可直接在文档目录下右击进入)
(4)命令行方法建立环境:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
在浏览器中出现REACT的图表及HelloWorld则说明环境搭建成功
注意:VsCode是有终端集成环境的可以用VS打开相应的目录环境后点击到终端进行相应第四步的操作,本质相同。
二、复习一下React的基础知识吧:
1. React的核心概念有:①Component②JSX③ref④props⑤state
2.
基础知识:
(1)方法-- ReactDOM.render(要渲染的元素,渲染指定的容器)
举例: ReactDOM.render(
Hello React
,document.getElementById('example'))
(2)babel--babel是js编译器,将es6\jsx等 转换为浏览器能识别的语法
转换之前:ReactDOM.render(
Hello React
,document.getElementById('example'))
转换之后: ReactDOM.render(
React.createElement('h1',null,"Hello React"),
document.getElementById('example')
)
(3)jsx(javaScriptXML)
什么是jsx? jsx并不是一种新的语法,只不过是允许在js中编写标签!
JSX
中的语法:
①如果遇到<,首字母小写就会使用html来解析,首字母是大写,让React按照组件来解析
②如果遇到{,就会使用js来解析
注意事项:
1.react
中,是不允许直接返回多个标签,可以放在一个顶层标签中!
2.{/*
这是一个注释 */}
GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_01.html&Demo_02.html为基础练习
3.
Component
组件【组件是一个可被反复使用的,带有特定功能的视图】
(1)React中组件的创建和使用
创建:
var Hello = React.createClass({
render:function(){
return
渲染的模板内容
}
})
使用:
注意事项
:
①组件类的名称 要符合全驼峰命名方式(首字母全大写)
②在render方法中返回要渲染的元素时,不允许直接换行
③不允许在组件类中直接渲染多个元素,但是可以放在一个容器中
④所有的元素在调用时必须有结束标记
参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_03.html
(2)复合组件---
允许在一个组件中调用其它的组件
参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_04.html
4.Props 属性(properties)
4.1 在React中 通过props属性来实现父与子的通信
实现步骤:
①传值
②接收
MyHello的组件中接收:
this.props.myname
参考练习:GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_05.html
4.2 事件绑定:onEvent={this.handleEvent}
举例: