阅读 226

React的安装、JSX语法

1. React的安装

准备好默认的index.html和package.json,在根目录的集成终端下: npm i react react-dom

  • react包是核心,提供创建元素,组件等功能

  • react-dom包提供DOM相关功能(把创建好的元素渲染到页面中)

2. React的使用

2.1 使用React脚手架初始化项目

  • npx create-react-app 项目名

    项目(取名my-app)安装成功会看到Happy hacking!

  • 启动项目,在项目根目录(cd my-app)执行命令: npm start

    若安装了yarn,就用 yarn start

yarn命令简介

  • yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同

  • yarn具有快速,可靠和安全的特点

  • 初始化新项目:yarn init

  • 安装包: yarn add 包名称

  • 安装项目依赖: yarn

  • 会自动跳转到http://localhost:3000/

    也可以在集成终端打开链接进行访问(右键检查元素)

2.2 脚手架中使用React

(在src的index.js里面)

  • 导入react和react-dom两个包

import React from 'react' import ReactDOM from 'react-dom' 复制代码

  • 使用JSX语法创建react元素

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

  • 渲染react元素到页面

    ReactDOM.render()方法,把创建好的react元素h1(或组件参数)渲染到页面中

      参数一:要渲染的react元素   参数二:DOM对象,用于指定把元素渲染到页面中的位置(挂载点) 复制代码

ReactDOM.render(h1,document.getElementById('root'))  //拿到页面中id为root的DOM对象作为挂载点 复制代码

注意点

  • React元素的属性名使用驼峰命名法

  • 特殊属性名:class -> className,for -> htmlFor,tabindex -> tabIndex (原来在html中,现在在jsx中)

  • 如果没有子节点的React元素可以用 /> 来结束

  • 推荐:使用小括号包裹JSX,从而避免JS中自动插入分号报错

import React from 'react' import ReactDOM from 'react-dom' //span没有子节点 const title = (   <h1 className="title">     Hello JSX      <span />     </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码

检查元素:

<body>     <div id="root">         <h1 class="title">             "Hello JSX"             <span></span>         </h1>     </div> </body> 复制代码

3. JSX语法:(★★★)

3.1 嵌入JS表达式

即把存储在js中的数据,展示在JSX中

语法:{JavaScritp表达式}

let content = '插入的内容' //存储在js中的数据 let h1 = ( <h1>我是通过JSX创建的元素+ {content}</h1> ) 复制代码

注意点
  • 只要是合法的js表达式(如各种数据类型)都可以进行嵌入

  • JSX自身也是js表达式

const h1 = <h1>我是JSX</h1> //h1是JSX,JSX自身也是js表达式,也可以嵌入到JSX中 const dv = (     <div>嵌入表达式:{h1}</div> ) 复制代码

  • 注意:js中的对象是不能嵌入,一般只会出现在style属性中

  • 注意:在{}中不能出现语句(如if/for)等

import React from 'react' import ReactDOM from 'react-dom' // 函数调用表达式 const sayHi = () => 'Hi~' //函数调用后返回字符串Hi~ const dv = <div>我是一个div</div> //dv是JSX const title = (   <h1>     Hello JSX     <p>{1}</p>     <p>{'a'}</p>     <p>{1 + 7}</p>     <p>{3 > 5 ? '大于' : '小于等于'}</p>     <p>{sayHi()}</p>     {dv} {/*JSX自身也是js表达式,也可以嵌入到JSX中*/}     {/* 错误演示:注释是js中的,嵌入到jsx中的注释也需要用花括号括起来 */}     {/* <p>{ {a: '6'} }</p> 花括号里一般不写对象,除非在style属性中*/}     {/* { if (true) {} } 花括号中不能出现语句 */}     {/* { for (var i = 0; i < 10; i++) {} } 花括号中不能出现语句*/}   </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码

3.2 条件渲染

场景:loading效果

根据不同的判断逻辑,返回不同的JSX结构,然后渲染到页面中:

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

用 if/else 或 三元运算符 或 逻辑与运算符 来实现

import React from 'react' import ReactDOM from 'react-dom' /*    条件渲染: */ const isLoading = false // if-else // const loadData = () => { //   if (isLoading) { //     return <div>loading...</div> //   } //   return <div>数据加载完成,此处显示加载后的数据</div> // } // 三元表达式: // const loadData = () => { //   return isLoading ? (<div>loading...</div>) : (<div>数据加载完成,此处显示加载后的数据</div>) // } // 逻辑与运算符: const loadData = () => {   return isLoading && (<div>loading...</div>) } const title = (   <h1>     条件渲染:     {loadData()}  {/*把函数的调用嵌入JSX*/}   </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码

3.3 列表渲染

  • 渲染一组数据,用数组的 map () 方法

    map() 方法返回一个新数组,数组中的元素为原始数组元素按序依次调用函数处理后的值。

arr.map()

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

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

  • 注意:尽量避免使用(可变化的)索引号作为key

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

3.4 样式处理

行内样式 -style

在style里以对象的方式嵌入,繁琐,不便阅读

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

类名 -className(推荐)

创建CSS文件编写样式代码(src的css文件夹中)

.title {     text-align: center } 复制代码

在js中进行引入,设置类名即可

import React from 'react' import ReactDOM from 'react-dom' // 引入css import './css/index.css' const list = (   <h1 className="title" style={{ color: 'red', backgroundColor: 'skyblue' }}>     JSX的样式处理   </h1> ) // 渲染react元素 ReactDOM.render(list, document.getElementById('root')) 复制代码

小结

  • JSX是React的核心内容

  • JSX表示在JS代码中写HTML结构,是React声明式的体现(只需要描述页面是什么样子)

  • 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构

  • 推荐使用className的方式给JSX添加样式


作者:混得好差
链接:https://juejin.cn/post/7028758378167926798


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