前端那些事之React篇--helloword
发布时间:2020-12-15 07:33:20 所属栏目:百科 来源:网络整理
导读:React的学习 用webstorm开发React要注意了,如果了用了webpack管理代码的话,一定要在webstrom设置里设置 点击settings --------搜索“safe writing”------------------去掉对应的勾如图所示: 环境的搭建 安装node npm 淘宝镜像 在github上搜索create-reac
React的学习
环境的搭建
目录结构
js模块化a.js var aaa=111; module.export=aaa; ---- b.js var value=require('./aa'); console.log(value) 简单的helloword的实现import React from 'react'; import ReactDOM from 'react-dom'; //定义react组件名称:一定要大写 var Hello=React.createClass({ /*******state属性用getInitialState()来设置默认的值*******/ getInitialState(){ return{ text:0,name:'今天下雨了' } },//两种方法 // render:function(){ render(){ //可以写下个变量 var name='小样'; var test="社会生活"; return( //后面一定是要jxs语法,只能是双标签 <div> <p>hello{name}</p> <p>hello{test}</p> {/*这里调用getInitialState方法的属性的值*/} <p>hello{this.state.text}</p> {/*react的点击事件必须遵循陀峰命名法*/} <button onClick={this.fun} >按钮</button> {/*一个组件只做一件事例如*/} <p>hello</p> {/*直接调用另一个组件的名称,单向数据流*/} {/*<Who name="你懂得!"/>*/} <Who name={this.state.name}/> {/*实现双向数据绑定效果,键盘不能输入,解决方法添加onChange事件*/} <input type="text" value={this.state.name} onChange={this.change}/> </div> ) },fun:function () { //获取组件内部state的默认值 var value=this.state.text; value++; //设置state的默认值,实现局部刷新 this.setState({ text:value }) },change:function (e) { this.setState({ name:e.target.value }) } }) //子组件设置props属性,父组件就可以拿到子组件的属性 var Who=React.createClass({ render(){ return( <div> {this.props.name} </div> ) } }) //渲染组件的名称 ReactDOM.render(<Hello/>,document.getElementById("root")) 组件生命周期图组件生命周期
组件化按照组件功能划分目录结构 初始化
存在期间
销毁期
/--------------------------------------------------------------------------------------------------------------------------/
react循环渲染数据import React from 'react'; import './child.css' var ChildB=React.createClass({ //放在state属性下面 getInitialState(){ return { item:[ '用户点击了1次','用户点击了1次','用户点击了1次' ] } },render(){ //用map方法来循环,o代表每一项,i代表个数 var value=this.state.item.map(function (o,i) { return( <li>{o}+{i}</li> ) }) return( <div className='child'> <p>子组件{this.props.name}</p> <ul> //调用循环的值 {value} </ul> </div> ) } }) module.exports=ChildB; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |