目录
一. react背景及它是什么?
React 起源于 Facebook(Meta) 的内部项目(2011,News Feed),之后又被用来开发网站(2012,Instagram),并于 2013 年 5 月开源。
它是一个用于构建用户界面的JavaScript库
二. React 特点
1.声明式
---只需要描述 UI(HTML)看起来是什么样子,就像写 HTML 一样简单,React 内部负责渲染 UI,并在数据变化时自动更新 UI。
2.组件化
把复杂的页面拆分成一个一个的单元,这些组成页面的基本单元就是组件,通过组合、复用组件来编写复杂界面的方式,就是组件化。
三 . 脚手架创建项目
1.命令是:npx create-react-app react-basic(这个是你创建的项目名字)
2.启动的命令是 :yarn start 或者 npm start
用npx创建脚手架项目的优点是:会调节最新的 create-reate-app 直接创建react项目
使用react脚手架来渲染页面的基本步骤
1.首先是 引入2个包 ---第一个是核心包(react),还有一个是dom的操作包(react-dom)
2.然后是调用react.createElement(里面有三个参数,1.标签名 2.标签属性 3.标签的内容 )方法创建react元素 ,它返回的是一个react元素(虚拟dom)
3.最后就是调用操作包也就是reactDOM.render()方法渲染react元素到页面(渲染也有两个参数,1.渲染的是谁 2. 渲染到哪)在上面我们使用React.createElement() 创建 React 元素的问题:它的使用繁琐,不直观,并且代码不容易维护
JSX 是什么
JSX 是 JavaScript XML 的简写,表示可以在 JavaScript 代码中写 XML(HTML) 格式的代码。
优势:声明式语法更加直观,与 HTML 结构相同,降低了学习成本,提高了开发效率,JSX 是 React 的核心之一。
1.使用 JSX 创建 React 元素
const title = <h1>Hello JSX</h1>
2.使用ReactDOM.render()方法渲染React 元素到页面中
ReactDOM.render(title, document.querySelector('#root'))
JSX 是如何工作的
JSX 需要使用 Babel 编译成
React.createElement()
的形式,然后配合 React 才能在浏览器中使用,而create-react-app
脚手架中已经内置了 Babel 及相关配置。JSX 使用注意点
必须有 1 个根节点,或者虚拟根节点
<></>
、<React.Fragment></React.Fragment>
。属性名一般是驼峰的写法且不能是 JS 中的关键字,例如 class 改成 className,label 的 for 属性改为
htmlFor
,colspan 改为colSpan
。元素若没有子节点,可以使用单标签,但一定要闭合,例如
<span/>
。
React@16.14
之前需要先引入 React 才能使用 JSX(这个也好理解,因为 JSX 最后还是要被转成React.createElement()
的形式)。换行建议使用
()
进行包裹,防止换行的时候自动插入分号的 Bug。
JSX中使用的表达式
1.单大阔号中可以使用任意的表达式(一定要是能产生结果的式子)如下
const name = 'zs' const age = 18 const title = ( <h1> 姓名:{name}, 年龄:{age} </h1> )
2.对象中的属性
const car = { brand: '思域', } const title = <h1>汽车:{car.brand}</h1>
3.数组中的某一项或者整个数组
const friends = ['张三', '李四'] const title = <h1>人名:{friends}</h1>
4.还可以调用方法
function sayHi() { return '你好' } const title = <h1>姓名:{sayHi()}</h1>
注意
js对象虽然也是表达式,但是不能直接嵌套在{}中,一般只会出现在style中
还有就是JSX本身也是表达式 如下:
const span = <span>我是一个span</span> const title = <h1>盒子{span}</h1>
小结:
JSX中可以包含任意的表达式(除了对象)
JSX中不能放语句,列如 : if , switch , for while 等等...
在JSX里面常用的是数组的map方法来生成列表结构---map返回新数组
关于key的作用
1.特点:key值要保证唯一,尽量避免使用索引号,key 在最终的 HTML 结构中是看不见的
2.加在哪里:map遍历谁,就把key加在谁上面
3.作用:react内部用来进行性能优化时使用的,key 在最终的 HTML 结构中是看不见的
样式处理
react中使用样式的两种方式:
1.行内样式
<div style={{ width: 200, height: 200, lineHeight: '200px', backgroundColor: 'black', color: 'white', textAlign: 'center', fontSize: 30 }}>React</div>
注意点:
a,为啥有两个{{ }}
,外层的 {}
表示要开始写 JS 表达式了,内层的 {}
表示是一个对象。
b,属性名是小驼峰格式,例如 background-color
需要写成 backgroundColor
。
c,属性值是字符串,如果单位是 px,可以简写成数值。
className
用className定义类名
1.首先是准备index.css文件,然后在 index.js
文件中通过 import './index.css'
引入文件
.title {
width: 200px;
height: 200px;
color: white;
background-color: black;
}
import './index.css'
<div className='title'>Hello React</div>
小结:
类名使用className,推荐
行内样式,<div style={{ color: 'red' }}>Hello</div>
--------------------------------------------------------------------------------------------------------------