没有合适的资源？快使用搜索试试~ 我知道了~

首页React JS入门指南：从基础到实践

React JS入门指南：从基础到实践

React

React.js

Javascript

需积分: 9 1 下载量 182 浏览量更新于2024-07-18 收藏 615KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

108页

React Enlightenment React Enlightenment 是一本关于 React JS 的电子书，由 Cody Lindley 撰写，Frontend Masters 赞助。该书籍采用简洁的 cookbook 风格，涵盖了 React JS 的基础知识和高级技术。 React Enlightenment 可以帮助读者快速了解 React JS 的基本概念和使用方法，涵盖了 React 的语义、组件、事件处理、JSX 语法扩展等方面的知识。该书籍还提供了大量的实践示例和代码片段，帮助读者快速上手 React JS。下面是 React Enlightenment 的知识点总结：一、React 基础知识 * 什么是 React？ React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。 * React 的语义和 TERMINOLOGY，例如 JSX、JS、ES6 等。 * 如何使用 React，包括基本的安装和配置。二、React 组件 * 什么是一个 React 组件？ React 组件是 React 应用程序的基本构成单元。 * 如何创建 React 组件，包括函数组件和类组件。 * 如何使用 React 组件，包括组件的生命周期、状态和属性。三、JSX 语法扩展 * 什么是 JSX？ JSX 是 JavaScript 的一种语法扩展，用于描述用户界面。 * 如何使用 JSX，包括 JSX 的基本语法和 advance 语法。 * JSX 在 React 中的应用，包括 JSX 的优点和缺点。四、事件处理 * 如何在 React 中处理事件，包括事件的类型和处理方式。 * 如何使用 React 的事件处理机制，包括事件委托和事件捕获。五、React 高级技术 * 如何使用 React 的高级技术，包括 Context API、Hook 和 Render Props。 * 如何优化 React 应用程序的性能，包括代码分割和缓存。 React Enlightenment 是一本非常实用的 React JS 教程书籍，涵盖了 React JS 的基础知识和高级技术。该书籍适合初学者和经验丰富的开发者阅读。

资源详情

资源推荐

ReactSemantics

BeforeIenlightenyouwiththemechanicsofReactI'dfirstliketodefineafewtermssoasto

greasethelearningprocess.

BelowIlistthemostcommonterms,andtheirdefinitions,usedwhentalkingaboutReact.

Babel

BabeltransformsJavaScriptES*(i.e.,JS2016,2016,2017)toES5.Babelisthetoolof

choicefromtheReactteamforwritingfutureES*codeandtransformingJSXtoES5code.

BabelCLI

BabelcomeswithaCLItool,calledBabelCLI,thatcanbeusedtocompilefilesfromthe

commandline.

