react书写的两种方式(不使用脚手架)

已于 2022-10-23 16:54:19 修改
阅读量264 收藏
点赞数
文章标签： javascript 前端 开发语言 react.js
于 2022-10-23 16:49:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54581080/article/details/127476149
版权

首先声明一下,我没有直接学习r18,而是r16.

首先引入react 

第一种书写方式

本来我写的不是span,而是h2元素,但是报了个h1不能嵌套h2的错误

 然后就去查找了一波,发现有些特别的块级元素不能嵌套块级元素,具体我找了一篇文章解释

https://blog.csdn.net/lgl_19910331/article/details/81457725

第二种书写方式  JSX

jsx属于是js的扩展语法,需要bable来转义,具体如下

 就先简单的介绍一下吧,后续再详细说说JSX

最后附上react中文网链接,学习过程中一定要记得查阅文档呀

http://react.caibaojian.com.cn/docs/cdn-links.html

一身风骨擎天破
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React学习笔记一(React入门+JSX+脚手架)
kianagrow的博客
12-13 308
React学习笔记一(React入门+JSX+脚手架)
react 脚手架
rwedgsd的博客
05-29 142
Hook 能够 在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 是一个特殊的函数，它可以让你“钩入”React 的特性 作用： 能减少不停的复用一个有状态的组件 有效处理生命周期钩子函数里的逻辑混乱 解决class 中 this 指向问题 State Hook useState 是 React 自带的一个 Hook 函数，它的作用就是用来声明状态变量。 useState 这个函数接收的参数是我们的状态初始值，它返回了一个数组，这个数组的第 0 项是当前的状态值
使用Webpack搭建React脚手架（下篇）
UI_linlan的博客
01-04 878
一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭 代和维护。所以说，前端代码格式规范和语法检测的工具可以提高代码的质量和可读性，减少低级错误 和维护成本，提高团队的协作效率和开发效率，是非常有必要的。本篇我们将在完善脚手架的搭建。
React脚手架-从零开始
Grey的博客
11-22 771
创建方式1 1.安装脚手架 npm i -g create-react-app 2.用脚手架创建项目 create-react-app your-project-name 创建方式2 直接使用npx来创建项目 npx create-react-app your-project-name 解释： npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称 your-project-name 表示项目名称，可以修改
react基本使用
小白小白从不日别的博客
06-02 1788
主要介绍了 react 的起源以及特点、基本使用步骤
React使用
Rice_w的博客
06-06 1301
目录14.1、什么是React14.2、如何使用React14.2.1、React的基本使用14.2.2、React JSX14.2.3、模块与组件、模块化与组件化的理解14.3、React面向组件编程14.3.1、函数式组件：14.3.2、类式组件14.3.3、React 组合组件14.4、组件三大核心属性之一 ---------State14.4.1、React State 介绍14.4.2、State的基本使用14.4.3、改变天气状态案例14.4.4、天气案例简写14.5、组件三大核心属性二----
React脚手架
qq_45669178的博客
04-03 798
一、脚手架 vsc插件： ①切实同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 ②在线监测数据是否为json数据。 1、react安装 1）全局安装脚手架 npm install -g create-react-app 2）初始化 npm init 3)创建项目 create-react-app 项目名 4）切到创建的项目里 cd 项目名 5）启动 ...
React基本使用(持续更新)
qq_60292609的博客
11-05 1808
1. react是什么 ? react是用于构建用户界面的JavaScript库 构建用户界面(User Interface,简单理解为: HTML页面) JavaScript库,不是框架,是库 Vue是渐进式的JavaScript框架 react全家桶是框架 react:核心库 react-dom: dom操作 react-router: 路由 reactx: 集中状态管理 2. 创建react脚手架 创建方式一 全局安装脚手架工具包, 命令: npm i
【超全】React学习笔记 上：基础使用与脚手架
weixin_43654363的博客
12-02 404
几十万字超全的React学习笔记，包学包会
react项目脚手架
05-06
npx create-react-app my-app命令创建的react项目脚手架，在nodejs+npm环境下既可以通过命令npm start启动该项目
webpack+react+antd脚手架优化的方法
08-27
本篇文章主要介绍了webpack+react+antd脚手架优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
babel-plugin-react-binding：React的两种方式绑定糖
02-01
Babel插件React绑定React的两种方式绑定糖。用法安装npm i babel-plugin-react-binding --save-dev将react-binding添加到.babelrc { "plugins" : [ [ "react-binding" , { // options } ] ]}在React JSX中使用绑定！...
react-一个React项目的脚手架工具
08-15
一个React脚手架工具。技术栈：React、Redux、ES6、Gulp、Scss、Webpack
从零开始学习搭建React脚手架项目
12-11
使用npm下载create-react-app运行如下命令： npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况，我们可以指定下载的仓库： npm install -g create-react-app --
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1437
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1272
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 514
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
react路由两种路由的详情使用
03-31
React 路由有两种类型的路由，分别是 HashRouter 和 BrowserRouter。 1. HashRouter HashRouter 是基于 URL 的 hash（#）部分实现的路由。它在 URL 的 hash 改变时，渲染相应的组件。这种路由类型在服务器端无需...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值