003. ReactJS basic
-
Upload
binh-quan-duc -
Category
Software
-
view
51 -
download
1
Transcript of 003. ReactJS basic
003. REACTJS BASICPresenter: Binh Quan
ReactJS - Basic
❖ File/Folder Structure❖ Create a React Component❖ Bootstrapping a React project❖ JSX in React❖ Component Lifecycle❖ Stateless Component❖ Events
ReactJS - File/Folder Structure
index.js
React Componentusing ES6 class
React Componentusing createClass
method
Bootstrapping
JSX with React
❖ HTML like❖ can add Javascript❖ XML strict
Supported attributes:https://facebook.github.io/react/docs/dom-elements.htmlaccept acceptCharset accessKey action allowFullScreen allowTransparency altasync autoComplete autoFocus autoPlay capture cellPadding cellSpacing challengecharSet checked cite classID className colSpan cols content contentEditablecontextMenu controls coords crossOrigin data dateTime default defer dirdisabled download draggable encType form formAction formEncType formMethodformNoValidate formTarget frameBorder headers height hidden high href hrefLanghtmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind labellang list loop low manifest marginHeight marginWidth max maxLength mediamediaGroup method min minLength multiple muted name noValidate nonce openoptimum pattern placeholder poster preload profile radioGroup readOnly relrequired reversed role rowSpan rows sandbox scope scoped scrolling seamlessselected shape size sizes span spellCheck src srcDoc srcLang srcSet start stepstyle summary tabIndex target title type useMap value width wmode wrap
State
StateChanging state
Component Lifecycle
Component Lifecycle
Stateless Component
EventsSupport almost HTML DOM event
Syntax: on<EventName>Eg: onClick, onChange
Now Demo