ComponentConfigurationOptions(a.k.a,"Component

Specifications")

Theconfigurationargumentspassed(asanobject)totheReact.createClass()function

resultinginaninstanceofaReactcomponent.

ComponentLifeCycleMethods

Asubgroupofcomponentevents,semanticallyseparatedfromtheothercomponent

configurationoptions(i.e.,componentWillUnmount,componentDidUpdate,

componentWillUpdate, shouldComponentUpdate, componentWillReceiveProps,

componentDidMount, componentWillMount).Thesemethodsareexecutedatspecificpointsin

acomponent'sexistence.

DocumentObjectModel(a.k.a.,DOM)

2.ReactSemantics/Terminology

"TheDocumentObjectModel(DOM)isaprogramminginterfaceforHTML,XMLandSVG

documents.Itprovidesastructuredrepresentationofthedocumentasatree.TheDOM

definesmethodsthatallowaccesstothetree,sothattheycanchangethedocument

structure,styleandcontent.TheDOMprovidesarepresentationofthedocumentasa

structuredgroupofnodesandobjects,possessingvariouspropertiesandmethods.Nodes

canalsohaveeventhandlersattachedtothem,andonceaneventistriggered,theevent

handlersgetexecuted.Essentially,itconnectswebpagestoscriptsorprogramming

languages."-MSD

ES5

The5theditionoftheECMAScriptstandard.TheECMAScript5.1editionwasfinalizedin

June2011.

ES6/ES2015

The6theditionoftheECMAScriptstandard.A.k.a,JavaScript2015orECMAScript2015.

TheECMAScript6theditionwasfinalizedinJune2015.

ECMAScript2016(a.k.a,ES7)

The7theditionoftheECMAScriptstandard.TheECMAScript7theditionwasfinalizedin

June2016.

ES*

UsedtorepresentthecurrentversionofJavaScriptaswellaspotentialfutureversionsthat

canwrittentodayusingtoolslikeBabel.Whenyousee"ES*"itmorethanlikelymeansyou'll

findusesofES5,ES6,andES7together.

JSX

JSXisanoptionalXML-likesyntaxextensiontoECMAScriptthatcanbeusedtodefinean

HTML-liketreestructureinaJavaScriptfile.TheJSXexpressionsinaJavaScriptfilemust

betransformedtoJavaScriptsyntaxbeforeaJavaScriptenginecanparsethefile.Babelis

2.ReactSemantics/Terminology

typicallyusedandrecommendedfortransformingJSXexpressions.

Node.js

Node.jsisanopen-source,cross-platformruntimeenvironmentforwritingJavaScript.The

runtimeenvironmentinterpretsJavaScriptusingGoogle'sV8JavaScriptengine.

npm

npmisthepackagemanagerforJavaScriptbornfromtheNode.jscommunity.

ReactAttributes/Props

InonesenseyoucanthinkofpropsastheconfigurationoptionsforReactnodesandin

anothersenseyoucanthinkofthemasHTMLattributes.

Propstakeonseveralroles:

1. PropscanbecomeHTMLattributes.IfapropmatchesaknownHTMLattributethenit

willbeaddedtothefinalHTMLelementintheDOM.

2. Propspassedto createElement()becomevaluesstoredina propobjectasan

instancepropertyof React.createElement()instances(i.e.,[INSTANCE].props.[NAMEOF

PROP]).Propsbyandlargeareusedtoinputvaluesintocomponents.

3. Afewspecialpropshavesideeffects(e.g., key,ref,anddangerouslySetInnerHTML)

React

ReactisanopensourceJavaScriptlibraryforwritingdeclarative,efficient,andflexibleuser

interfaces.

ReactComponent

AReactcomponentiscreatedbycalling React.createClass()(or, React.Componentifusing

ES6classes).Thisfunctiontakesanobjectofoptionsthatisusedtoconfigureandcreatea

Reactcomponent.Themostcommonconfigurationoptionisthe renderfunctionwhich

2.ReactSemantics/Terminology

returnsReactnodes.Thus,youcanthinkofaReactcomponentasanabstraction

containingoneormoreReactnodes/components.

ReactElementNodes(a.k.a., ReactElement)

AnHTMLorcustomHTMLelementnoderepresentationintheVirtualDOMcreatedusing

React.createElement();.

ReactNodes

Reactnodes(i.e.,elementandtextnodes)aretheprimaryobjecttypeinReactandcanbe

createdusing React.createElement('div');.InotherwordsReactnodesareobjectsthat

representDOMnodesandchildrenDOMnodes.Theyarealight,stateless,immutable,

virtualrepresentationofaDOMnode.

ReactNodeFactories

AfunctionthatgeneratesaReactelementnodewithaparticulartypeproperty.

ReactStatelessFunctionComponent

Whenacomponentispurelyaresultofpropsalone,nostate,thecomponentcanbewritten

asapurefunctionavoidingtheneedtocreateaReactcomponentinstance.

varMyComponent=function(props){

return<div>Hello{props.name}</div>;

};

ReactDOM.render(<MyComponentname="doug"/>,app);

ReactTextNodes(a.k.a., ReactText)

AtextnoderepresentationintheVirtualDOMcreatedusing

React.createElement('div',null,'atextnode');.

2.ReactSemantics/Terminology

VirtualDOM

Anin-memoryJavaScripttreeofReactelements/componentsthatisusedforefficientre-

rendering(i.e.,diffingviaJavaScript)ofthebrowserDOM.

Webpack

Webpackisamoduleloaderandbundlerthattakesmodules(.js,.css,.txt,etc.)with

dependenciesandgeneratesstaticassetsrepresentingthesemodules.

2.ReactSemantics/Terminology

剩余107页未读，继续阅读

粉丝: 2
资源: 63

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

React JS入门指南：从基础到实践

目前超流行的跨平台移动应用开发框架-React-Native项目实战 从React到React-Native

适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc

react print-js

如何把原来的react-scripts修改为react-app-rewired

react ant-design-mobile tabBar 路由

如何使用react-native-svg和react-native-svg-transformer加载本地svg图片

react livebos-frame 使用

react pdfjs-dist运行报错

react native 如何安装react-native-nfc-android

react-native link react-native-pdf zsh: command not found: react-native

react-router-dom 官网

我要使用react-grid-layout，来实现一个类似于Tab布局的组件，每一个Tab页里面是一个react-grid-layout布局，应该怎么做？

react 最新版本 匹配的 react-dom react-router-dom 版本

react-native link react-native-svg

react使用react-3d-viewer展示gltf文件

react-native-vector-icons 如何安装

如何查询安装的react-native-nfc-manager 库版本

react react-router-config 路由切入动画

react docx-preview的详细用法

react-jinke-music-player 设置中文

最新资源

目前超流行的跨平台移动应用开发框架-React-Native项目实战从React到React-Native

react 最新版本匹配的 react-dom react-router-dom 版本