devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react项目结构以及jsx模板语法_react模板语法

作者：羊村懒王 | 2024-02-25 05:26:59

赞

踩

react模板语法

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模板语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13. </head>
  14. <body>
  15.     <div id="container"></div>
  16.     <script type="text/babel">
  17.             const div = <div>
  18.                                 <h3>111</h3>
  19.                                 <p>
  20.                                     <h2>222</h2>
  21.                                 </p>
  22.                         </div>
  23.                       
  24.  
  25.             ReactDOM.render(div,document.querySelector('#container'))
  26.     </script>
  27. </body>
  28. </html>

模板变量的使用

 文本内容:使用{}解析js语法
属性: 属性名={js语法}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13. </head>
  14. <body>
  15.     <div id="container"></div>
  16.  
  17.     <script type="text/babel">
  18.             const msg = '111';
  19.             const div = <div>
  20.                                 <h3>{msg}</h3>
  21.                         </div>
  22.                       
  23.  
  24.             ReactDOM.render(div,document.querySelector('#container'))
  25.     </script>
  26. </body>
  27. </html>

模板方法的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13. </head>
  14. <body>
  15.     <div id="container"></div>
  16.     <script type="text/babel">
  17.          const str = 'i have an apple';
  18.          const div = <div>
  19.                         <div>{str.toUpperCase()}</div>
  20.                     </div>
  21.                       
  22.  
  23.             ReactDOM.render(div,document.querySelector('#container'))
  24.     </script>
  25. </body>
  26. </html>

调用自定义方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13. </head>
  14. <body>
  15.     <div id="container"></div>
  16.     <script type="text/babel">
  17.          const str = 'i have an apple';
  18.          function fn(str){
  19.              return str.split('').reverse().join('')
  20.          }
  21.          const div = <div>
  22.                         <div>{str.toUpperCase()}</div>
  23.                         <div>{fn(str)}</div>
  24.                     </div>
  25.                       
  26.  
  27.             ReactDOM.render(div,document.querySelector('#container'))
  28.     </script>
  29. </body>
  30. </html>

模板注释

{/*这里写注释内容*/}


条件渲染

  • 不能使用if结构做条件判断
  • 使用三元运算符做条件判断
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13. </head>
  14. <body>
  15.     <div id="container">
  16.  
  17.     </div>
  18.     <script type="text/babel">
  19.         let age = 30;
  20.          const div = <div>
  21.                         {/*<div>{if(age>=18){'已成年'}else{'未成年'}}</div>*/}
  22.                         <div>{age>=18 ?  '已成年' : '未成年'}</div>
  23.  
  24.                         <hr />
  25.                         <div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
  26.                     </div>
  27.                       
  28.  
  29.             ReactDOM.render(div,document.querySelector('#container'))
  30.     </script>
  31. </body>
  32. </html>

关键字

  • className 为设置标签的选择器
  • htmlFor 设置label标签的属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13.     <style>
  14.         .main{
  15.             background: skyblue;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="container">
  21.  
  22.     </div>
  23.     <script type="text/babel">
  24.          const div = <div className="main">
  25.                         <h3>22</h3>
  26.                         <label htmlFor="search">搜索</label>
  27.                         <input type="text" id="search" />
  28.                     </div>
  29.                       
  30.  
  31.             ReactDOM.render(div,document.querySelector('#container'))
  32.     </script>
  33. </body>
  34. </html>

  • 通过style指定行内样式

  • style属性值采用{{}}来书写

{{}}:
外层{}:  #指jsx模板语法
内层:{}:    #指一个json对象
 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 2.引入react -->
  9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  11.     <!-- 3.引入babel -->
  12.     <script src="./libs//babel.min.js"></script>
  13.     <style>
  14.         .main{
  15.             background: skyblue;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="container">
  21.  
  22.     </div>
  23.     <script type="text/babel">
  24.         const obj = {background:'red',color:'yellow'};
  25.        
  26.         //  书写jsx模板语法
  27.          const div = <div className="main">
  28.                         {/*错误写法*/}
  29.                         {/*<h3 style="background:'red';color:'yellow'">啊哈哈哈哈哈哈</h3>*/}
  30.  
  31.                         <h3 style={obj}>咿呀呀呀呀呀</h3>
  32.                        
  33.                     </div>
  34.                       
  35.  
  36.             ReactDOM.render(div,document.querySelector('#container'))
  37.     </script>
  38. </body>
  39. </html>

列表的渲染

  • 在遍历数组时,key需要绑定在遍历的直接子元素上
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <!-- 2.引入react -->
    9.     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    10.     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    11.     <!-- 3.引入babel -->
    12.     <script src="./libs//babel.min.js"></script>
    13.     <style>
    14.         .main{
    15.             background: skyblue;
    16.         }
    17.     </style>
    18. </head>
    19. <body>
    20.     <div id="container">
    21.  
    22.     </div>
    23.     <script type="text/babel">
    24.         let arr = ['朝阳区','海淀区','通州区'];
    25.         let arr1 = [<h2 key="0">海淀区</h2>,<h2 key="1">朝阳区</h2>,<h2 key="2">通州区</h2>]
    26.         // forEach   没有返回值
    27.         let arr2 = [];
    28.         arr.forEach(item=>{
    29.             arr2.push(item)
    30.         })
    31.         // map  #有返回值
    32.         let arr3 = arr.map((item,index)=>{
    33.             return <h3 key={index}>{item}</h3>
    34.         })
    35.  
    36.         let brand = [
    37.             {
    38.                 id:1,
    39.                 name:'宝马',
    40.                 price:500000
    41.             },
    42.             {
    43.                 id:2,
    44.                 name:'奔驰',
    45.                 price:1000000
    46.             },
    47.             {
    48.                 id:3,
    49.                 name:'奥迪',
    50.                 price:400000,
    51.             }
    52.         ]
    53.         //  书写jsx模板语法
    54.          const div = <div className="main">
    55.                        {arr}
    56.                        <hr />
    57.                         {arr1}
    58.                         <hr />
    59.                         {arr2}
    60.                         <hr />
    61.                         {arr3} 
    62.                         <hr />
    63.                         {arr.map((item,index)=>{
    64.                             return <h3 key={index}>{item}</h3>
    65.                         })}
    66.                         {/*变形写法*/}
    67.                         {arr.map((item,index)=><h3 key={index}>{item}</h3>)}
    68.                         <hr />
    69.                         {/*在遍历数组时,key需要绑定在遍历的直接子元素上*/}
    70.                         {brand.map(item=>(
    71.                            <div key={item.id}>
    72.                                 <h2>{item.name}</h2>
    73.                                 <div>{item.price}</div>
    74.                              </div>
    75.                         ))}
    76.                     </div>
    77.                       
    78.  
    79.             ReactDOM.render(div,document.querySelector('#container'))
    80.     </script>
    81. </body>
    82. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/138978
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号