@React介绍

Reac是什么

一个专注于构建页面的JavaScript库，和Vue,Angular并称前端三大框架，react引领新思想，是目前最流行的框架之一，最新版本已经更新到18，加入了很多新特性。
React英文文档（https://reactjs.org/）
React中文文档 （https://zh-hans.reactjs.org/）
React新文档（https://beta.reactjs.org/）（开发中…）

React特点

1. 声明式UI(JS)

2. 组件化 【组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性】

3. 跨平台 【react既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像是一个 元框架 为各种领域赋能 】

环境初始化

1、使用脚手架創建項目：
● 打开命令行窗口
● 执行命令

$ npx create-react-app react-basic

说明：
a. npx create-react-app 是固定命令，create-react-app是React脚手架的名称
b. react-basic表示项目名称，可以自定义，保持语义化
c. npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app
● 启动项目

$ yarn start
or
$ npm start

2. 项目目录说明调整
   ● 目录说明
   a. src 目录是我们写代码进行项目开发的目录
   b. package.json 中俩个核心库：react 、react-dom
   ● 目录调整
   a. 删除src目录下自带的所有文件，只保留app.js根组件和index.js
   b. 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可
   ● 入口文件说明

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(,document.getElementById('root')
)

JSX基础

1. JSX介绍
   目标任务: 能够理解什么是JSX，JSX的底层是什么

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构
作用：在React中创建HTML结构（页面UI结构）
优势：

1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2. 充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

2. JSX中使用js表达式
目标任务: 能够在JSX中使用表达式
语法
{ JS 表达式 }

const name = '柴柴'
你好，我叫{name}
   //    
你好,我叫柴柴

可以使用的表达式

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
3. fn()

特别注意
if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

3. JSX列表渲染

目标任务: 能够在JSX中实现列表渲染
页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等，我们知道vue中用的是v-for，react这边如何实现呢？

// 来个列表
const songs = [{ id: 1, name: '痴心绝对' },{ id: 2, name: '像我这样的人' },{ id: 3, name: '南山南' }
]function App() {return (
{songs.map(item => 
{item.name}
)}
)
}export default App

注意点：需要为遍历项添加 key 属性

1. key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
2. key 在当前列表中要唯一的字符串或者数值（String/Number）
3. 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4. 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

4. JSX条件渲染

目标任务: 能够在JSX中实现条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果
实现：可以使用 三元运算符 或 逻辑与(&&)运算符

// 来个布尔值
const flag = true
function App() {return ({/* 条件渲染字符串 */}{flag ? 'react真有趣' : 'vue真有趣'}{/* 条件渲染标签/组件 */}{flag ? this is span : null})
}
export default App

5. JSX样式处理

目标任务: 能够在JSX中实现css样式处理

● 行内样式 - style

function App() {return ({ color: 'red' }}>this is a div)
}export default App

行内样式 - style - 更优写法

const styleObj = {color:red
}function App() {return (this is a div)
}export default App

类名 - className（推荐）

.title {font-size: 30px;color: blue;
}

类名 - className - 动态类名控制

import './app.css'
const showTitle = true
function App() {return (this is a div)
}
export default App

6. JSX注意事项

目标任务: 掌握JSX在实际应用时的注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现
   格式化配置
   目标任务: 基于vscode配置格式化工具，提高开发效率
5. 安装vsCode prettier插件
6. 修改配置文件 setting.json

{"git.enableSmartCommit": true,// 修改注释颜色"editor.tokenColorCustomizations": {"comments": {"fontStyle": "bold","foreground": "#82e0aa"}},// 配置文件类型识别"files.associations": {"*.js": "javascript","*.json": "jsonc","*.cjson": "jsonc","*.wxss": "css","*.wxs": "javascript"},"extensions.ignoreRecommendations": false,"files.exclude": {"**/.DS_Store": true,"**/.git": true,"**/.hg": true,"**/.svn": true,"**/CVS": true,"**/node_modules": false,"**/tmp": true},// "javascript.implicitProjectConfig.experimentalDecorators": true,"explorer.confirmDragAndDrop": false,"typescript.updateImportsOnFileMove.enabled": "prompt","git.confirmSync": false,"editor.tabSize": 2,"editor.fontWeight": "500","[json]": {},"editor.tabCompletion": "on","vsicons.projectDetection.autoReload": true,"editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline","[html]": {"editor.defaultFormatter": "vscode.html-language-features"},"editor.fontSize": 16,"debug.console.fontSize": 14,"vsicons.dontShowNewVersionMessage": true,"editor.minimap.enabled": true,"emmet.extensionsPath": [""],// vue eslint start 保存时自动格式化代码"editor.formatOnSave": true,// eslint配置项，保存时自动修复错误"editor.codeActionsOnSave": {"source.fixAll": true},"vetur.ignoreProjectWarning": true,// 让vetur使用vs自带的js格式化工具// uni-app和vue 项目使用"vetur.format.defaultFormatter.js": "vscode-typescript","javascript.format.semicolons": "remove",// // 指定 *.vue 文件的格式化工具为vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// // 指定 *.js 文件的格式化工具为vscode自带"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// // 默认使用prettier格式化支持的文件"editor.defaultFormatter": "esbenp.prettier-vscode","prettier.jsxBracketSameLine": true,// 函数前面加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"prettier.singleQuote": true,"prettier.semi": false,// eslint end// react// 当按tab键的时候，会自动提示"emmet.triggerExpansionOnTab": true,"emmet.showAbbreviationSuggestions": true,"emmet.includeLanguages": {// jsx的提示"javascript": "javascriptreact","vue-html": "html","vue": "html","wxml": "html"},// end"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},// @路径提示"path-intellisense.mappings": {"@": "${workspaceRoot}/src"},"security.workspace.trust.untrustedFiles": "open","git.ignoreMissingGitWarning": true,"window.zoomLevel": 1
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！