什么是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文件
。。。待完善