react 的安装
npm i react react-dom
-
react 包是核心，提供创建元素，组件等功能
-
react-dom 包提供DOM相关功能
react的使用
- 引入react和react-dom的两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
- 创建React元素
// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let title = React.createElement('li', null, 'hellow react');
- 渲染到页面
// 渲染到页面
ReactDOM.render(title, root)
React脚手架（★★★）
npx create-react-app my-pro
启动项目,在项目根目录执行命令： npm start
脚手架中使用React
import React from 'react'
import ReactDOM from 'react-dom'
let h1 = React.createElement('h1',null,'我是标题')
ReactDOM.render(h1,document.getElementById('root'))
JSX的使用
注意:
-
React元素的属性名使用驼峰命名法
-
必须要有根节点,可以用<></>代替
-
特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
-
所有标签必须结束,如果没有子节点的React元素可以用
/>来结束 -
推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错
jsx语法
嵌入js表达式
语法：{JavaScritp表达式}
条件渲染
if else或三元或逻辑运算符
列表渲染
-
如果需要渲染一组数据，我们应该使用数组的 map () 方法
-
注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
-
原则：map()遍历谁，就给谁添加key属性
-
注意：尽量避免使用索引号作为key
let ul = (<ul> {arr.map(item => <li key={item.id}>{item.name}</li>)} </ul>)
样式处理
行内样式 style
<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>
{item.name}</li>
类名 -className
在js中进行引入，然后设置类名即可
