React 实践学习

冰冻三尺非一日之寒，积土成山，文章较长，内容具体

---

 

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渲染