React基础

React 介绍

React:用户构建用户界面(UI)的 JS 库,简单理解就是写页面的 JS 库

特点:

1、声明式:对比命令式。
    声明式:what
    命令式:how
2、组件化
3、跨平台:不仅能够开发web端应用还可以开发移动端安卓、ioss应用,VR应用

创建 react 项目

npx create-react-app  项目名称

JSX

JSX 是什么:在 js 中写 HTML 标签(页面结构)

幽灵节点:不会渲染任何内容,可以同时渲染多个标签

<></>

JS 表达式:能够通过 console.log(表达式)打印出的内容就是表达式

语法:

{}

特点:有值

条件渲染:

1、三元表达式
2、函数 + if/else
3、逻辑与 (&&)

列表渲染:

1、使用数组的 map 方法
2、列表渲染需要给每个元素添加 key 属性
3、key 要唯一(number、string)

样式:

1、行内样式 : style={width:'50px'}
2、className(推荐)

组件的基本使用

react 有两种组件:

1、函数组件
2、class组件

两种组件的区别:

1、函数组件没有状态也叫无状态组件 负责静态结构的展示
2、class组件有状态也叫有状态组件 提供状态,提供交互

绑定事件的语法:
1、on + 事件名称 = (事件处理程序 如 onClick=(()=>{}))
2、onMouseEnter

事件对象:通过事件处理程序的参数拿到事件对象

事件处理程序中 this 指向问题

1、推荐:领用箭头函数形式的实例方法 如 hanclleClick=()=>{}
2、在coustructor函数 + bind
3、在事件绑定的位置写成箭头函数return的写法
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. React入门概述 1.1 介绍 用于构建用户界面的 JavaScript 库(只关注于视图) 1.2 Re...
    dong_1122阅读 3,349评论 0 0
  • 基于html的前端 是一个为数据提供渲染为HTML 的视图的开源 JavaScript 库 本质问题归结于如何将来...
    佛本非佛阅读 3,073评论 0 3
  • React 基础学习笔记 黑马程序员视频:传送门 1. React 基础 1.1 介绍react React起源于...
    Haleng阅读 4,153评论 1 1
  • 创建组件引入文件 提供 react reactdom对象 帮助浏览器解析jsx组件名一定要大写 let Compo...
    soo伟阅读 4,553评论 0 2
  • react基础 基础语法 引入文件 相当于vue.js 提供的是React对象 提供了ReactDOM 对象网页 ...
    jie_han阅读 1,469评论 0 0