React入门必学基础知识点 |
您所在的位置:网站首页 › react获取事件对象 › React入门必学基础知识点 |
React入门必学基础知识点
目标
能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架
什么是React (★★★)
React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 特点 声明式你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件组件时React最重要的内容,组件表示页面中的部分内容 学习一次,随处使用使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用 React基本使用 React的安装npm i react react-dom react 包是核心,提供创建元素,组件等功能react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 创建React元素 // 创建元素节点 // 1. 元素名称 // 2. 元素属性 传递的是个对象 // 3. 元素内容 let title = React.createElement('li', null, 'hellow react'); 渲染到页面 // 渲染到页面 ReactDOM.render(title, root) React脚手架(★★★) React脚手架意义 脚手架是开发现代Web应用的必备充分利用 Webpack,Babel,ESLint等工具辅助项目开发零配置,无需手动配置繁琐的工具即可使用关注业务,而不是工具配置 使用React脚手架初始化项目 初始化项目,命令: npx create-react-app my-pro npx 目的:提升包内提供的命令行工具的使用体验原来:先安装脚手架包,再使用这个包中提供的命令现在:无需安装脚手架包,就可以直接使用这个包提供的命令create-react-app 这个是脚手架名称 不能随意更改my-pro 自己定义的项目名称 启动项目,在项目根目录执行命令: npm startyarn命令简介 yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同yarn具有快速,可靠和安全的特点初始化新项目:yarn init安装包: yarn add 包名称安装项目依赖: yarn 脚手架中使用React 导入react和react-dom两个包 import React from 'react' import ReactDOM from 'react-dom' 创建元素 let h1 = React.createElement('h1',null,'我是标题') 渲染到页面 ReactDOM.render(h1,document.getElementById('root')) JSX的使用 目标 知道什么是JSX能够使用JSX创建React元素能够在JSX中使用JavaScript表达式能够使用JSX的条件渲染和列表渲染能够给JSX添加样式 概述 JSX产生的原因由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽 JSX的概述JSX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率 简单入门使用(★★★) 使用步骤 使用JSX语法创建react元素 let h1 = 我是通过JSX创建的元素 使用ReactDOM来渲染元素 ReactDOM.render(h1,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中自动插入分号报错 JSX语法(★★★)JSX是来描述页面的结构,我们一般在编写业务逻辑渲染页面的时候,需要涉及到传递值,调用函数,判断条件,循环等,这一些在JSX中都能得到支持 嵌入JS表达式语法:{JavaScritp表达式} 例子: let content = '插入的内容' let h1 = 我是通过JSX创建的元素+ {content} 注意点 只要是合法的js表达式都可以进行嵌入JSX自身也是js表达式注意:js中的对象是一个例外,一般只会出现在style属性中注意:在{}中不能出现语句 条件渲染根据不同的条件来渲染不同的JSX结构 let isLoading = true let loading = ()=>{ if(isLoading){ return Loading... } return 加载完成 }可以发现,写JSX的条件渲染与我们之前编写代码的逻辑是差不多的,根据不同的判断逻辑,返回不同的 JSX结构,然后渲染到页面中 列表渲染 如果需要渲染一组数据,我们应该使用数组的 map () 方法注意:渲染列表的时候需要添加key属性,key属性的值要保证唯一原则:map()遍历谁,就给谁添加key属性注意:尽量避免使用索引号作为key let arr = [{ id:1, name:'三国演义' },{ id:2, name:'水浒传' },{ id:3, name:'西游记' },{ id:4, name:'红楼梦' }] let ul = ( {arr.map(item => {item.name})} ) ReactDOM.render(ul,document.getElementById('root')) 样式处理 行内样式 -style在style里面我们通过对象的方式传递数据 text-align: center }在js中进行引入,然后设置类名即可 import './css/index.css' |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |