react 粗略使用

时间:2023-03-10 02:34:40
react 粗略使用

1、首先在index.html页面上写好dom,给他一个id让他引用js里的react。

2、index.js里面的代码就是三步走。

第一步:引用react,各种引用依赖。

第二步:创建dom,但它是虚拟dom!

第三步:render()输出,render(return(<div></div>)),就可以将他映射到真正的dom上啦。

3、第二步——创建虚拟dom。

用到一个关键字,const。React提供一个创建虚拟dom的方法叫creatElement(‘元素类型’,属性节点 它可以为空 null或{},‘子节点’),这个方法里面至少要有这3个参数。

const mydiv=React.creatElement(‘div’,{id:'mydiv',title:'div aaa'},'这是一个文本子节点')

4、第三步——render渲染

render()里面要传两个参数。render(你要渲染的虚拟dom,在实体dom里面这个虚拟dom的容器 是那个标签的id)

reactDOM.render(mydiv,document.getElementById('app'));

5、jsx语法

由于createElement方法创建标签的过程太复杂,所以,用JSX语法,将HTML样式的标签转换成createElement的语法,虽然那些标签长得像html,但不是html,只是jsx的语法而已。说不定面试官会问这个问题哦,注意,不是html标签。

小提示:plugin是插件的意思哦,还有cmd里面,输入cls也可以清屏。之前说过ctrl+l的清屏方法,现在又多了一个。带s的就是数组,不带的就是对象。比如rules就是数组,module就是对象。

我的终端里面的清屏用的是cls,用ctrl+l不行,不知道为什么,可能是系统的原因吧。

webpack不会主动识别除了js之外的文件,所以会有第三方识别的规则。