React是什么?

一、React简介

1、React是Facebook开发的一款JS库。

2、React一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jquery、Backbone等。

3、它可以在浏览器端运行,也可以通过nodejs在服务端渲染。

4、React的思想非常独特,性能出众,可以写出重复代码少,逻辑清晰的前端代码。

5、React的语法是jsx,通过使用这种语法,可以在react代码中直接混合使用js和html来编写代码,这样代码的逻辑就非常清晰,当然也意味着,需要将jsx代码编译成普通的javascript代码,才能在浏览器中运行,这个过程根据实际项目情况,可以选择多种不同的思路,或者在服务器端通过webpack进行编译。

1、 声明式设计 -React采用声明范式,可以轻松描述应用。

2、以组件的方式开发

3、使用特殊的jsx(JavaScript XML)语法

4.、高效 -React通过对DOM的模拟使用了虚拟DOM,最大限度地减少与DOM的交互

TypeScript 复制代码
<div>
        { this.state.s.title }
        <ul>
              {
                this.state.list.map((item,index)=>{
 
                      return <li key={ index } > {  item  } </li>
                })
              }
          </ul>
</div>
 

JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。

React的优点有哪些:单向数据流、兼容性好、速度快!

二、项目结构

TypeScript 复制代码
├─ myreactapp
 ├─ README.md
 ├─ package-lock.json
 ├─ package.json
 ├─ public
 │  ├─ favicon.ico
 │  ├─ index.html
 │  ├─ logo192.png
 │  ├─ logo512.png
 │  ├─ manifest.json
 │  └─ robots.txt
 └─ src
    ├─ App.css
    ├─ App.js
    ├─ App.test.js
    ├─ index.css
    ├─ index.js
    ├─ logo.svg
    ├─ reportWebVitals.js
    └─ setupTests.js
相关推荐
清汤饺子20 分钟前
OpenClaw 本地部署教程 - 从 0 到 1 跑通你的第一只龙虾
前端·javascript·vibecoding
爱吃的小肥羊3 小时前
比 Claude Code 便宜一半!Codex 国内部署使用教程,三种方法任选一!
前端
IT_陈寒4 小时前
SpringBoot项目启动慢?5个技巧让你的应用秒级响应!
前端·人工智能·后端
树上有只程序猿5 小时前
2026低代码选型指南,主流低代码开发平台排名出炉
前端·后端
橙某人5 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
高端章鱼哥5 小时前
为什么说用OpenClaw对打工人来说“不划算”
前端·后端
大脸怪5 小时前
告别 F12!前端开发者必备:一键管理 localStorage / Cookie / SessionStorage 神器
前端·后端·浏览器
Mr_Mao5 小时前
我受够了混乱的 API 代码,所以我写了个框架
前端·api
小徐_23335 小时前
向日葵 x AI:把远程控制封装成 MCP,让 AI 替我远程控制设备
前端·人工智能
冴羽5 小时前
来自顶级大佬 TypeScript 之父的 7 个启示
前端·typescript