Introduction to ReactJS

React is a front-end library developed by Facebook. It's used for handling the view layer for Website, Native Mobile Apps and VR. ReactJS allows you to create reusable UI components. It is currently one of the most popular JavaScript libraries out there. With a strong foundation and a large community behind it.

This talk will discuss what is ReactJS. How and where you can use it. Followed by a workshop, where we will learn, how to build a component-based web-app using ReactJS.

For workshop code, notes and resources, see: https://github.com/usmanbashir/introduction-to-reactjs/

Transcript

1. A JavaScript library for building user interfaces Introduction to React
2. WHOAMI? • me@ usmanbashir.com • @ ubax • usmanbashir.com Who am I? Technology Consultant & Software Developer
3. What is React?
4. One React To Rule Them All
5. ReactJS React Native React VR
6. Learn Once, Write Anywhere
8. Prerequisites
9. ES6 arrow functions classes let const template literals
10. What does React brings to the table?
11. Components Virtual DOM Props & State
12. Imperative vs. Declarative
13. Example 1
14. funtion submitForm() { // … var submitButton = $(‘button-id’); if (isFormValid === false) { submitButton.prop('disabled', true) .addClass('disabled'); } else { submitButton.prop('disabled', false) .removeClass('disabled'); } // … } Imperative (the old way)
15. Declarative (the new way) <SubmitButton disabled={this.state.isFormValid} />
16. Example 2
18. if (userLikes()) { if (!hasBlueLike()) { removeGrayLike(); addBlueLike(); } } else { if (hasBlueLike()) { removeBlueLike(); addGrayLike(); } } Imperative (the old way)
19. Declarative (the new way) if (this.state.liked) { return (<BlueLike/>); } else { return (<GrayLike/>); }
20. UI = RENDER(state)
21. Components
22. Declarative Components
23. <Button />
24. class Button extends React.Component { render() { return <input type=“button” value=“I'm a button!” />; } }
25. class Button extends React.Component { render() { return <input type=“button” value=“I'm a button!” />; } }
26. class Button extends React.Component { render() { return <input type=“button” value=“I'm a button!” />; } }
27. Composed Components
28. <PlainMenu> <Button /> <Button /> <Button /> <Button /> <PlainMenu />
29. <Header> <Logo /> <Title /> <PlainMenu /> <Header/>
30. <Header> <Logo /> <Title /> <PlainMenu /> <Header/>
31. Reusable Components
32. <App> <Header /> <SearchBar /> <BlogPost /> <Footer> <Copyright /> <PlainMenu /> <Footer /> <App />
33. <App> <Header /> <SearchBar /> <BlogPost /> <Footer> <Copyright /> <PlainMenu /> <Footer /> <App />
34. UI composed of <components />
35. Fast Rendering With Virtual DOM
36. <h1>Before<h1/> Virtual DOM Before <h1>After<h1/> Virtual DOM After React Virtual DOM
37. PATCH … Set <h1> to After … Batch of DOM operations React Virtual DOM
38. <h1>Before<h1/> Real DOM Before <h1>After<h1/> Real DOM After Browser DOM Apply
39. Data Flow Props
40. this.props
41. <Welcome name=‘Edward Elric’ />
42. class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; } }
43. class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; } }
44. Pure Functions
45. Data Flow State
46. this.state
47. Imperative vs. Declarative After Credits
48. Declarative (the new way) <SubmitButton disabled={this.state.isFormValid} />
49. class SubmitButton extends React.Component { render() { const classes = `button submit ${this.props.disabled ? “disabled” : “”}`; return <input type='button‘ value='Submit‘ disabled={this.props.disabled} className={classes} />; } }
50. class SubmitButton extends React.Component { render() { const classes = `button submit ${this.props.disabled ? “disabled” : “”}`; return <input type='button‘ value='Submit‘ disabled={this.props.disabled} className={classes} />; } }
51. const classes = `button submit ${this.props.disabled ? “disabled” : “”}` Template literal
52. Developer Tools
53. Create React App
54. React Developer Tools
56. Usman Bashir Developer Circle Lead Workshop
57. So... • Notes & Resources • Learn more • Build something • Share it with the community What's Next?
58. Thank You