0
点赞
收藏
分享

微信扫一扫

react学习

小禹说财 2022-04-02 阅读 45

什么是react

react是一个用于构建用户界面的js库
react主要用来写html页面,或构建web应用
如果从MVC角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,并非提供了完整的M和C功能

react特点

1.声明式
你只需描述ui{html}看起来是什么样子的,就跟写html一样。react只负责渲染ui,并在数据变化时更新ui

const jsx=<div class="msg">
	<h1>hello react!动态变化的数据:{count}</h1>
</div>

2.基于组件
组件时react重要的部分,组件表示页面中的部分内容。组合、复用多个组件可以实现完整的页面功能
3.学习一次,多次使用
·使用react可以开发web应用
·使用react可以开发移动端原生应用(react-native)
·使用react可以开发VR(虚拟现实)应用(react 360)
。。。。。。

基本使用

安装:npm i react react-dom
·react包是核心,提供创建元素、组件等功能
·react-dom包提供DOM相关功能
在这里插入图片描述

react脚手架意义

1.脚手架是开发现代web应用的必备
2,充分利用webpack、babel、eslint等工具辅助项目开发
3,零配置,无需手动配置繁琐的工具即可使用
4,关注业务,而不是工具配置

使用react脚手架初始化项目

1、初始化项目命令 npx create-react-app my_app(项目名)
2、启动项目:在项目根目录命令行输入npm start
在这里插入图片描述

在脚手架中使用react

在这里插入图片描述

JSX的基本使用

在这里插入图片描述
jsx是javaScrit XML的简写,表示在js代码中写xml(html)格式的代码。语法更加的简单直观
在这里插入图片描述
jsx注意点:
1、元素的属性名使用驼峰命名法
2、特殊属性名:class->className, for->htmlfor, tabindex->tabIndex
3、没有子节点的react元素可用/>结束
4、推荐:使用小括号包裹jsx,从而避免js中的自动插入分号陷阱

const dv=(
	<div>Hello</div>
)

jsx中嵌入js表达式:
在这里插入图片描述
jsx条件渲染:
在这里插入图片描述
jsx列表渲染:
在这里插入图片描述
在这里插入图片描述

创建组件的两种方式:

1、使用函数创建组件
在这里插入图片描述
2、使用类创建组件
在这里插入图片描述
3、抽离为独立js文件
在这里插入图片描述
。。。待完善

举报

相关推荐

0 条评论