React学习笔记

Posted 2021-06-11 兜里有糖0831

React

1.什么是React

1.特点：

• 声明式

你只需要描述UI看起来是什么样式，就跟写html一样，React负责渲染UI

• 基于组件

组件时React最重要的内容，组件表示页面中的部分内容

• 学习一次，随处使用

使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

2.React基本使用

• React的引用
• 

• 创建React元素并渲染到页面

   <script>
      // 2 创建react元素
      // 参数一：元素名称
      // 参数二：元素属性
      // 参数三：元素的子节点
      const title = React.createElement('h1', null, 'Hello React')
  
      // 3 渲染react元素
      // 参数一：要渲染的react元素
      // 参数二：挂载点
      ReactDOM.render(title, document.getElementById('root'))
    </script>
  </body>
  </html>
  

2.React脚手架

1.React脚手架意义

• 脚手架是开发现代Web应用的必备

• 充分利用 Webpack，Babel，ESLint等工具辅助项目开发

• 零配置，无需手动配置繁琐的工具即可使用

• 关注业务，而不是工具配置

2.使用React脚手架初始化项目

• 在命令行窗口运行npm install -g create-react-app进行全局安装

• 初始化项目，命令： npx create-react-app my-pro

  • npx 目的：提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，再使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  • create-react-app 这个是脚手架名称 不能随意更改
  • my-pro 自己定义的项目名称

看到这个 恭喜你 创建成功

​

​ 我们的目录

• 启动项目 npm start

  启动成功会自动弹出以下页面

3.脚手架中使用React

• 导入react和react-dom两个包

• 创建元素

  let h1 = React.createElement('h1',null,'我是标题')
  

• 渲染到页面

  ReactDOM.render(h1,document.getElementById('root'))
  

3.JSX的使用

1. JSX的概述

• JSX是javascript XML 的简写，表示在JavaScript代码中写HTML格式的代码
• 优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

2. 简单入门使用

   使用步骤

   ​ 使用JSX语法创建react元素

   let h1 = <h1>我是通过JSX创建的元素</h1>
   

   ​ 使用ReactDOM来渲染元素

   ReactDOM.render(h1,document.getElementById('root'))
   

   为什么在脚手架中可以使用JSX语法

   • JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展

   • 需要使用babel编译处理后，才能在浏览器环境中使用

   • create-react-app脚手架中已经默认有该配置，无需手动配置

   • 编译JSX语法的包： @bable/preset-react

   注意点

   • React元素的属性名使用驼峰命名法
   • 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
   • 如果没有子节点的React元素可以用 /> 来结束
   • 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错

3. JSX语法

   JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

   • 嵌入JS表达式

     语法：{JavaScritp表达式}

     例子：

     let content = '插入的内容'
     let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>
     

     注意点

     • 只要是合法的js表达式都可以进行嵌入
     • JSX自身也是js表达式
     • 注意：js中的对象是一个例外，一般只会出现在style属性中
     • 注意：在{ }中不能出现语句

   • 条件渲染

     let isLoading = true
     let loading = ()=>{
         if(isLoading){
             return <div>Loading...</div>
         }
         return <div>加载完成</div>
     }
     

   • 列表渲染

     • 如果需要渲染一组数据，我们应该使用数组的 map () 方法

     • 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一

     • 原则：map()遍历谁，就给谁添加key属性

     • 注意：尽量避免使用索引号作为key

     • let arr = [{
           id:1,
           name:'三国演义'
       },{
           id:2,
           name:'水浒传'
       },{
           id:3,
           name:'西游记'
       },{
           id:4,
           name:'红楼梦'
       }]
       let ul = (<ul>
           {arr.map(item => <li key={item.id}>{item.name}</li>)}
       </ul>)
       ReactDOM.render(ul,document.getElementById('root'))
       

   • 样式处理

     • 行内样式 -style

     在style里面我们通过对象的方式传递数据

     <li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
     

     这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

     • 类名 -className

     创建CSS文件编写样式代码

     .container {
         text-align: center
     }
     

     在js中进行引入，然后设置类名即可

     import './css/index.css'
     
     <li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
     

4. 小结

• JSX是React的核心内容
• JSX表示在JS代码中写HTML结构，是React声明式的体现
• 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
• 推荐使用className的方式给JSX添加样式
• React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能