1.基本语法
1.使用函数定义组件
1.1.区别于 vue component 小程序
1.2.注意 组件函数名必须
大写1.3只能包含一个
root元素
2. 基本结构
纯函数组件
无状态
function FirstComponent(){ return <h1> 第一个组件</h1> } // 单双标签都可以 ,但是注意 结束的/ 不能省 // ReactDOM.render(<FirstComponent> </FirstComponent>, box) ReactDOM.render(<FirstComponent />, app)
3.组件传参
1.函数式组件 顾名思义 就是函数 ,既然是函数的话 参数通常都在 参数里面
2.
函数调用的形式使用 通过参数传参3.
组件的形式,当组件/标签 使用的时候 通过属性传参
function HelloMessage(props) { // 使用组件传参数 此处的属性都会保存到组件中的props对象里面 console.log('props=>', props) return ( <h1> Hello React {props.name}---- {props.location} </h1> ) } const element = (<div> {HelloMessage({name:"函数",location:"react"})} <HelloMessage name="易经" location="天行健" /> </div>) ReactDOM.render(element, box2)
4. 简易的 简书 个人主页 界面
标题 文章列表 时间
基本的数据结构
var newsArr = [ { url: "https://www.jianshu.com/u/5b862adfdb97", content: "天行健,君子以自强不息;" }, { url: "https://www.jianshu.com/u/5b862adfdb97", content: "地势坤,君子以厚德载物" }, { url: "https://www.jianshu.com/u/5b862adfdb97", content: "随风巽，君子以申命行事" }, { url: "https://www.jianshu.com/u/5b862adfdb97", content: "渐雷震，君子以恐惧修省" } ]
4.1 标题
function HeadName(props) { return ( <div> <h1>{props.name}</h1> </div> ) }
4.2 列表
数组遍历
写
js就用{}和ejs类似的模板语法其实 熟悉之后你能发现 所有的模板一个样
这里边既然 写了
props.news传值的时候也就确定 属性了,其实这里用解构赋值也行,我这里后续再用
function Link(props) { console.log("props.news",props.news) return ( <div> <ul>{ props.news.map((item, index) => { return ( <li key={index}> <a href={item.url}>{item.content}</a> </li> ) }) } </ul> </div> ) }
4.3 时间
function TimeEnd(props) { return (<p> {props.time}</p>) }
4.4 组装 -整合
组件是可以互相嵌套的 !!! 其实 组件本身也就是积木一样 ,我们的程序 无非是积木堆起来的成品
大组件
function App() { return ( <div> <HeadName name="小破站" /> <Link news={newsArr} /> <TimeEnd time="2020-12-12" /> </div> ); } ReactDOM.render(<App />, box3)
样式 自己写吧
