reactjs - introduction
TRANSCRIPT
![Page 1: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/1.jpg)
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
![Page 2: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/2.jpg)
“ 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 /)
![Page 3: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/3.jpg)
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”
![Page 4: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/4.jpg)
![Page 5: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/5.jpg)
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 .
![Page 6: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/6.jpg)
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 .
![Page 7: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/7.jpg)
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
![Page 8: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/8.jpg)
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
![Page 9: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/9.jpg)
“ L I FE I S A BA L A NCE ”
![Page 10: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/10.jpg)
SH OW M E H OW I T LOOKS L I KE !
R EAC T JS
SHOULD I TRY IT AND JUMP?
![Page 11: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/11.jpg)
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>
![Page 12: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/12.jpg)
class BattleShip extends React.Component { render() { return ( <div> <h1>BattleShip</h1> </div> ); }}
ReactDOM.render( <BattleShip />, document.getElementById('game'));
![Page 13: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/13.jpg)
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”
![Page 14: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/14.jpg)
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> ); };}
![Page 15: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/15.jpg)
• 5 Ships• Grid• “Square”• War Zone• +1 Main Game• +1 Base Ship
BattleShip - Think Component
![Page 16: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/16.jpg)
B a t t l e Sh i p ex i s t s b ro ,you ma d ?
![Page 17: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/17.jpg)
![Page 18: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/18.jpg)
AVA I L A BL E S OURC E C ODE
https://github.com/sovanna/reacthorhttps://github.com/sovanna/react-game-battleship
![Page 19: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/19.jpg)
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”
![Page 20: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/20.jpg)
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
![Page 21: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/21.jpg)
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
![Page 22: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/22.jpg)
C O M PO N E N T S F LO W
<Zone />
![Page 23: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/23.jpg)
C O M PO N E N T S F LO W
<Zone />
<Grid />
passing props
![Page 24: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/24.jpg)
C O M PO N E N T S F LO W
<Zone />
<Grid />
<Square /><Square /> <Square /> …
passing props
passing propspassing props
![Page 25: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/25.jpg)
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
![Page 26: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/26.jpg)
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()
![Page 27: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/27.jpg)
–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.”
![Page 28: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/28.jpg)
![Page 29: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/29.jpg)
![Page 30: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/30.jpg)
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
![Page 31: ReactJS - Introduction](https://reader036.vdocument.in/reader036/viewer/2022062223/587bd5f61a28ab834d8b5335/html5/thumbnails/31.jpg)
TH AN K YOU