React开发实践(1)起步

简介: React开发实践(1)起步

1、起步

  • 包含 这些内容

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2、React 介绍

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、文件结构

  • 使用 npx create-react-app my-app-todoList

生成 react 项目

  • 文件结构 需要注意几件事情
1、旋转的图片是 logo.svg 做的, svg 常规是数字集合
  2、网页标题左边的小图片 来自于 favicon.ico
  3、PWA
  4、manifest.json 用于生成桌面快捷方式小图标的设置 
复制代码

网络异常,图片无法展示
|

  • 删除不需要的东西 保留 最简洁部分

网络异常,图片无法展示
|

4、React 组件

网络异常,图片无法展示
|

  • 此处有一点 ES6 结构赋值的操作,将对象中的东西取出来
    网络异常,图片无法展示
    |

  • ReactDOM.render作用
    网络异常,图片无法展示
    |

网络异常,图片无法展示
|

  • 关于页面是否引入  react的问题 ? 为啥需要 import react ?

网络异常,图片无法展示
|

  • 还有一个 render 中 写的 部分也是 jsx 语法

5、JSX 基础复习

1、js 当中写 html标签和 css 
2、组件大写字母开头
3、{xxxx} 这个里面可写逻辑 
4、{xxx ? xx : x} 这种三木运算符比较常用
复制代码

* 补充

  • JSX 写注释的两种方式

网络异常,图片无法展示
|

  • jsx 中 写 css 使用 className 代替 class
  • 如果想 写的 <h1>xxx</h1> 不显示 h1 直接显示 xxx 怎么操作 ?

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • jsx 中的 label部分

当点击 label 时, 光标聚焦到 input 框上 怎么操作 ?

  • 注意在 react中 label 上的 for 更改成了 htmlFor

网络异常,图片无法展示
|

实现效果

网络异常,图片无法展示
|

  • 本节完

撒花 🎉🎉🎉

更多项目请访问 github  github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…



相关文章
|
2月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
143 1
|
1月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
116 4
React开发需要了解的10个库
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
166 2
|
25天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
1月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
49 4
|
2月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发 JavaScript UED
深入React Hooks与性能优化实践
深入React Hooks与性能优化实践
46 0
|
3月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
37 0
|
3月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
41 0