济南网站制作技术交流,wordpress包,店名设计logo,工商网站备案查询React 入门 一、基本认识1.1、前言1.2、什么是1.3、编译br1.4、特点1.5、高效 二、React环境和基本使用2.1、环境搭建2.2、脚手架项目基本使用2.2.1、src2.2.2、public2.2.3、package.json 三、JSX的理解和使用四、模块与模块化, 组件与组件化的理解4.1、模块与组件4.2… React 入门 一、基本认识1.1、前言1.2、什么是1.3、编译br1.4、特点1.5、高效 二、React环境和基本使用2.1、环境搭建2.2、脚手架项目基本使用2.2.1、src2.2.2、public2.2.3、package.json 三、JSX的理解和使用四、模块与模块化, 组件与组件化的理解4.1、模块与组件4.2、模块化与组件化 参考地址 一、基本认识
1.1、前言
React 使用称为 JSXJavaScript 和 XML的 HTML-in-JavaScript 语法。 熟悉 HTML 和 JavaScript 可以帮助您学习 JSX并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关.
1.2、什么是 React 是一个用于构建用户界面的库。 React 不是一个框架 —— 它的应用甚至不局限于 Web 开发它可以与其他库一起使用以渲染到特定环境。 例如React Native 可用于构建移动应用程序React 360 可用于构建虚拟现实应用程序…… 为了构建 Web 应用开发人员将 React 与 ReactDOM 结合使用。 React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论并用于解决相同的问题。当我们将 React 称为“框架”时就是在进行口语化的理解。
1.3、编译 浏览器是无法读取直接解析 JSX 的。我们的表达式经过 Babel 或 Parcel 之类的工具编译
1.4、特点
JSXDeclarative Programming声明式编程Funational Programming函数式编程 不是单纯的声明式还是函数式编程都有借鉴 Component-Based (组件化编码)Learn Once, Write Anywhere(支持客户端与服务器渲染)Virtual DOM虚拟DOM单向数据流FluxReact NativeTypeScript
1.5、高效 虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数) 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)
二、React环境和基本使用
2.1、环境搭建
关注此链接的 2.5 章节
2.2、脚手架项目基本使用 2.2.1、src
源码存放的目录
2.2.1.1、App.js
importApp 组件 Export 语句
//允许在此脚本中使用其他文件中的代码
import logo from ./logo.svg;
import ./App.css;//方法返回一个 JSX 表达式这个表达式定义了浏览器最终要渲染的 DOM。
function App() {return (div classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div);
}//export default App 语句使得 App 组件能被其他模块使用
export default App;2.2.1.2、index.js
import React from react;
import ReactDOM from react-dom/client;
import ./index.css;
//App 组件被用到的地方
import App from ./App;
import reportWebVitals from ./reportWebVitals;
//我们想要渲染的组件在这个例子中是 App / .
// 我们想要渲染组件所在的 DOM 元素在这个例子中是带着 root 标签的元素。让我们看一下 public/index.html 的代码可以看到这有一个 div 元素 在 body 里。
const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeApp //React.StrictMode
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.css 定义了运用于整个 app 的 global style
2.2.2、public
包含了开发应用时浏览器会读取的文件
src代码会嵌入此文件(index.html)
2.2.3、package.json
为了建立该应用程序所管理着的文件信息
三、JSX的理解和使用
JSXJavaScript XML是一种在React中编写用户界面的语法扩展它允许你在JavaScript代码中直接书写类似HTML的结构。
下面是一些JSX的基本语法规则 元素定义JSX元素以类似HTML标签的方式定义通常以大写字母开头。 const element h1Hello, JSX!/h1;嵌套元素JSX元素可以嵌套就像在HTML中一样。 const element (divh1Hello/h1pJSX is awesome!/p/div
);JavaScript 表达式你可以在JSX中使用花括号 {} 来包含任意的JavaScript表达式。 const name Alice;
const element h1Hello, {name}!/h1;属性你可以给JSX元素添加属性就像在HTML中一样。 const element img srcimage.jpg altAn image /;class 和 style由于class是JavaScript的保留关键字因此在JSX中使用CSS类名需要使用className。 const element div classNamemy-classStyled div/div;同样地style属性应该是一个对象其中的属性名需要使用驼峰命名法。 const styles {backgroundColor: blue,color: white
};const element div style{styles}Styled div/div;如果styles直接赋值给style写成 const element div style{{backgroundColor: blue,color: white}}Styled div/div;自闭合标签与HTML一样JSX中的标签也可以是自闭合的。 const element input typetext /;注释JSX中的注释需要用花括号包裹起来。 const element (div{/* This is a comment */}pJSX with comments/p/div
);在React应用程序中JSX被Babel等工具转换成普通的JavaScript代码以便浏览器可以理解和渲染。
四、模块与模块化, 组件与组件化的理解
4.1、模块与组件
模块: 理解: 向外提供特定功能的js程序, 一般就是一个js文件 为什么: js代码更多更复杂 作用: 复用js, 简化js的编写, 提高js运行效率 组件: 理解: 用来实现特定功能效果的代码集合(html/css/js) 为什么: 一个界面的功能太复杂了 作用: 复用编码, 简化项目界面编码, 提高运行效率 定义组件: // MyComponent.jsimport React, { Component } from react;class MyComponent extends Component {// 组件的定义}export default MyComponent;引用他: // 另一个文件中import MyComponent from ./MyComponent;// 使用导入的组件4.2、模块化与组件化
模块化: 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 组件化: 当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
参考地址
MDN
https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
BILIBILI 尚硅谷
https://www.bilibili.com/video/BV1wy4y1D7JT/?p26spm_id_from333.1007.top_right_bar_window_history.content.click
