写在前面: 这里是初学者对于React的一些探索,包括学习语法、错误汇总。希望自己能够持续更新下去。💨
React 是一个用于构建用户界面(UI,对咱们前端来说,简单理解为:HTML 页面)的 JavaScript 库
create-react-app
是react官方提供一个脚手架工具,用于创建react项目
命令:
npx create-react-app 项目名称
启动项目:
yarn start
#
npm start
src目录:
index.js: 入口文件
创建元素在页面中渲染:
// 1. 导包
import React from 'react'
import ReactDOM from 'react-dom/client'
// 2. 创建虚拟DOM
// 参数1:创建元素的标签
// 参数2:一个配置对象
// 参数3:元素的内容
const VNode = React.createElement('h1',{},'hello world')
// 3. 挂载渲染虚拟DOM
ReactDOM.createRoot(document.querySelector('#root')).render(VNode)
在参数2中
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 创建
// 参数1:创建元素的标签
// 参数2:一个配置对象,加一些标签属性或事件处理
// 参数3:元素的内容
const Vnode = React.createElement(
'strong',
{
className: 'box',
id: 'title',
onClick: () => {
alert(111)
}
},
'我是标签内容'
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(Vnode)
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 创建
// 参数1:创建元素的标签
// 参数2:一个配置对象,加一些标签属性或事件处理
// 参数3:元素的内容,是一个字符串,也可以是数组
const VNode = React.createElement('ul',{className: 'list'},[
React.createElement('li',{},'vue'),
React.createElement('li',{},'react'),
React.createElement(
'li',
{},
React.createElement('a', {href: 'http://www.baidu.com'}, '百度一下')
),
])
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
嵌套方式太复杂,所以选择一种更简单的方式
JSX
是JavaScript XML
的简写,表示了在Javascript代码中写XML(HTML)格式的代码
优势:语法更加直观,与HTML结构相同,降低学习成本,提高开发效率。
JSX 不是标准的 JS 语法,是 JS 的语法扩展。脚手架中内置的 babel,用来解析该语法。
// 1. 导包
// import React from 'react' // 17.x 以后的版本不需要引入react
import ReactDom from 'react-dom/client'
// 2. 创建
const VNode = (
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
<Abc title> <abc TITLE>
<></>
幽灵节点( <React.Fragment></React.Fragment>
的简写)<a></a>
、<div />
)class
=> className
for
=> htmlFor
()
中(美观、且能防止被格式化插件自动插入分号产生 Bug){/* 这是jsx中的注释 */}
// 保存到额时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 当按tab键的时候,会自动提示
"emmet.triggerExpansionOnTab": true,
// jsx的提示
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
表达式:
不包含 JS 关键字,且能产生一个值的代码
字符串
、数值
、布尔值
、null
、undefined
、object( [] / {} )
1 + 2
、'abc'.split('')
、['a', 'b'].join('-')
、fn()
(条件 ?'xxx' : "yyy")
(arr[0], obj.name)
{<div>123</div>}
// 1. 导包
// import React from 'react' // 17.x 以后的版本不需要引入react
import ReactDom from 'react-dom/client'
// 2. 创建
const a = 100
const str = '哈哈😄'
const flag = true
const arr = [1, 2, 3]
const obj = {
name: '小花',
age: 18,
}
function sayHi() {
return '你好'
}
const VNode = (
<div>
{/* 数字和算术运算 */}
{a + 1 - 33}
<hr />
{/* 字符串 */}
{str}
<hr />
{/* 布尔值 */}
♥♥♥♥♥ {flag + ''} ♥♥♥♥♥♥
<hr />
{/* 数组的使用和方法调用 */}
{arr} ----- {arr.reverse()}
<hr />
{/* 对象 */}
{obj.name}
<hr />
{/* 三元表达式 */}
{obj.age >= 18 ? '欢迎~光临' : '未成年人谢绝入内'}
<hr />
{/* 函数调用 */}
{sayHi()}
</div>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
可以使用if/else
或三元运算符
或逻辑与(&&)运算符
不要在 jsx 中直接写 if/else 需要抽到单独的函数中
// 1. 导包
import ReactDom from 'react-dom/client'
// 2. 创建
const age = 18
// 不要在jsx中直接写 if/else 需要抽到单独的函数中
const fn = () => {
if (age >= 18) {
return <h1>您好,请进!</h1>
} else {
return <h1>未成年人谢绝入内</h1>
}
}
const VNode = <div>{fn()}</div>
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
可以使用数组遍历方法来实现
要为遍历生成的元素添加唯一性的
key
属性,一般是id
// 1. 导包
import ReactDom from 'react-dom/client'
// 2. 创建
const list = [
{ id: 1, name: 'sh', age: 22 },
{ id: 2, name: 'zs', age: 18 },
{ id: 3, name: 'vf', age: 14 },
]
const VNode = (
<div>
<ul>
{list.map((item) => {
return (
<li key={item.id}>
<h3>姓名:{item.name}</h3>
<h4>年龄:{item.age}</h4>
</li>
)
})}
</ul>
</div>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
// 1. 导包
import ReactDom from 'react-dom/client'
// 2. 创建
// 控制类名
import './index.css'
const VNode = (
<>
{/* 行内样式 */}
<div
style={{
width: '100px',
height: '100px',
backgroundColor: 'pink',
}}
></div>
{/* 类名 */}
<div className="box title"></div>
</>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)