冰冻三尺非一日之寒,积土成山,文章较长,内容具体
React简介
用于构建用户界面的 JavaScript 库,就是将数据渲染为HTML视图 的js库。
特点
- 组件思维
- 单向数据流
- 虚拟DOM节点
创建一个React项目
安装与创建
输入安装命令:
npm i create-react-app -g
安装成功会显示:
创建:
create-react-app myreact
出现此画面创建完毕
输入命令运行项目
项目运行成功就是酱紫的:
简易React案例
万物皆可Hello Word,来看看React的Hello Word吧
创建一个App组件,返回一个DOM节点
function App(){
//返回一个Dom节点
return (
<div>
<h1>你好react</h1>
</div>
)
}
运行结果:
也可以返回一个数组、行内样式
//导入css
import './App.css';
//定义一个数组
const arr = [
<p key="a">我要学习react</p>,
<p key="b">学习react我很快乐</p>,
]
//定义一个行内样式
const stl = {
fontSize:'30px',
color:"#f00"
}
//创建一 个App组件
function App(){
//返回一个Dom节点
return (
<div>
<h1 class="myh">你好react</h1>
{arr}
{<p style={stl}>应用样式</p>}
{/*<p style={stl}>应用样式</p>*/}
</div>
)
}
//导出App组件
export default App;
运行结果:
JSX语法
- 有且只有一个根节点
- { }里写js
- class改成className
- 数组可以包含html
- 对象样式自动展开
- {/* */}注释
渲染语法
元素描述了你在屏幕上想看到的内容。
文本渲染
定义str const str = "hello react"
实例:
function App(){
return (<div>
<h1>模板语法</h1>
<b>1.文本渲染</b>
<p>{str}</p>
<p>{3+3}</p>
<p>{str.split('').reverse().join('')}</p>
</div>)
}
export default App;
运行结果:
HTML渲染
定义:const msg = "good good stady, day day up~"
实例:
const str = "hello react"
const msg = "good good sta