reactjs - introduction
TRANSCRIPT
R E AC T J S - I N T R OD U C T I ON
ME ET U P A I X J S . OR G
Sovanna Hing@sovannahingSoftware engineer @KwankoGroup
HOST E D AT GO J OB . C OM
“ A JAVA SC R I PT L IB RA RY T O B U I L D U SE R I N T ER FAC ES ”( h t t p s : / / f a c eb o o k .g i t h u b . i o / rea c t /)
U I , T H I N K E V ERY T H IN G I S CO M P ON EN T
“ KE E P I T S I MP L E A ND S HO RT”
I T ’ S L I KE U S IN G P H OT OS H OPBU T I NS T EAD , YOU U S E KE Y BOAR D AND NOT T H E M OU S E .
I T ’ S A BO U T D E S C R I B I N G H O W C O M P O N E N T S W I L L B E D I S P L AY E D . I T ’ S D E C L A RAT I V E .
C O M PO N E N T S
• Describe UI with data• When data changes,
React manage the UI• Reusable and
Composable• Maintainable and
Testing
COMPONE NT S
HOW ?
• Have props*, state* and render* the view*
• props are immutable• state is mutable• change is made with
Virtual DOM*, React check diffs and computes only mutation
• when state changes, the component is re-render
* i mpo r tan t s tuff
“ L I FE I S A BA L A NCE ”
SH OW M E H OW I T LOOKS L I KE !
R EAC T JS
SHOULD I TRY IT AND JUMP?
f ro m Re a c t o ffic i a l d oc ….
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <script src="https://unpkg.com/[email protected]/dist/react.js"></script> <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> <script src="https://unpkg.com/[email protected]/browser.min.js"></script> </head> <body> <div id="example"></div>
<script type="text/babel">
</script> </body></html>
class BattleShip extends React.Component { render() { return ( <div> <h1>BattleShip</h1> </div> ); }}
ReactDOM.render( <BattleShip />, document.getElementById('game'));
class BattleShip extends React.Component { render() { return ( <div> <h1>BattleShip</h1> </div> ); }}
ReactDOM.render( <BattleShip />, document.getElementById('game'));
• Remember…? Everything is component
• render()• view using JSX Syntax• JSX “HTML Syntax”
class ExampleBase extends React.Component {
static get propTypes() { return { prop1: React.PropTypes.number, prop2: React.PropTypes.string, onClickSubmit: React.PropTypes.func }; }
static get defaultProp() { return { prop1: 1, prop2: 2 }; }
constructor(props) { super(props);
this._test = 'ok test property'; }
shouldComponentUpdate(nextProps) { return true; }
componentDidMount() {} componentWillReceiveProps() {} static get InitialState() {}
render() { return ( <div> ok example </div> ); };}
• 5 Ships• Grid• “Square”• War Zone• +1 Main Game• +1 Base Ship
BattleShip - Think Component
B a t t l e Sh i p ex i s t s b ro ,you ma d ?
AVA I L A BL E S OURC E C ODE
https://github.com/sovanna/reacthorhttps://github.com/sovanna/react-game-battleship
H TT PS : / /G IT H U B . C O M/ SOVA NN A / RE AC T- GA M E -B ATT L E SH I P
“Quick code exploration from BattleShip source”
B AC K T O R E AC T - P R O P E RT I E S
• props are passed from parent to child (e.g value)
• props can be “callback”too (e.g send data to parent)
• props are immutable
BACK TO REACT - STATE• “within component”• it’s simply the state of
the component in a time “t”
• getInitialState() to initialise
• this.state to read• this.setState() to
update
C O M PO N E N T S F LO W
<Zone />
C O M PO N E N T S F LO W
<Zone />
<Grid />
passing props
C O M PO N E N T S F LO W
<Zone />
<Grid />
<Square /><Square /> <Square /> …
passing props
passing propspassing props
C O M PO N E N T S F LO W
<Zone />
<Grid />
<Square /><Square /> <Square /> …
passing props
passing propspassing props
event handlerto the parent
C O M PO N E N T S F LO W
<Zone />
<Grid />
<Square /><Square /> <Square /> …
passing props
passing propspassing props
event handlerto the parent
setState()
–HTT P S : / / FAC EBOOK . G I THU B . I O / R E AC T / DOC S / I N TE RACT I V I T Y-AN D-DY N A M I C - U I S . HT M L
“Try to keep as many of your components as possible stateless. By doing this you'll isolate
the state to its most logical place and minimize redundancy, making it easier to
reason about your application.”
TA K E A LO O K
• https://facebook.github.io/react/docs/getting-started.html
• https://github.com/mxstbr/react-boilerplate
• https://daveceddia.com/ajax-requests-in-react/
• http://redux.js.org
• http://webpack.github.io
TH AN K YOU