欢迎光临
我的个人博客网站

React笔记01:react基础、react脚手架、JSX


1 React概述

1.1 什么是react

React 是一个用于构建用户界面的 JavaScript 库

用户界面:HTML页面(前端)

React 主要用来写HTML页面,或构建Web应用

如果从 MVC 的角度来看,React 仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了

完整的 M 和 C 的功能。

React 起源于 Facebook 的内部项目,后又用来架设 Instagram 的网站,并于 2013 年 5 月开源

React笔记01:react基础、react脚手架、JSX

1.2 react特点

  • 声明式

你只需要描述 UI(HTML)看起来是什么样,就跟写HTML一样

React 负责渲染 UI,并在数据变化时更新 UI

const jsx = <div className="app"> <h1>Hello React! 动态变化数据:{count}</h1> </div> 
  • 基于组件

  • 学习一次,随处使用:可以开发web、移动端(React-native)、AR(React360)等等。

2 React基本使用

2.1 react的安装

npm i react react-dom 

react 包是核心,提供创建元素、组件等功能

react-dom 包提供 DOM 相关功能等

2.2 react的使用

  • 第一步:引入依赖
<script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 
  • 第二步:创建react元素

  • 第三步:渲染react元素到页面中

<div id="root"></div>  <script>     //创建react元素 const title = React.createElement('h1', null, 'Hello React');     //渲染react元素 ReactDOM.render(title, document.getElementById('root')) </script>  

2.3 方法说明

  • React.createElement() 说明(知道)
// 返回值:React元素 // 第一个参数:要创建的React元素名称 // 第二个参数:该React元素的属性 // 第三个及其以后的参数:该React元素的子节点 const el = React.createElement('h1', { title: '标题' }, 'Hello React') 
  • ReactDOM.render()说明 (掌握)
// 第一个参数:要渲染的React元素 // 第二个参数:DOM对象,用于指定渲染到页面中的位置 ReactDOM.render(el, document.getElementById('root')) 

3 React脚手架的使用

3.1 脚手架意义

脚手架是开发 现代Web 应用的必备。

充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。

零配置,无需手动配置繁琐的工具即可使用。

关注业务,而不是工具配置。

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

第一步:初始化项目

npx create-react-app my-app 

第二步:启动项目

npm start 或者 yarn start 

React笔记01:react基础、react脚手架、JSX

3.3 npx命令介绍

  • npm v5.2.0 引入的一条命令

  • 目的:提升包内提供的命令行工具的使用体验

  • 原来:先安装脚手架包,再使用这个包中提供的命令

  • 现在:无需安装脚手架包,就可以直接使用这个包提供的命令

3.4 补充说明

推荐使用:npx create-react-app my-app  npm init react-app my-app yarn create react-app my-app  yarn 是 Facebook 发布的包管理器,可以看做是 npm 的替代品,功能与 npm 相同 yarn 具有快速、可靠和安全的特点 初始化新项目:yarn init 安装包: yarn add 包名称 安装项目依赖项: yarn 其他命令,请参考yarn文档 

3.5 在脚手架中使用react

第一步:导入 react 和 react-dom 两个包

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

第二步:调用 React.createElement() 方法创建 react 元素。

第三步:调用 ReactDOM.render() 方法渲染 react 元素到页面中。

4 jsx的基本使用

4.1 jsx简介

JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML(HTML) 格式的代码。

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

JSX 是 React 的核心内容

4.2 使用步骤

第一步:使用 JSX 语法创建 react 元素

let h1 = <h1>hello React</h1>; 

第二步:使用 ReactDOM.render() 方法渲染 react 元素到页面中

ReactDOM.render(h1,document.getElementById("root")); 

4.3 注意点

  • React元素的属性名使用驼峰命名法

  • 特殊属性名:class -> className、for -> htmlFor、tabindex -> tabIndex 。

  • 没有子节点的React元素可以用 /> 结束 。

  • 推荐:使用小括号包裹 JSX ,从而避免 JS 中的自动插入分号陷阱。

// 使用小括号包裹 JSX  const dv = ( 	<div>Helo JSX</div> ) 

问题:为什么脚手架中可以使用 JSX 语法?

JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展 需要使用 babel 编译处理后,才能在浏览器环境中使用 create-react-app 脚手架中已经默认有该配置,无需手动配置 编译 JSX 语法的包为:@babel/preset-react  

5 jsx使用js表达式

5.1 嵌入表达式

数据存储在JS中

语法:{js表达式}

注意:语法中是单大括号,不是双大括号

const name = 'Jack' const dv = ( <div>你好,我叫:{name}</div> ) 

5.2 注意点

单大括号中可以使用任意的 JavaScript 表达式

JSX 自身也是 JS 表达式

const h1 = <h1>我是JSX</h1>  const dv = ( <div>嵌入表达式:{h1}</div> ) 

注意:JS 中的对象是一个例外,一般只会出现在 style 属性中

注意:不能在{}中出现语句(比如:if/for 等)

6 jsx条件渲染

场景:loading效果

条件渲染:根据条件渲染特定的 JSX 结构

可以使用if/else三元运算符逻辑与运算符来实现

import React from "react"; import ReactDOM from "react-dom";  let isLoading = true;  let load = () =>{   if(isLoading){     return <h2>加载中。。。</h2>   }   return <h2>加载成功</h2> }  // let load = () => { //   return isLoading ? <h2>加载中。。。</h2> : <h2>加载成功</h2>; // };  let el = <div>{load()}</div>;  ReactDOM.render(el, document.getElementById("root")); 

7 列表渲染

如果要渲染一组数据,应该使用数组的 **map() **方法

注意:渲染列表时应该添加 key 属性,key 属性的值要保证唯一

原则:map() 遍历谁,就给谁添加 key 属性

注意:尽量避免使用索引号作为 key

import React from "react"; import ReactDOM from "react-dom"; //定义数据 const songs = [   { id: 1, name: "痴心绝对" },   { id: 2, name: "像我这样的人" },   { id: 3, name: "南山南" }, ]; //生成react元素 let arr = songs.map(v=><p key={v.id}>{v.id+"---"+v.name}</p>); let el = <div>{arr}</div>; //渲染 ReactDOM.render(el, document.getElementById("root")); 

8 jsx样式处理

8.1 行内样式

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的样式处理</h1> 

注意:属性名称驼峰命名,并且属性值要用引号包裹起来

8.2 类名

// 导入样式文件 import './index.css' //使用 <h1 className="title"> JSX的样式处理</h1> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » React笔记01:react基础、react脚手架、JSX
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