【web】React框架基础与JSX

最新推荐文章于 2024-06-02 21:27:33 发布

.贰叁

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量208

点赞数 2

文章标签：前端 react.js javascript 前端框架

本文链接：https://blog.csdn.net/weixin_51893107/article/details/127271910

版权

一、基础

介绍：起源于Facebook，于2013年5月开源。
特点：声明式设计；高效（减少dom操作）；灵活；JSX（JS拓展语法）；组件；单向响应的数据流。
虚拟DOM：把真实DOM树转成对象树，再通过diff算法，减少重绘于回流。
搭建环境（提前安装node环境）

①全局安装 create-react-app —— npm install create-react-app -g;

②创建一个项目create-react-app app的名字（cd app的名字；npm start 开始项目）；

③还有一种临时安装的方式：npx create-react-app app的名字;

④如果觉得下载的慢，可以使用nrm use taobao切换下载镜像。
文档介绍：

①README.md使用文档；

②node_modules所有的依赖安装目录；

③package-lock.json锁定依赖的版本号，团队开发时保持一致性；

④package.json项目的配置文件；

⑤public静态文件目录；

⑥src开发用源代码目录。

二、JSX

1. 基本使用

createElement方法过于繁琐

React.createElement("div",{id: "d1", className: "item"},
                    React.createElement("ul", null,
                    React.createElement("li",null, "ok"),
                    React.createElement("li",null, "yes"),
                    React.createElement("li",null. "no")))

<div id="d1" class="item">
    <ul>
        <li>ok</li>
        <li>yes</li>
        <li>no</li>
    </ul>
</div>

JSX：javascript xml

JSX是React的核心内容

使用JSX创建react元素：const title = <h1>123</h1>
原理：babel进行编译，转成js对象，用ReactDOM.render()方法将这个对象转成DOM元素，最后插入页面。
注意1：JSX不是ES的标准语法，它是ES的语法拓展；

需要使用babel编译处理后才能在浏览器环境中使用；

编译JSX的包: @babel/preset-react。
注意2：React元素的属性名使用驼峰命名法；

如果元素没有子节点，可直接使用单标签，但是以 />结尾；

可以使用()包裹JSX，以避免一些问题。

2.JSX中使用js表达式

语法：{JS表达式}

let ok = 123; 
const text=(
	<p>{ok}</p>
	）

3.条件渲染

可以使用if ，三元运算符，逻辑运算符。

let is = true;
const ok = () => { 
    if(is)return(<div>aaa</div>) 
    return(<div>bbb</div>)
}

4.列表渲染

使用数组的map方法

const books =[
	{id: 1, name: "西游记",author: "吴承恩"}，
    {id: 2,name: "水浒传",author:"施耐庵"}，
    {id: 3.name: "红楼梦",author: "曹雪芹"}，
    {id: 4,name: "三国演义",author:"罗贯中"}
]
const list =(
    <ul>
	{books.map(item => <li key={item.id}>书名:{item.name},作者:{item.author}	</li>)}
    </ul>
)