react项目结构以及jsx模板语法_react模板语法-CSDN博客


本站和网页 https://blog.csdn.net/t2315226053/article/details/128143292 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

react项目结构以及jsx模板语法_react模板语法-CSDN博客
react项目结构以及jsx模板语法
码农tianhp
已于 2022-12-05 17:05:45 修改
阅读量264
收藏
点赞数
文章标签:
javascript
前端
react.js
于 2022-12-02 19:33:58 首次发布
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/t2315226053/article/details/128143292
版权
1.创建一个react项目
create-react-app 快速脚手架
npm install -g create-react-app
创建React项目
create-react-app xxx start
 创建成功!
2.了解项目目录结构
node_modules — 项目依赖包文件夹
public — 静态资源文件夹
favicon.icon — 网站偏爱图标index.html — 主页面(重要)logo192.png — logo图logo512 — logo图manifest.json — 应用加壳的配置文件robots.txt — 爬虫协议文件
src — 源码文件夹
App.css — App组件的样式App.js — App组件 (重要)App.test.js — 给App测试index.css — 样式index.js — 入口文件 (重要)logo.svg — logo图reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)setupTests.js — 组件单元测试的文件(需要jest-dom库的支持)
gitignore — git的选择性上传的配置文件
配置不会上传的文件信息。
开始学习
jsx语法结构
​  1.jsx模板语法中双标签必须要有开始和结束​  2.jsx模板语法中单标签必须要有结束​  3.jsx模板语法中有且只能有一个根标签​  4.jsx模板语法严格区分大小写
 jsx模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const div = <div>
<h3>111</h3>
<p>
<h2>222</h2>
</p>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板变量的使用
 文本内容:使用{}解析js语法 属性: 属性名={js语法}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const msg = '111';
