react 基础
2022年9月24日1.安装
|
1 |
npx create-react-app zf-react-demo |
2.基础渲染h1 src/index.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react' //通过 react 创建虚拟dom import ReactDOM from "react-dom"; //把 react 创建的虚拟dom渲染到页面中 const element = React.createElement( 'h1', {id: 'box', title: '哈哈'}, '我是内容' ) ReactDOM.render(element,document.getElementById('root')) |
2.基础渲染 list
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from 'react' //通过 react 创建虚拟dom import ReactDOM from "react-dom"; //把 react 创建的虚拟dom渲染到页面中 const element = React.createElement( 'ul', {className: 'list'}, [ React.createElement('li', null, '香蕉'), React.createElement('li', null, '苹果'), React.createElement('li', null, '大鸭梨'), ] ) ReactDOM.render(element, document.getElementById('root')) |
JSX
- JSX 是 javascript XML 声明式语法更加直观,与html结构相同,降低学习成本
- jsx 需要经过babel编译处理脚手架默认有了这个配置
- JSX必须有一个根节点<></> <React.Fragment></React.Fragment> 没有节点可用/>结束
- JSX语法更接近javascript
class => classNamefor =〉htmlFor
基础使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import ReactDOM from "react-dom"; //把 react 创建的虚拟dom渲染到页面中 const element = <div className='app'> <h1>你好世界</h1> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul> </div> ReactDOM.render(element, document.getElementById('root')) |
JSX中嵌入JavaScript表达式
- 不要出现语句，比如
iffor
基础使用
|
1 2 3 4 5 6 7 |
const name = 'zs' const age = 18 const title = ( <h1> 姓名：{name}, 年龄：{age} </h1> ) |
可以访问对象的属性
|
1 2 3 4 5 6 7 8 |
const car = { brand: '玛莎拉蒂' } const title = ( <h1> 汽车：{car.brand} </h1> ) |
可以访问数组的下标
|
1 2 3 4 5 6 |
const friends = ['张三', '李四'] const title = ( <h1> 汽车：{friends[1]} </h1> ) |
可以使用三元运算符
|
1 2 3 4 5 6 |
const gender = 18 const title = ( <h1> 性别：{age >= 18? '是':'否'} </h1> ) |
可以调用方法
|
1 2 3 4 |
function sayHi() { return '你好' } const title = <h1>姓名：{sayHi()}</h1> |
JSX本身
|
1 2 |
const span = <span>我是一个span</span> const title = <h1>盒子{span}</h1> |
JSX中的注释
|
1 2 |
const span = <span>我是一个span</span> const title = <h1>盒子{/* 这是jsx中的注释 */}</h1> |
jsx 条件渲染
- jsx内部不要出现语句，比如
iffor
通过判断if/else控制
|
1 2 3 4 5 6 7 8 9 10 |
const isLoding = false const loadData = () => { if (isLoding) { return <div>数据加载中.....</div> } else { return <div>数据加载完成，此处显示加载后的数据</div> } } const title = <div>条件渲染：{loadData()}</div> |
通过三元运算符控制
|
1 2 3 4 5 6 7 8 |
const isLoding = false const loadData = () => { return isLoding ? ( <div>数据加载中.....</div> ) : ( <div>数据加载完成，此处显示加载后的数据</div> ) } |
逻辑运算符
|
1 2 3 4 5 6 |
const isLoding = false const loadData = () => { return isLoding && <div>加载中...</div> } const title = <div>条件渲染：{loadData()}</div> |
列表循环渲染
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import reactDOM from 'react-dom' const list = [ {id: 1, name: '1', salary: 15000}, {id: 2, name: '2', salary: 30000}, {id: 3, name: '3', salary: 40000} ] let listR = list.map((i, index) => (<li key={index}>{i.name}</li>)) let e = (<> <div>你好react</div> <ul> {listR} </ul> <ul> {list.map((i, index) => (<li key={index}>{i.name}</li>))} </ul> <ul> {list.map((i, index) => { if (i.salary >15000) { return ( <li> <div key={index}> {i.name} <p>{i.salary}</p> </div> </li> ) } } )} </ul> </>) reactDOM.render(e, document.getElementById('root')) |
样式设置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import './static/app.css' //导入样式 import reactDOM from 'react-dom' const list = [ {id: 1, name: '1', salary: 15000}, {id: 2, name: '2', salary: 30000}, {id: 3, name: '3', salary: 40000} ] const zfColor = 'red' const isOpen = false //行内 样式写法 let listR = list.map((i, index) => ( <li style={{color: zfColor, background: isOpen ? 'pink' : 'green'}} key={index}>{i.name}</li>)) let e = (<> <div>你好react</div> {/*导入包的方式写入样式*/} <ul className='zf-ul'> {listR} </ul> {/*控制变量改变className*/} <ul className={isOpen ? 'zf-ul' : 'zf-ul0'}> {listR} </ul> <ul className={`zf-${isOpen ? 'ul' : 'ul0'}`}> {listR} </ul> </>) reactDOM.render(e, document.getElementById('root')) |
