React基础学习(一)

最新推荐文章于 2020-12-10 14:42:21 发布

泊一

最新推荐文章于 2020-12-10 14:42:21 发布

阅读量232

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/w_D_lufei/article/details/103936963

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、什么是React

React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来

1.1 特点

声明式

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

基于组件

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

学习一次，随处使用

使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用，可以结合react-native angular-ionic、vue-weex

1.2 React的使用

引入react和react-dom的两个js文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

创建React元素

// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let title = React.createElement('li', null, 'hellow react');

渲染到页面

// 渲染到页面
ReactDOM.render(title, root)

1.3 实例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  <!-- 1、引入js文件 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

  <script>

    // 2、创建react元素 
    // 参数1：元素名称  
    // 参数2：元素属性   
    // 第3个及以后的参数：元素的子节点
    // const title = React.createElement('h1', { title:'标题', id:'1' }, 'hello world!')
    const title = React.createElement('h1', { title: '标题', id: '1' }, 'hello world!', React.createElement('span', null, '我是span里的文本'))

    // 3、渲染react元素 
    // 参数1：要渲染的react元素  
    // 参数2：挂载点
    ReactDOM.render(title, document.getElementById('root'))

  </script>
</body>

</html>

二、 React脚手架

2.1 React脚手架意义

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

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

初始化项目，命令： npx create-react-app my-pro
- npx目的：提升包内提供的命令行工具的使用体验
- 原来：先安装脚手架包，再使用这个包中提供的命令
- 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
- create-react-app 这个是脚手架名称 不能随意更改
- my-pro 自己定义的项目名称
启动项目，在项目根目录执行命令：npm start
yarn命令简介
- yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
- yarn具有快速，可靠和安全的特点
- 初始化新项目：yarn init
- 安装包： yarn add 包名称
- 安装项目依赖： yarn

2.3 脚手架中使用React

导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

创建元素

const text = React.createElement('h1', null, 'hello react')

渲染元素

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

在index.js中输入下面代码会自动显示在浏览器中

//  1.导入模块
import React from 'react'
import ReactDOM from 'react-dom'

// 2.创建元素
const text = React.createElement('h1', null, 'hello react')

// 3.渲染到页面
ReactDOM.render(text, document.getElementById('root'))

三、`JSX`的使用

3.1 概述

`JSX`产生的原因

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

`JSX`的概述

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

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

3.2 简单入门使用

使用步骤

使用JSX语法创建react元素

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

使用ReactDOM来渲染元素

ReactDOM.render(text,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.3 JSX语法

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

3.3.1 嵌入JS表达式

语法：{JavaScritp表达式}

例子：

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

注意点

只要是合法的js表达式都可以进行嵌入
JSX自身也是js表达式,也可以被嵌入
注意：js中的对象是一个例外，一般只会出现在style属性中,用于设置行内样式
注意：在{}中不能出现语句（if / for）

3.3.2 条件渲染

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

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

可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中

3.3.3 列表渲染

如果需要渲染一组数据，我们应该使用数组的 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'))

3.3.4 样式处理

行内样式 -style

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

// 双大括号与vue的不同，第一个是jsx语法，第二个是里面是对象
<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>

小结

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

泊一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础学习(一)

文章目录一、什么是React1.1 特点1.2 React的使用1.3 实例二、 React脚手架2.1 React脚手架意义2.2 使用React脚手架初始化项目2.3 脚手架中使用React三、`JSX`的使用3.1 概述`JSX`产生的原因`JSX`的概述3.2 简单入门使用使用步骤为什么在脚手架中可以使用JSX语法注意点3.3 JSX语法3.3.1 嵌入JS表达式注意点3.3.2 条件渲...
复制链接

扫一扫