const div = <div>
<h3>{msg}</h3>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const str = 'i have an apple';
const div = <div>
<div>{str.toUpperCase()}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
调用自定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
const str = 'i have an apple';
function fn(str){
return str.split('').reverse().join('')
const div = <div>
<div>{str.toUpperCase()}</div>
<div>{fn(str)}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板注释
{/*这里写注释内容*/}
条件渲染
不能使用if结构做条件判断使用三元运算符做条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
let age = 30;
const div = <div>
{/*<div>{if(age>=18){'已成年'}else{'未成年'}}</div>*/}
<div>{age>=18 ? '已成年' : '未成年'}</div>
<hr />
<div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
关键字
className 为设置标签的选择器htmlFor 设置label标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
const div = <div className="main">
<h3>22</h3>
<label htmlFor="search">搜索</label>
<input type="text" id="search" />
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
通过style指定行内样式 style属性值采用{{}}来书写
{{}}: 外层{}:  #指jsx模板语法 内层:{}:    #指一个json对象  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
const obj = {background:'red',color:'yellow'};
// 书写jsx模板语法
const div = <div className="main">
{/*错误写法*/}
{/*<h3 style="background:'red';color:'yellow'">啊哈哈哈哈哈哈</h3>*/}
<h3 style={obj}>咿呀呀呀呀呀</h3>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
列表的渲染
在遍历数组时,key需要绑定在遍历的直接子元素上 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
<style>
.main{
background: skyblue;
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
let arr = ['朝阳区','海淀区','通州区'];
let arr1 = [<h2 key="0">海淀区</h2>,<h2 key="1">朝阳区</h2>,<h2 key="2">通州区</h2>]
// forEach 没有返回值
let arr2 = [];
arr.forEach(item=>{
arr2.push(item)
})
// map #有返回值
let arr3 = arr.map((item,index)=>{
return <h3 key={index}>{item}</h3>
})
let brand = [
id:1,
name:'宝马',
price:500000
},
id:2,
name:'奔驰',
price:1000000
},
id:3,
name:'奥迪',
price:400000,
// 书写jsx模板语法
const div = <div className="main">
{arr}
<hr />
{arr1}
<hr />
{arr2}
<hr />
{arr3}
<hr />
{arr.map((item,index)=>{
return <h3 key={index}>{item}</h3>
})}
{/*变形写法*/}
{arr.map((item,index)=><h3 key={index}>{item}</h3>)}
<hr />
{/*在遍历数组时,key需要绑定在遍历的直接子元素上*/}
{brand.map(item=>(
<div key={item.id}>
<h2>{item.name}</h2>
<div>{item.price}</div>
</div>
))}
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
优惠劵
码农tianhp
关注
关注
点赞
收藏
觉得还不错?
一键收藏
打赏
知道了
评论
react项目结构以及jsx模板语法
自学react笔记
复制链接
扫一扫
react-ReactcreateElement和JSX替代语法糖
08-15
React.createElement和JSX替代语法糖
react-template:React项目的模板
02-15
React模板
一个用于React项目的简单模板。 使用Yarn , Sass ,JSX命名约定并利用功能组件。
包括:
GitHub页面构建脚本
ESLint用于样式化源文件
更漂亮的样式化JSON和样式表文件
赫斯基在提交时应用ESLint和Prettier
参与评论
您还未登录,请先
登录
后发表或查看评论
React JSX语法使用案例
04-21
React JSX语法使用案例,使用前需要 cnpm install 安装组件
基于react的后台管理项目模板
02-21
基于react的后台管理项目模板
react antd项目框架 jsx版本
02-21
react项目框架 jsx版本
1、解压
2、安装npm,npm install
3、运行 npm run start
React-Project-Template:React项目的项目模板,我经常以此为基础
05-14
我的React项目模板
这是我的React应用程序的个人项目模板,我经常将其用作进一步配置的基础。 堆栈包括:
4创建高效(快速)的捆绑包。
7将ES2015 代码到ES5。
为CSS模块增加功能和。
地快速测试您的所有代码。
当然是 。
该模板随附了一些我使用的常用脚本,这些脚本与npm run一起npm run 。
build以创建经过优化和最小化的产品
watch以运行观看脚本
dev人员开始
test运行中的所有测试tests与目录。
巴别塔
转译的ES5代码添加了与以下查询兼容所需的必要polyfill:
询问
解释
>0.25%
支持全球使用率超过0.25%的浏览器
not ie 11
我们不支持Internet Explorer <= 11
not op_mini all
我们不支持任何Opera Mini浏览器版本
该模板还支持对象分解和静态
react技术栈
m0_69674158的博客
08-18
1722
react要点,生命周期,组件传参和基础语法等等。
有了这 18 个免费的React模板以后,也太省事了吧!!
热门推荐
零一的博客
05-12
1万+
前端哪需要自己设计页面?用现成的不就好了?
从零搭建完整的React项目模板(Webpack + React hooks + Mobx + Antd)
huihui_999的博客
05-15
876
从零搭建完整的React项目模板(Webpack + React hooks + Mobx + Antd)
独立开发者必备的29个开源React后台管理模板
zz_jesse的博客
07-25
1484
React Web应用程序开发管理后台可能非常耗时,这和设计所有前端页面一样重要。以下是收集的近几年顶级React.js管理模板列表。这些模板确实很有价值,使开发人员更容易构建应用程序后端的用户界面。此外,它们将帮助您完善网站的管理后台,并克服自己制作所有UI部分的一些技术挑战。您可以将这些管理仪表板模板用作骨架,并为您的网站创建自己的Web应用程序和仪表板。1.Endless - React A...
JavaScript的React框架中的JSX语法学习入门教程
10-22
主要介绍了JavaScript的React框架中的JSX语法学习入门教程,React是由Facebook开发并开源的高人气js框架,需要的朋友可以参考下
基于typescript和JavaScript的react项目模板
02-23
基于typescript和JavaScript的react项目模板
【React项目架构 】+后台管理系统cms实操
weixin_45024453的博客
08-05
1589
第一个React脚手架开发的项目,美团后台管理系统。
react基础语法、组件传参、生命周期
qq_62230186的博客
08-18
201
一个页面,一个容器组件;有state,处理state方法;数据中心,与数据处理组中心;react组件的状态/数据,当state发生变化,引用state的视图会自动更新。方便js中书写html模板JavaScript与html混合写法。显示内容,一个视图组件;只有props没有state;父组件传递 < Steper num={5} >相当于执行父组件的updateSize方法。执行props.updateSize()子组件接收 props.num。定义函数并把函数传递给子组件。—组件Steper—...
React基本语法总结
qq_56989560的博客
06-09
386
React基本语法总结
React基础语法总结
qq_56989560的博客
06-10
2632
React基础语法总结
react 项目模板搭建(1)—— 加入 less 、 sass
AS_TS的博客
09-10
1257
一、使用脚手架搭建项目基础
npx create-react-app my-app
创建后会得到一个基础的 react 项目文件,如果不需要加其他配置,可以直接使用
二、Create-React-App的Webpack配置
npm run eject
如果需要增加特殊配置,可以在根目录下使用这个命令,工具会给出提示,提示eject为不可恢复操作,输入y或者y开头的单词,即可进行eject。
eject后,会在目录下发现几个新增的目录 config,script。
script的内容为脚手架自己生成的,不用
react默认模板结构详解
qq_46149597的博客
02-21
206
react默认模板结构详解
一起玩转Vue中的JSX:让你一次性掌握它的特性!
我本可以容忍阳光,如果我不曾见过太阳,然而阳光已使我荒凉,成为更新的荒凉。
02-21
862
JSX简介JSX是一种Javascript的语法扩展,即具备了Javascript的全部功能,同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法:constel=<div>Vue2</div>;
复制代码上面这段代码既不是 HTML 也不是字符串,被称之为 JSX,是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法,但是它具备 J...
react 项目结构
最新发布
09-02
在React项目中,有多种常见的项目结构。其中一种是按照文件的类型进行组织,即不同角色的文件放在不同的文件夹中,如components、containers、actions、reducers等。这种结构可以更好地组织和管理项目,但对于规模较大的项目可能会导致频繁的文件切换和修改的问题。
另一种常见的项目结构是按照页面功能进行组织,即将相关的组件和Redux相关的文件都放在一个文件夹中。这种结构可以更好地将相关的代码放在一起,提高项目的可读性和可维护性。
还有一种常见的项目结构是使用Ducks结构,即将action creators和reducers定义在同一个文件中,并将它们放在一个命名空间中。这种结构可以解决在使用import*导入actions时可能导入不必要的reducer的问题。
在选择React项目结构时,可以根据项目规模和团队的需求来选择适合的结构。每种结构都有其优缺点,需要根据具体情况进行权衡和选择。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [React三种经典项目架构(大神路过.....)](https://blog.csdn.net/weixin_39939012/article/details/80962190)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
“相关推荐”对你有帮助么?
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
码农tianhp
CSDN认证博客专家
CSDN认证企业博客
码龄2年
暂无认证
原创
154万+
周排名
175万+
总排名
460
访问
等级
22
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
react项目结构以及jsx模板语法
264
React基础组件和类组件
196
您愿意向朋友推荐“博客详情页”吗?
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
React基础组件和类组件
2022年2篇
目录
目录
最新文章
React基础组件和类组件
2022年2篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付:10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
码农tianhp
你的鼓励将是我创作的最大动力
¥1
¥2
¥4
¥6
¥10
¥20
扫码支付:¥1
获取中
扫码支付
您的余额不足,请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明:
1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。
余额充值

Copyright ©uecom 京ICP备18064371号-3 IPV6
2024-03-29 13:53:05
zxsbr.com
10.0.12.16