React基础

React基础

1. React是什么？
   用于架构用户界面的javascript库。
2. React的特点。

• 声明式
  你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
• 基于组件
  组件时React最重要的内容，组件表示页面中的部分内容
• 学习一次，随处使用
  使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

3. React的基本使用。

• React的安装
  npm i react react-dom
• 引入react react-dom的js文件
  使用script标签引入 react.development.js react-dom.development.js两个文件
• 创建react元素 参数一：元素名称；参数二：元素属性；参数三：元素的子节点。
  const title = React.createElement(‘h1’,null,‘Hello world!’)
• 渲染react元素（使用react-dom（ReactDOM）的render方法进行元素渲染） 参数一：要渲染的react元素；参数二：挂载点。
  ReactDom.render(title,document.getElementById(‘root’))

 <div id="root"></div>
    <script>
        const title = React.createElement('h1',null,'Hello React!')
        //要渲染的内容是title  渲染到的位置是div
        ReactDOM.render(title,document.getElementById('root'))
    </script>

4. React的脚手架的使用。

• React脚手架意义
  是开发现在web的必备
• 脚手架相关
  项目的入口js文件src/index.js
  项目的html文件是public/index.html
  后续的开发在src下
• 初始化项目
  命令： npx create-react-app my-app（my-app 是自定义项目名称 npm包的名字不能有大写App是错误的）
• 启动项目
  在my-app根目录下 使用命令 npm start开启
• 在脚手架中使用react
  导入react ：在src下的index.js（
  import React from ‘react’;
  import ReactDOM from ‘react-dom’;

JSX的使用

1. 简单使用

• 使用JSX语法创建react元素

const h1 = <h1>我是通过JSX创建的元素</h1>

• 使用ReactDOM来渲染元素

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

2. 为什么在脚手架中可以使用JSX语法？

• JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
• 需要使用babel编译处理后，才能在浏览器环境中使用
• create-react-app脚手架中已经默认有该配置，无需手动配置
• 编译JSX语法的包： @bable/preset-react

3. 注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
• 如果没有子节点的React元素可以用 /> 来结束
• 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错

4. JSX的模板语法

• jsx：javascript xml

5. 数据绑定 ：{ 变量 }（jsx => React.creatElement()）,变量可以是基本数据类型，也可以是数组、对象（但是这类数据往往使用循环输出），也可以是一段jsx表示的ui结构片段，也可以是一个函数。
6. 条件渲染，根据数据的不同，渲染不同的ui结构

• if…else来实现
• 三元运算符来实现、
• 逻辑与（a &&
  a
  ）

7. 循环渲染，使用数组的map方法映射出一组ui结构（jsx）

render(){
	return (
		<div>
			{[{a:1},{a:2},{a:3}].map(item => {
				<p key={item.a}>{item}</p>
			})}
		</div>
	)
}