如何创建⾃⼰的第⼀个React页⾯⽬录
Rract是啥？
背景
React脚⼿架
JSX是什么
Rract是啥？
React 是⽤于构建⽤户界⾯的 JavaScript 库
构建⽤户界⾯. User Interface，对咱们前端来说，简单理解为：HTML 页⾯
javscrtipt库。不是框架，是库， react 全家桶才是框架
react 全家桶：
react: 核⼼库react-dom: dom操作react-router：路由,redux：集中状态管理
背景
Rract最⽜逼！全球使⽤最多
特点
声明式react router dom 6
⽤类似于html的语法来定义页⾯。react中通过数据驱动视图的变化，当数据发⽣改变react能够⾼效地更新并渲染DOM。
const list = [
{ id: 1, name: '前端', salary: 100000 },
{ id: 2, name: '后端', salary: 50 }
]
const title = (
<ul>
{list.map((item) => (
<li key={item.id}>
<h3>班级{item.name}</h3>
<p>⼯资{item.salary}</p>
</li>
))}
</ul>
)
组件化（虽然每个框架都有）
组件是react中最重要的内容
组件⽤于表⽰页⾯中的部分内容
组合、复⽤多个组件，就可以实现完整的页⾯功能
学习⼀次，随处使⽤
使⽤react/rect-dom可以开发Web应⽤
使⽤react/react-native可以开发移动端原⽣应⽤（react-native）
使⽤react可以开发VR（虚拟现实）应⽤
React脚⼿架
从零开始创建⼀个React项⽬
先全局安装脚⼿架⼯具包
命令：npm i -g create-react-app
⽤脚⼿架⼯具来创建项⽬
命令：create-react-app 项⽬名
执⾏完毕后，我们会得到这样⼀个⽂件夹
和Vue框架⼀样
1.src⽬录是我们写代码进⾏项⽬开发的⽬录
2.index.js是⼊⼝⽂件
在package.json中有这么个命令
可以输⼊
mpn run start
yarn start
运⾏项⽬
接下来我们删除src下的所有⽂件新建⼀个 index.js
⾥⾯引⼊react 和 react-dom
// 导⼊react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
中间写我们的结构
// 创建元素
const title = ateElement('h1', {}, 'hello react（createElement写的）')
但是createElement的效率太低了，我们可以使⽤jsx
JSX是什么
JSX：是 JavaScript XML的缩写。
在 JS 代码中书写 XML 结构
注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚⼿架中内置了 @babel/plugin-transform-react-jsx 包，⽤来解析该语法。
React⽤它来创建 UI（HTML）结构
理解：我们之前⽤html写页⾯，现在是⽤jsx来写页⾯
const title= <h1>HELLO REACT(jsx写的)</h1>
最终我们的代码会在public/index.html中渲染，所以我们在底部添加这么⼀⾏代码，渲染到页⾯上，webpack会实时⾃动打包，并把代码嵌⼊到public/index.html⽂件中，并执⾏。// 渲染react元素
通过上⾯的代码最终我们的页⾯都在 public/index.html⾥的 id=root 的div中渲染
这样我们就写出了⾃⼰的第⼀个React页⾯
到此这篇关于如何创建⾃⼰的第⼀个React 页⾯的⽂章就介绍到这了，更多相关React 创建第⼀个页⾯内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。