# React.
## Day.01
- ##### 1.特点.
- 声明式 组件化 一次学习.随处使用,
- 对比vue. React 强调尽可能利用js自身语言能力编写ui 而不是通过组件增强html的功能
库.小而巧
框架.大而全
用于构建用户界面的javaScript库(做网页.)
a.用户界面
b.javaScropt库
- ---------------------------------
##### 2.脚手架创建项目
使用create-react-app 命令工具.
```
1.全局安装 / 不推荐.
npm i -g create-react-app
或
yarn add create-react-app
-------------------------
2.npx create-react-app react-basic 不需要更新 / 推荐.
启动项目 yarn start or npm start
3.npx是[email protected]版本的的简化命令
```
- --------------------------------
3.掌握JSX基本使用
- ```
const h3Ele = (
<div className='nmae'>
<ul>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
</ul>
</div>
)
ReactDOM.render(h3Ele, document.querySelector('#roou'))
```
------
js代码:
// 引入核心包
// 在使用JSX的时候 react版本在16.14之前需要引入.之后可以不引入
import React from 'react'
// 设计DOM 渲染的包
import ReactDOM from 'react-dom'
// 创建标签.标签上面的属性(对象).标签里的内容
const h1Ele = React.createElement(
'h1',//标签
{
title: 'Hello React',//标签里的属性.可以为null
},
'Hello World',//标签里的内容
React.createElement('span', null, '你好')
)
// 渲染到哪里
ReactDOM.render(h1Ele, document.querySelector('#root'))
const h2Ele = React.createElement(
'ul',
{
className: 'wrap'
},
React.createElement('li', null, 'React',
React.createElement('li', null, 'Vue',
React.createElement('li', null, 'Angular')))
)
ReactDOM.render(h2Ele, document.querySelector('#rooy'))
// JSX基本使用
// 必须要有一个根.<></> /或 <React.Fragment></React.Fragment>
// 使用class的使用必须是className
// 是虚拟节点.不会渲染.
const h3Ele = (
<div className='nmae'>
<ul>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
</ul>
</div>
)
ReactDOM.render(h3Ele, document.querySelector('#roou'))
// 结论.
// 在写JSX的时候外围用小括号包裹.
const age = 18
const fn = {
addres: '你好'
}
const arr = ['ifg', 'elest']
const show = () => {
return 'Hello Word'
}
const obj = age > 17 ? '已成年' : '未成年'
const span = <span>我是一个span</span>
const h4Ele = (
<div>
<p>简单变量:{age}</p>
<p>对象:{fn.addres}</p>
<p>数组:{arr[0]}</p>
<p>方法调用:{show()}</p>
<p>三元表达式:{obj}</p>
<p>JSX:{span}</p>
</div>
)
// 注意:
// JS 对象虽然也是表达式,但是不能直接嵌套在 {} 中,一般只会出现在 style 属性中。
// JSX 本身也是表达式。
ReactDOM.render(h4Ele, document.querySelector('#rooi'))
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<div id='rooy'></div>
<div id='roou'></div>
<div id='rooi'></div>
<div id='rooo'></div>
<div id='roop'></div>
<div id='rooq'></div>
<div id='roow'></div>
</body>
</html>
运用:
//需求:isLoading 是true.显示'加载中'/否则显示'加载完成'
// 方法1:
// const isLoading = true
// let h5Ele
// if (isLoading) {
// h5Ele = <h1>加载中...</h1>
// }
// else {
// h5Ele = <h1>加载完毕</h1>
// }
// 方法2:
// function render () {
// const isLoading = true
// let h5Ele
// if (isLoading) {
// h5Ele = <h1>加载中...</h1>
// }
// else {
// h5Ele = <h1>加载完毕</h1>
// }
// return h5Ele
// }
// ReactDOM.render(h5Ele, document.querySelector('#rooo'))
// 方法3:
function render () {
const isLoading = true
return <h1>{isLoading ? '加载中...' : '加载完毕'}</h1>
}
// const h5Ele = render()
// ReactDOM.render(h5Ele, document.querySelector('#rooo'))
ReactDOM.render(render(), document.querySelector('#rooo'))
const arrd = [
{ id: '1', name: 'React' },
{ id: '2', name: 'Vue' },
{ id: '3', name: 'Angular' },
{ id: '4', name: 'xxxx' }
]
const h6Ele = (
<ul>
{arrd.map((item) =>
<li key={item.id}>
{item.name}
</li>)}
</ul>
)
ReactDOM.render(h6Ele, document.querySelector('#roop'))
const arrq = [
{ id: '1', name: '一剑西来寒九州', salary: '西门各种吹' },
{ id: '2', name: '天生我才必有用', salary: '老子说了算' },
{ id: '3', name: '何必管他东西南北中', salary: '低调' }
]
const h7Ele = (
<ul>
{arrq.map((item) =>
<li key={item.id}>
<h3>名言:{item.name}</h3>
<p>作者:{item.salary}</p>
</li>
)}
</ul>
)
ReactDOM.render(h7Ele, document.querySelector('#rooq'))
import './index.css'
const h8Ele = (
<div className='box'
// style={
{
// width: 200,
// height: 200,
// lineHeight: '200px',
// textAlign: 'center',
// backgroundColor: 'black',
// color: 'white',
// }}
>
一剑西来寒九州
</div>
)
ReactDOM.render(h8Ele, document.querySelector('#roow'))