Getting Started with ReactJs & Ecosystem

Transcript

1. Getting Started with ReactJS & Ecosystem Sastra Nababan
2. So.. What is React ?
3. Javascript UI Framework Library 0QFO
   4PVSDF
   JO
   
   #Z
4. and…. • Declarative • Modular • Component Based • One-way data flow • Virtual DOM • Learn Once, Write Anywhere
5. Who use ReactJS ? • Facebook • Instagram • NetFlix • Khan Academy • Twitter • Hootsite • Yahoo • wordpress.com • and over 1000 company, app, agencies…..
 
 IUUQTHJUIVCDPNGBDFCPPLSFBDUXJLJTJUFTVTJOHSFBDU
6. We need to go 5 or 10 years back to understand the fear of developing in JavaScript.
7. Lets review 
 Web App Architecture
8. Static / Classic Web application is mainly executed on the server side.
9. Application more dynamic, Most concern on Server side programming Dynamic Web App
10. Application more responsive by reducing exchanges between browser and server Dynamic Web App + Ajax
11. Now the server sends only raw unformatted data and the client is responsible for generating the screen out of it. Client Side MVC*
12. 2017 What Next … ?
13. Heterogeneous clients with the same back-end code Modern Architecture
14. Back to React
15. Before you learn react make sure you familiar with : Intermediate Javascript :
 Closures, Callbacks, this, map,filter,reduce,object ES6 :
 • object literal and template strings • Block scopes and let/const vs var • Arrow functions • Destructuring and default/rest/spread. • Classes and inheritance • Imports and exports of modules
16. Component Based *O
    3FBDU
    FWFSZUIJOH
    JT
    DPNQPOFOU
23. 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF
24. FriendList 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF
25. FriendList FriendListItem 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF
26. FriendList FriendListItem FriendInfo 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF
27. FriendList FriendListItem FriendInfo Search 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF
28. 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF <FriendList> <FriendListItem/> <FriendInfo/> </FriendListItem> <Search/>
29. 'SJFOE
    -JTU
    $PNQPOFOU
    &YBNQMF <FriendList> <FriendListItem/> <FriendInfo/> </FriendListItem> <Search/>
30. UI = f(x) f = component x = prop or state
31. function MyComponent(props){ return (<div> <p>This is my Component </p></div>) } ReactDOM.render( <MyComponent/>,container) How to Create Component Now you can render it It’s Just a simple function
32. function MyComponent(props){ return (<div> <p>This is my Component called : {props.name} </p>
 </div>) ReactDOM.render( <MyComponent name=“bodat”/>,container) How to Create Component It’s Just a simple function Now you can render it
33. function MyComponent(props){ return (<div> <p OnClick={props.onAction}>This is my Component called : {props.name} </p></div>) var myAction=function(){
 alert(“Oh I’m clicked”)
 } ReactDOM.render( <MyComponent name=“bodat” onAction={myAction}
 How to Create Component It’s Just a simple function Now you can render it
34. class MyComponent extends React.Component{ constructor(props){ super(props) } render(){ return (<div> <p onClick={this.props.clickAction}> This is my Component called :{this.props.name} </p> </div>) var myAction=function(){
 alert(“Oh I’m clicked”)
 } ReactDOM.render( <MyComponent name=“bodat” clickAction={myAction}
 How to Create Component Class Component Now you can render it
35. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); Composing Component Parent - Child Component
36. What about State ? Prop is read-only 
 Use State to update component or dynamic change
37. Login Status <header>
 <div class=“name”> Not Logged in </div>
 </header> $.post(‘/login’,credential,function(user){ // modify the DOM here
 $(‘header . name”).text(user.name) }
 html jquery
38. class Button extends React.Component{ constructor(props){ super(props); this.state={clicks : 0} this.count=this.count.bind(this); } count(){ this.setState({ clicks : this.state.clicks + 1 }); } render(){ return (<div> <button onClick={this.count}> {this.props.caption}</ button> <p> Button Clicked : {this.state.clicks} times </p> </div>) } } Button Counter Example
39. render(){ return (<header> {this.state.name ? this.state.name : <span> Not Logged in </span> </header> } Login Status <header>
 <div class=“name”> Not Logged in </div>
 </header> html react
40. Component LifeCycle
41. class FetchDemo extends React.Component { constructor(props) { super(props); this.state = { posts: [] }; } componentDidMount() { axios.get(this.props.url) .then(res => { const posts = res.data.data.children.map(obj => obj.data); this.setState({ posts }); }); } render(){ <div> {this.props.posts} </div> } } ReactDOM.render( <FetchAjax url=“http://yourwebsite/endpoint"/>, document.getElementById('root') ); Fetch Data with ajax
42. render() { return ( <div> <h1>{`/r/${this.props.subreddit}`}</h1> <ul> {this.state.posts.map(post => <li key={post.id}>{post.title}</li> )} </ul> </div> ); } } ReactDOM.render( <FetchDemo subreddit="reactjs"/>, document.getElementById('root') ); Fetch Data with ajax
43. Virtual DOM Real DOM
44. React Ecosystem
46. Thank You Mauliate