React(1)初识React框架（react框架难不难）
ccwgpt 2024-10-01 08:10 31 浏览 0 评论
前言
React框架在现代前端开发的项目中越来越常用，该框架的语法结构也深深的影响着其他框架在设计时的思路和理念。本专栏从这篇文章开始，以零基础出发，一步步总结和讲解React框架的使用。
一、搭建React工作环境
首先我们先来将React工作环境搭建起来。要想让React工作起来，需要用到下列三个库：
- react.development.js：React核心库。
- react-dom.development.js：React操作DOM的库。
- babel.min.js：将JSX语法转换为JavaScript语法的库。
上述三个库大家可以去React的官网进行下载。除此之外，我们还需要创建一个用于书写React代码的js文件，可以命名为index.js。
接下来我们要将上述js文件按照顺序一个个的加载到HTML文档中。因为本文暂时使用非工程化的方法运行React项目，所以暂时需要手动将js文件加载到HTML文档中。
HTML文档的代码如下所示。
<html>
<head>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel" src="js/index.js"></script>
</head>
<body></body>
</html>
123456789上述代码需要注意以下两点：
注意1：独立的index.js文件需要在加载时将script标记对的type属性取值为“text/babel”，而不是“text/javascript”。
注意2：这样的方式运行React项目，需要借助WebStorm或VS Code这样的编辑器，在编辑器自带的内置服务器的帮助下才能正常启动项目。
二、第一个React程序
搭建好了React工作环境，我们来实现第一个React程序，即在浏览器的页面中显示一个一级标题，标题内容为“Hello,React!”
1、首先，在HTML文档中设置一个div标记对作为React项目中DOM元素的总容器。会使用Vue.js的同学可以将这个div理解为“挂载点”。同时还要为这个div标记对设置一个id属性或class属性，以保证在index.js文件中可以方便的引用该节点。
<body>
<div id=“app”></div>
</body>
1232、其次，在index.js文件中输入下列代码：
ReactDOM.render(
<h1>Hello,React!</h1>,
document.querySelector("#app")
)ReactDOM.rander()方法是React的核心方法，该方法的格式如下所示。
ReactDOM.rander(JSX代码,DOM节点)
上述代码中的h1标记实现的内容其实是JSX语法的代码，而不是HTML语法的代码，尽管它们暂时长得很像。第二个参数使用document.querySelector()方法指定了一个DOM节点，也就是body标记对内部的id属性取值为app的那个div。
ReactDOM.render()方法有以下两个主要功能：
- 将JSX代码转换为HTML格式的标记对。
- 将转换的HTML格式的标记对插入到指定的DOM节点内部。
3、理解了上述代码的概念，现在可以在webStorm编辑器中执行该项目了。如果大家在编写React代码时发现webStorm编辑器顶部有一个细长条提示，如下图所示。
这条细长的提示内容为：Switch language version to React JSX，中文翻译为 切换语言版本为React JSX。右侧有两个选项：Switch表示切换，Dismiss表示不予理会。
这里建议大家选择“Switch”，否则编辑器由于无法正确的识别JSX语法格式而出现多处语法错误提示。
三、初步认识JSX语法：
React框架对于DOM节点的生成采用了JSX语法格式，这是一种专门用于React的DOM节点生成模式。从本质上说，可以理解为HTML标记对和JavaScript语言的这一种结合。
本节我们对JSX语法进行一个初步的认识，下一篇文章会为大家详细的讲解JSX语法的要求。
下面这个例子，我们只做一个数组，利用JSX语法格式将数组中的元素在页面中渲染为一个无序列表。代码如下所示。
let list=[‘张三’,‘李四’,……];
ReactDOM.render(
<div>
<ul>
{
list.map(item=>{
return <li>{item}</li>
})
}
</ul>
</div>,
document.querySelector("#app")
)根据上述代码，我们可以得出有关JSX语法的以下结论：
- JSX语法中的HTML部分依然采用标记对书写。
- JSX语法中的JavaScript需要用{}进行包裹。
- 对数组的遍历只能使用数组的方法（例如：map()），不能使用for循环。
总结
本文是React系列教程的第一篇文章，主要为大家讲解了React项目的搭建，认识了JSX语法的基本格式，学习了ReactDOM.render()方法的使用。明天会为大家系统的讲解JSX语法的书写格式。
关于作者
小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住今日头条，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。
相关推荐
- 谷歌正在为Play商店进行Material Design改造
-
谷歌最近一直忙于在其应用程序中完成MaterialDesign风格的改造，而Play商店似乎是接下来的一个。9to5Google网站报道，有用户在Play商店的最新版本中发现了新界面，暗示该应用和网...
- 企业网站免费搭建，定制化建站CMS系统
-
科腾软件企业网站CMS管理系统已完成开发工作,首次开源（全部源码）发布。开发工具：VisualStudioEnterprise2022数据库：SQLite(零配置，跨平台，嵌入式)开发...
- 您需要的 11 个免费 Chrome 扩展程序
-
来源：SEO_SEM营销顾问大师Chrome扩展程序是SEO的无名英雄，他们在幕后默默工作，使您的策略脱颖而出并提高您的努力效率。从竞争对手研究到审核您的网站，速度比您说“元描述”还快，这些小工具发...
- 户外便携设备抗干扰困境如何破局?CMS-160925-078S-67给出答案
-
在户外复杂的电磁环境中，便携式设备中的扬声器需具备出色抗干扰能力，CUID的CMS-160925-078S-67在这方面表现突出。 从其结构设计来看，矩形框架虽主要为适配紧凑空...
- 一个基于NetCore开发的前后端分离CMS系统
-
今天给大家推荐一个开源的前后端分离架构的CMS建站系统。项目简介这是一个基于.Net3构建的简单、跨平台、模块化建站系统。系统业务简单、代码清晰、层级分明、全新架构便于二次扩展开发。支持多种数据库，...
- 本地Docker部署ZFile网盘打造个人云存储
-
前言本文主要介绍如何在LinuxUbuntu系统使用Docker本地部署ZFile文件管理系统，并结合cpolar内网穿透工具实现远程访问本地服务器上的ZFile传输与备份文件，轻松搭建个人网盘，无...
- pcfcms企业建站系统 免费+开源的企业内容管理系统
-
项目介绍pcfcms是基于TP6.0框架为核心开发的免费+开源的企业内容管理系统，专注企业建站用户需求提供海量各行业模板，降低中小企业网站建设、网络营销成本，致力于打造用户舒适的建站体验。演示站...
- 【推荐】一个高颜值且功能强大的 Vue3 后台管理系统框架
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍SnowAdmin是一款基于Vue3、TypeScript、Vite5、Pinia、Arco-Desi...
- java开源cms管理系统框架PublicCMS后台管理系统
-
一款使用Java语言开发的CMS，提供文章发布，图片展示，文件下载,用户权限、站点模块，内容管理、分类等功能。可免费用于商业用途maven工程数据库脚本在工程中database文件夹下代码结构：效果...
- 一定要大量读书:当我问Deepseek，它给出的高效阅读方法厉害了!
-
一年一度的世界读书日，总该写点什么。于是，我去问Deepseek给我推荐人生破局必读的10本书，结果它给了我回复，竟然10本推荐的书籍里，我都曾经浏览过，同时还给出破局关键。而说浏览过，不是读过，是因...
- 《搜神札记》:不应磨灭的惊奇（小说《搜神记》）
-
□黄勃志怪传说的书写一直是文人墨客的后花园，晚近尤盛，从张岱到袁枚到纪昀，收集那些或阴森或吊诡的行状故事，遂成一类，到民国年间，周作人挟此遗传，捋袖子拿希腊神话动刀，乃兄鲁迅不甘其后，《故事新编》虎...
- 《如何构建金字塔》之第三章总结（构建金字塔结构的方法有）
-
“没有什么比一套好理论更有用了。”——库尔特.勒温这篇读后感依然引用了这句库尔特.勒温名言，这句话也是我读芭芭拉.明托这本书的初衷。今天就“如何构建金字塔”，我来谈谈我的读后心得。我热爱写作，但是写...
- 《助人技术》第一章助人引论内容框架
-
第一章内容基本呈现如何成为助人者（心理咨询师）以及一些相关基础知识，对于进入这个行业有兴趣以及希望通过心理咨询寻求帮助但存有疑虑的当事人，都值得一读。心理咨询的三个阶段（不是说严格的三个阶段，而是广义...
- AI助手重构读后感写作流程:从提纲到完整性思考的转换
-
大家好！你有没有遇到过读完一本书，想要写读后感，却不知道从何下手的情况呢？今天我们要来探讨一下如何利用稿见AI助手来重构读后感写作流程，从提纲到完整性思考的转换。让我们一起来看看这个全新而又实用的方法...
- 图解用思维导图做读书笔记技巧（图解用思维导图做读书笔记技巧视频）
-
做阅读笔记非常有利于读后进行有效的深入思考，而思维导图这一强大的工具其最大的特点就是架构清晰，在阅读过程中对文章的分析、总结、分类起着很大的辅助作用。思维导图读书笔记步骤：1、阅读大纲。首先要快速浏览...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)