【React系列】=＞[01] 基本使用 JSX 组件

周杰论
80 阅读4分钟

1.什么是react

1.用于构建用户界面的JavaScript库,相当于一个view层
2.facebook团队创建的
3.声明式:只要描述UI看起来是什么样式,就跟写html一样,react负责渲染ui
组件:组件表示页面中的部分内容
4.学习一次,随处使用

2.基本使用

1.npm i react react-bom
2.引入js文件
3.创建元素节点
a元素名,b元素属性,c传递的是个对象,元素内容

const title = React.createElement("h1",null,"hello react")

4.渲染到页面

React.render(title,root)

3.React脚手架（★★★）

  • 脚手架是开发现代Web应用的必备
  • 充分利用 Webpack，Babel，ESLint等工具辅助项目开发
  • 零配置，无需手动配置繁琐的工具即可使用
  • 关注业务，而不是工具配置
使用React脚手架初始化项目

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

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

  • 启动项目，在项目根目录执行命令： npm start

脚手架中使用React
在src文件夹里面 写入index.js
在这里插入图片描述

import React from "react";
import ReactDOM from "react-dom";

const zzm = React.createElement("h1", null, "我是标题");
const zzm2 = <h1>
    <span>我是用jsx语法创建的</span>
    <span>我是用jsx语法创建的</span>
</h1>; // 只是上面语法的语法糖而已
ReactDOM.render(zzm2, document.getElementById("root"));

2.JSX的使用

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

简单入门使用（★★★）

1.使用JSX语法创建react元素

const title = <h1> Hello JSX</h1>  
// 渲染
ReactDOM.render(title,document.getelementById('root))
为什么在脚手架中可以使用JSX语法
  • JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
  • 需要使用babel编译处理后，才能在浏览器环境中使用
  • create-react-app脚手架中已经默认有该配置，无需手动配置
  • 编译JSX语法的包： @bable/preset-reac

注意点

  • React元素的属性名使用驼峰命名法
  • 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
  • 如果没有子节点的React元素可以用 /> 来结束
  • 推荐：使用 (小括号)包裹JSX，从而避免JS中自动插入分号报错
JSX语法（★★★）
  • JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持
嵌入JS表达式

语法：{JavaScritp表达式}

const name = 'zzm'
const age = 18
const h1 = <h1>我的名字{name}+年龄{age}</h1>

注意点

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

条件渲染

根据不同的条件来渲染不同的JSX结构

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里面我们通过对象的方式传递数据

.container {
    text-align: center
}

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

import './css/index.css'

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

小结

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