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