react基础

react基础

react介绍

什么是react

一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架

react有什么特点

• 声明式UI（JSX）：写UI就和写普通的HTML一样，抛弃命令式的繁琐实现
• 组件化：组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性
• 一次学习，跨平台编写：react既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像是一个 元框架 为各种领域赋能

创建一个react项目

使用react 脚手架

• 全局安装react脚手架

  yarn add -g  create-react-app
  

• 创建项目

create-react-app react-demo

说明：

1. create-react-app 是固定命令，create-react-app是React脚手架的名称
2. react-demo表示项目名称，可以自定义，保持语义化

项目目录说明

• 目录说明

  1 src 目录是我们写代码进行项目开发的目录

  2 package.json 中俩个核心库：react 、react-dom

• 目录调整

  1 删除src目录下自带的所有文件，只保留app.js根组件和index.js

  2 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可

• 入口文件说明

  import React from 'react'
  import ReactDOM from 'react-dom'
  import './index.css'
  // 引入根组件App
  import App from './App'
  // 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )
  

jsx基础

JSX介绍

概念:JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势:

1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2. 充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法

在JSX中使用js表达式

语法

const name = '张三'

<h1>你好，我叫{name}</h1>  

可以使用的表达式

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
3. fn()

特别注意

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！(可以写三元)

JSX列表渲染

在vue中我们可以使用v-for来渲染列表，react是怎么实现的

实现：使用数组的map方法

// 来个列表
const person = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          person.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

注意:

1. key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
2. key 在当前列表中要唯一的字符串或者数值（String/Number）
3. 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4. 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

JSX条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果

实现：可以使用 三元运算符 或 逻辑与(&&)运算符

代码:

const flag = false;
function App() {
  return <div className="App">{flag ? 'react' : 'vue'}</div>;
}

export default App;

JSX样式处理

1. 行内样式

   function App() {
     return (
       <div className="App">
         <div style={{ color: 'red' }}>this is a div</div>
       </div>
     )
   }
   
   export default App
   

2. 行内样式 - style - 更优写法

   const styleObj = {
       color:red
   }
   
   function App() {
     return (
       <div className="App">
         <div style={ styleObj }>this is a div</div>
       </div>
     )
   }
   
   export default App
   

3. 类名 - className（推荐）

   app.css

   .title {
     font-size: 30px;
     color: blue;
   }
   

   app.js

   import './app.css'
   
   function App() {
     return (
       <div className="App">
         <div className='title'>this is a div</div>
       </div>
     )
   }
   export default App
   

4. 类名 - className - 动态类名控制

   import './app.css'
   const showTitle = true
   function App() {
     return (
       <div className="App">
         <div className={ showTitle ? 'title' : ''}>this is a div</div>
       </div>
     )
   }
   export default App
   

JSX注意点

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现