Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React in 45 Minutes (Jfokus)

85 views

Published on

You've heard about React, the user interface library developed by Facebook? And you're wondering how to use it beyond the "Hello, World" stage? Then this talk is for you! Join me in an action-packed session full of live code examples where we'll discover how you can use React to build the hottest web applications while keeping your head cool.

When you leave the room, you'll know enough to build real-world web applications!

Published in: Software
  • Be the first to comment

  • Be the first to like this

React in 45 Minutes (Jfokus)

  1. 1. R 45 M Maarten Mulders (@mthmulders)#reactin45mins
  2. 2. “React is a library for declaratively building user interfaces using JavaScript and (optionally) XML. Maarten Mulders (@mthmulders)#reactin45mins
  3. 3. R No two-way data binding No templating language Just user interface (no routing, no HTTP client) Plain JavaScript (or add JSX, TypeScript, ...) Virtual DOM vs. actual DOM Maarten Mulders (@mthmulders)#reactin45mins
  4. 4. M J S Maarten Mulders (@mthmulders)#reactin45mins
  5. 5. C SEK class Amount {    constructor(currency, value) {        this.currency = currency;        this.value = value;    }    getCurrency() {        return this.currency;    } } const text = new Amount('SEK', 1500).getCurrency(); document.getElementById('app').innerText = text; 1 2 3 4 5 6 7 8 9 10 11 12 13 Maarten Mulders (@mthmulders)#reactin45mins
  6. 6. F true function isEven(number) {     return number % 2 == 0; } const text = isEven(42); document.getElementById('app').innerText = text; 1 2 3 4 5 6 Maarten Mulders (@mthmulders)#reactin45mins
  7. 7. A F true const isEven = (number) => {     return number % 2 == 0; } const isEven2 = (number) => number % 2 == 0 const text = isEven(42); document.getElementById('app').innerText = text; 1 2 3 4 5 6 7 8 Maarten Mulders (@mthmulders)#reactin45mins
  8. 8. O D Jane Doe const person = { name : 'Jane Doe', age: 42, occupancy: 'JavaScript dev' }; const { name, age } = person; const text = name; document.getElementById('app').innerText = text; 1 2 3 4 5 Maarten Mulders (@mthmulders)#reactin45mins
  9. 9. A D 1 const numbers = [ 1, 2 ]; const [ first, second ] = numbers; const text = first; document.getElementById('app').innerText = text; 1 2 3 4 5 Maarten Mulders (@mthmulders)#reactin45mins
  10. 10. O S N {"name":"Jane Doe","age":42} const name = 'Jane Doe'; const age = 42; const person = { name, age }; const text = JSON.stringify(person) document.getElementById('app').innerText = text; 1 2 3 4 5 6 Maarten Mulders (@mthmulders)#reactin45mins
  11. 11. S I SEK 1500 class Amount {    constructor(currency, value) {        this.currency = currency;        this.value = value;    }    toString() {        return `this.currency{this.currency} {this.value}`;    } } const text = new Amount('SEK', 1500).toString(); document.getElementById('app').innerText = text; 1 2 3 4 5 6 7 8 9 10 11 12 13 Maarten Mulders (@mthmulders)#reactin45mins
  12. 12. B JSX Maarten Mulders (@mthmulders)#reactin45mins
  13. 13. W JSX A syntax extension to JavaScript real XML, not a string of characters allows embedded expressions supports attributes Can be nested Automatic XSS prevention Needs to be transpiled to JavaScript e.g. React.createElement(...) Maarten Mulders (@mthmulders)#reactin45mins
  14. 14. E Elements can be regular DOM elements... (for now, but not for long) Hej const element = <div>Hej</div> ReactDOM.render(element, document.getElementById('app')); 1 2 Maarten Mulders (@mthmulders)#reactin45mins
  15. 15. A Elements can have attributes... Hej const element = <div id='example'>Hej</div> ReactDOM.render(element, document.getElementById('app')); 1 2 Maarten Mulders (@mthmulders)#reactin45mins
  16. 16. ... but they can have different names than HTML attributes: Hej const element = <div className='red­text'>Hej</div> ReactDOM.render(element, document.getElementById('app')); 1 2 Maarten Mulders (@mthmulders)#reactin45mins
  17. 17. ... and they can behave differently: Hej const style = { color: 'red', fontWeight: 'bold' }; const element = <div style={ style }>Hej</div> ReactDOM.render(element, document.getElementById('app')); 1 2 3 Maarten Mulders (@mthmulders)#reactin45mins
  18. 18. S R N Values must have a single root node x y const element = <><div>x</div><div>y</div></> ReactDOM.render(element, document.getElementById('app')); 1 2 3 Maarten Mulders (@mthmulders)#reactin45mins
  19. 19. C Function that takes props (think: arguments) and returns a React element. Hej Jfokus! const Greeter = (props) => <div>Hej { props.name }!</div> ReactDOM.render(<Greeter name='Jfokus' />, document.getElementById('app')); 1 2 Maarten Mulders (@mthmulders)#reactin45mins
  20. 20. C Alternatively, using object decomposition: Hej Jfokus! const Greeter = ({ name }) => <div>Hej { name }!</div> ReactDOM.render(<Greeter name='Jfokus' />, document.getElementById('app')); 1 2 Maarten Mulders (@mthmulders)#reactin45mins
  21. 21. A JSX Maarten Mulders (@mthmulders)#reactin45mins
  22. 22. E JSX The answer to the ultimate question of life, universe and everything: 42 const answerToQuestionOfLife = 40 + 2; const askQuestionOfLife = () => answerToQuestionOfLife; const Example = () => <div>    <div>        The answer to the ultimate question of life,        universe and everything:    </div>    <div><strong>{ askQuestionOfLife() }</strong></div> </div>; ReactDOM.render(<Example />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 Maarten Mulders (@mthmulders)#reactin45mins
  23. 23. C JSX Clapping hands... const ClapHands = () => <span>Clapping hands...</span>; const DryTears = () => <span>Drying tears...</span>; const ShowEmotion = ({ isHappy }) => isHappy ? <ClapHands /> : <DryTears />; ReactDOM.render(<ShowEmotion isHappy={ true } />, document.getElementById('app')); 1 2 3 4 5 Maarten Mulders (@mthmulders)#reactin45mins
  24. 24. C JSX (2) ASML HEIA PHIA const Ticker = ({ symbol }) => <div>{ symbol }</div>; const TickerList = ({ symbols }) => symbols.map(   (symbol) => <Ticker symbol={ symbol } /> ); const symbols = ['ASML', 'HEIA', 'PHIA']; ReactDOM.render(<TickerList symbols={ symbols } />, document.getElementById('app')); 1 2 3 4 5 6 7 8 Maarten Mulders (@mthmulders)#reactin45mins
  25. 25. R M Maarten Mulders (@mthmulders)#reactin45mins
  26. 26. A So far, we've written components and wired them together. Babel or tsc transpiles them to React.createElement(...) invocations: <Greeter name={ 'Jfokus' } /** transpiles into React.createElement(Greeter, { name: 'Jfokus' }, null) Maarten Mulders (@mthmulders)#reactin45mins
  27. 27. A The React.createElement invocations form a tree of components. React maintains a virtual DOM based on your component tree. The virtual DOM is compared to the actual DOM. Only necessary changes are executed. Maarten Mulders (@mthmulders)#reactin45mins
  28. 28. R React syncs the virtual and the actual DOM based on two assumptions: 1. If two elements are of different type, the (sub) tree will be different. 2. The key prop identifies child elements over re-renders. Maarten Mulders (@mthmulders)#reactin45mins
  29. 29. 1 E Hej, Jfokus const SwedishGreeter = ({ name }) => <div>Hej, { name }  </div> const DutchGreeter = ({ name }) => <div>Hallo, { name }  </div>; const EnglishGreeter = ({ name }) => <div>Hello, { name }  </div>; const App = ({ lang, name }) => {  switch(lang) {    case 'se': return <SwedishGreeter name={ name } />    case 'nl': return <DutchGreeter name={ name } />    case 'en':    default  : return <EnglishGreeter name={ name } />  } }; ReactDOM.render(<App name='Jfokus' lang='se' />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Maarten Mulders (@mthmulders)#reactin45mins
  30. 30. 2 T KEY ASML HEIA PHIA const Ticker = ({ symbol }) => <div>{ symbol }</div>; const TickerList = ({ symbols }) => symbols.map(   (symbol) => <Ticker key={ symbol } symbol={ symbol } /> ); const symbols = ['ASML', 'HEIA', 'PHIA']; ReactDOM.render(<TickerList symbols={ symbols } />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 Maarten Mulders (@mthmulders)#reactin45mins
  31. 31. Y E 1. Keeping state 2. Reacting to events 3. Fetching data over HTTP 4. Storing data Maarten Mulders (@mthmulders)#reactin45mins
  32. 32. L S C Counter: 0 const Counter = () => {     const [ counter, setCounter ] = React.useState(0);     return <div>Counter: { counter }</div> } ReactDOM.render(<Counter />, document.getElementById('app')); 1 2 3 4 5 6 7 Maarten Mulders (@mthmulders)#reactin45mins
  33. 33. R E Similar to DOM event handling, but 1. event names are different: onClick vs onclick. 2. event handlers are always functions, never strings. 3. event handlers are bound to a component, should not live globally. 4. event handlers receive an synthetic event - browser-agnostic! Maarten Mulders (@mthmulders)#reactin45mins
  34. 34. C C Counter: 0 +   ‑ const Counter = () => {    const [ counter, setCounter ] = React.useState(0);    const increate = () => setCounter(counter + 1);    const decreate = () => setCounter(counter ­ 1);    return <div>Counter: { counter }<br />                <button onClick={ increate }>   +   </button> &nbsp;                <button onClick={ decreate }>   ­   </button>           </div> } ReactDOM.render(<Counter />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 12 Maarten Mulders (@mthmulders)#reactin45mins
  35. 35. C C Greet! const Greeter = () => {    const [ name, setName ] = React.useState('');    const updateName = (e) => setName(e.target.value);    const callback = () => alert(`Hej ${name}!`);    return <div><input type='text' onChange={ updateName } ></input><br />                <button onClick={ callback }>Greet { name }!</button></div> } ReactDOM.render(<Greeter />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 Maarten Mulders (@mthmulders)#reactin45mins
  36. 36. F HTTP What we need: 1. A bit of JavaScript to fetch some data 2. A component to show the fetched data Maarten Mulders (@mthmulders)#reactin45mins
  37. 37. 1 A API const checkStatus = (response) { if (response.status 200 response.status < 300) { return Promise.resolve(response); } else { return Promise.reject(`HTTP error ${response.status}: ${response.statusText}`); } }; const parseJson = (response) response.json(); const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci.customer oci.com' + '/v1/joke'; const getJoke = () { return fetch(url) .then(checkStatus) .then(parseJson) .then(response response.joke); }; Maarten Mulders (@mthmulders)#reactin45mins
  38. 38. 2 A My sweater had a lot of static electricity. The store gave me a new one, free of charge. const RandomJoke = () => {    const [ { joke, loading }, setState ] = React.useState({ loading: true });    const fetchRandomJoke = async () => {        // Does the actual API call to Oracle Cloud function,        // see code on previous slide.        const joke = await getJoke();        setState({ loading: false, joke });    }    React.useEffect(() => {        fetchRandomJoke()    }, [ ]);    if (loading) return <div>Loading...</div>    return <div>{ joke }</div>; }; ReactDOM.render(<RandomJoke />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Maarten Mulders (@mthmulders)#reactin45mins
  39. 39. S Local Storage & Session Storage Part of the Stores and retrieves string values Serialise objects with JSON.stringify() Deserialise with JSON.parse() Persistent during browser session with sessionStorage over browser shutdowns with localStorage Web Storage API Maarten Mulders (@mthmulders)#reactin45mins
  40. 40. D A 1. Debugging 2. Testing 3. Building Maarten Mulders (@mthmulders)#reactin45mins
  41. 41. D Install the React Developer Tools for your browser of choice. Maarten Mulders (@mthmulders)#reactin45mins
  42. 42. I C T Maarten Mulders (@mthmulders)#reactin45mins
  43. 43. D Maarten Mulders (@mthmulders)#reactin45mins
  44. 44. T Use Jest (testing platform & library) and Enzyme, a testing utility for React Render a React component in a unit test Make assertions about its output and behaviour Maarten Mulders (@mthmulders)#reactin45mins
  45. 45. T C import { shallow } from 'enzyme'; describe('<HelloMessage ', () { it('should render text', () { const wrapper = shallow(<HelloMessage name='React' ); expect(wrapper.text()).toBe('Hello React'); }); }); Maarten Mulders (@mthmulders)#reactin45mins
  46. 46. T B C import { shallow } from 'enzyme'; const dummy = create a mock/stub of some API using framework of choice describe('<AwesomeButton ', () { it('should invoke action on click', () { const wrapper = mount(<AwesomeButton action={ dummy } ); wrapper.f nd('a').simulate('click'); expect(dummy).toHaveBeenCalled(); }); }); Maarten Mulders (@mthmulders)#reactin45mins
  47. 47. D S tl;dr: use (CRA) Uses Webpack, Babel, ESLint and a dozen of other tools Tested to work together Live-reloading of changed code Source maps for easy debugging Have an ready-to-go app in one command Create React App npx create react app my next killer app or npm i g create react app create react app my next killer app Maarten Mulders (@mthmulders)#reactin45mins
  48. 48. U CRA npm run start to start developing npm run build to create a production build npm run test to run unit tests Maarten Mulders (@mthmulders)#reactin45mins
  49. 49. G B Maarten Mulders (@mthmulders)#reactin45mins
  50. 50. T R (C ) H 1. Name must start with use! 2. Only use in React function components not in classes not outside React components Maarten Mulders (@mthmulders)#reactin45mins
  51. 51. C H What's the fastest growing city on earth? The capital of Ireland, it's Dublin every day. const useRandomJoke = () => {    const [ { joke, loading }, setState ] = React.useState({ loading: true });    const fetchRandomJoke = async () => {        const joke = await getJoke();        setState({ loading: false, joke });    }    React.useEffect(() => { fetchRandomJoke() }, [ ]);    return { loading, joke }; }; const JokeDisplay = ({  }) => {    const { joke, loading } = useRandomJoke()    if (loading) return <div>Loading...</div>;    return <div>{ joke }</div>; } ReactDOM.render(<JokeDisplay />, document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Maarten Mulders (@mthmulders)#reactin45mins
  52. 52. T Use Create React App Think in (small) components Think declaratively Please rate this talk using the Jfokus app! U Create React App: Dad Jokes API: https://bit.ly/c-r-a https://bit.ly/dad-joke-api Maarten Mulders (@mthmulders)#reactin45mins

×