React-概叙-JSX

Posted 2021-08-28 CaoPengCheng&

React-概叙-JSX

【1】概叙

写html页面或者构建web应用
只负责视图渲染

ES6:import,class

特点：
	（1）声明式
	（2）基于组件
	（3）学习一次，随处使用
		可以开发Web应用
		可以开发移动端原生应用（react-native）
		可以开发VR应用（react 360）

const jsx = <div className="app">
	<h1>Hello World! 动态变化数据：{count}</h1>
</div>

React安装
	npm i react react-dom
	npm install -g create-react-app
react核心包，提供创建元素，组件等功能
react-dom提供DOM相关功能（渲染）

【2】使用

（1）React引入

	<script src="./node_modules/react/umd/react.development.js"></script>
	<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

	//（2）创建React元素

const title = React.createElement('h1',null,'hello world')

	//（3）渲染React元素到页面中

ReactDOM.render(title,document.getElementById('root'))
	

const 声明变量
React.createElement('元素名称'，'元素属性'，'元素的子节点(包括以后所有节点)')
ReactDOM.render('要渲染的react元素','挂载点')

document.getElementById('root')找见页面id为root的DOM对象作为挂载点

	const title = React.createElement(
		'p',
		{title:'标题'，id:'p1'},
		'hello world'，
		const title = React.createElement('span',null,'Span节点')

	)
	
	ReactDOM.render(title,document.getElementById('root'))

React脚手架
创建项目：npx ceate-react-app 项目名称
启动项目：npm start

【JSX】

【1】JSX:

React 使用 JSX 来替代常规的 javascript
js中写xml或html

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展
我们不需要一定使用 JSX，但它有以下优点
	JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
	它是类型安全的，在编译过程中就能发现错误
	使用 JSX 编写模板更加简单快速

jsx特殊属性名改变
class->className
for->htmlFor
tabindex->tabIndex

	const title = (
		<h1 className="title">
			Hello JSX
			<span />
		</h1>
	)

【2】数据显示：

	const name = "jack"

	const title = (
		<h1 className="title">
			Hello JSX,{name}
		</h1>
	)		

【3】条件渲染：

const isLoading = true
	const loadData = () => {
		if(isLoading){
			return <div>loading...</div>
		}

		return <div>加载完成</div>
	}
	const title = (
		<h1 className="title">
			条件渲染：
			{loadData()}
		</h1>
	)