Tweet
Tweet

Slide 1

Slide 1 text

Building
 Modern React Applications @glnnrys

Slide 2

Slide 2 text

Glenn Reyes @glnnrys

Slide 3

Slide 3 text

Why do we love building applications?

Slide 4

Slide 4 text

Why do we love building modern applications?

Slide 5

Slide 5 text

It's exciting

Slide 6

Slide 6 text

✨ It's new

Slide 7

Slide 7 text

✨ It's new for a reason

Slide 8

Slide 8 text

Modern apps lets us
 step out of the comfort zone

Slide 9

Slide 9 text

Modern apps lets us
 keep moving forward

Slide 10

Slide 10 text

Modern apps lets us
 be creative

Slide 11

Slide 11 text

What is modern?

Slide 12

Slide 12 text

Darrin Alfred In its simplest form, the term modern implies the
 up-to-date, a current development, or a spirit in step with its own time.

Slide 13

Slide 13 text

Bleeding edge

Slide 14

Slide 14 text

On the web ...

Slide 15

Slide 15 text

On the web
 there's new libraries every day

Slide 16

Slide 16 text

Anything that came out yesterday
 is not modern anymore

Slide 17

Slide 17 text

React

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Google Trends

Slide 20

Slide 20 text

State of JS 2018

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Don't reinvent the wheel
 No need to set up and configure from scratch

Slide 23

Slide 23 text

Create React App

Slide 24

Slide 24 text

Create React App % Easy to use Flexibility Ecosystem

Slide 25

Slide 25 text

Gatsby

Slide 26

Slide 26 text

Gatsby Blogs ⚡ Static sites Ecosystem

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Server rendering Dynamic routing Zero-config

Slide 29

Slide 29 text

Others are fine too!
 Use what works best for you

Slide 30

Slide 30 text

Why?

Slide 31

Slide 31 text

Community Support ❤

Slide 32

Slide 32 text

Powerful

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

People love solving problems

Slide 35

Slide 35 text

How are problems solved in React today?

Slide 36

Slide 36 text

State management

Slide 37

Slide 37 text

State management

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Just React

Slide 40

Slide 40 text

Kent C. Dodds React is a state management library.

Slide 41

Slide 41 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (
); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); }

Slide 42

Slide 42 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (
); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const ThemeContext = React.createContext('light');

Slide 43

Slide 43 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (
); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const App = () => ( );

Slide 44

Slide 44 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (
); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); }

Slide 45

Slide 45 text

... ... ... ... ...

Slide 46

Slide 46 text

... ... ... ... ...

Slide 47

Slide 47 text

Context state doesn't need to be globally accessible

Slide 48

Slide 48 text

Put Context state as close as needed

Slide 49

Slide 49 text

What's new in React?

Slide 50

Slide 50 text

Hooks

Slide 51

Slide 51 text

import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return (

You clicked {count} times

setCount(count + 1)}> Click me
); }

Slide 52

Slide 52 text

Function components No more stateless components

Slide 53

Slide 53 text

Class components No more stateful components

Slide 54

Slide 54 text

Class components still a thing?

Slide 55

Slide 55 text

Use hooks for new components If the team is fine with it

Slide 56

Slide 56 text

Use hooks for new components If the team is fine with it Keep existing class components Rewrite them into hooks if it makes life easier

Slide 57

Slide 57 text

Suspense

Slide 58

Slide 58 text

Suspense lets components wait for something before rendering

Slide 59

Slide 59 text

Suspend the render until new data is loaded from external sources

Slide 60

Slide 60 text

const HeavyComponent = React.lazy(() => import('./HeavyComponent')); const App = () => ( }>
);

Slide 61

Slide 61 text

Other new React features

Slide 62

Slide 62 text

Other new React features Fragments Error Boundaries React.memo() React.createPortal() DevTools Profiler API

Slide 63

Slide 63 text

Patterns

Slide 64

Slide 64 text

const EnhancedComponent = higherOrderComponent(WrappedComponent); Higher Order Component

Slide 65

Slide 65 text

(

Hello {data.target}

)}/> Render Props

Slide 66

Slide 66 text

import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return (

You clicked {count} times

setCount(count + 1)}> Click me
); } Hooks

Slide 67

Slide 67 text

How do we fetch data in React?

Slide 68

Slide 68 text

class App extends React.Component { constructor(props) { super(props); this.state = { data: null, error: null, loading: false, }; } componentDidMount() { this.setState({ loading: true }); fetch('https://api.fromsomewhere.com') .then(response => response.json()) .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } // ... }

Slide 69

Slide 69 text

function App() { const [data, setState] = useState({ data: null, error: null, loading: false }); useEffect(() => { setState({ loading: true }); fetch('https://api.fromsomewhere.com') .then(response => response.json()) .then(data => setState({ data, loading: false })) .catch(error => setState({ error, loading: false })); }, []); // ... }

Slide 70

Slide 70 text

Data fetching with Suspense is coming

Slide 71

Slide 71 text

Systems

Slide 72

Slide 72 text

Type systems

Slide 73

Slide 73 text

Why would I need a type system?

Slide 74

Slide 74 text

Why would I need a type system? Confidence Auto suggestions No more prop types

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Design systems

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

Scales & Theming constraints

Slide 80

Slide 80 text

// example theme.js export default { breakpoints: ['40em', '52em', '64em'], fontSizes: [ 12, 14, 16, 20, 24, 32, 48, 64 ], colors: { blue: '#07c', lightgray: '#f6f6ff' }, space: [ 0, 4, 8, 16, 32, 64, 128, 256 ], fonts: { body: 'system-ui, sans-serif', heading: 'inherit', monospace: 'Menlo, monospace', }, fontWeights: { body: 400, heading: 700, }, buttons: { primary: { color: 'white', bg: 'primary', } } } Beep Boop

Slide 81

Slide 81 text

How do we architect modern React applications
 using a type system and a design system?

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

How much value will _____ bring?

Slide 84

Slide 84 text

How much time will we save by adding _____ ?

Slide 85

Slide 85 text

Always start simple

Slide 86

Slide 86 text

No one will care about your folder structure

Slide 87

Slide 87 text

Is modern the best?

Slide 88

Slide 88 text

Rarely.

Slide 89

Slide 89 text

There's a reason why new things keep coming out

Slide 90

Slide 90 text

Keep good practices that worked in the past

Slide 91

Slide 91 text

You don't have to use it because it's new

Slide 92

Slide 92 text

Don't let new things intimidate you

Slide 93

Slide 93 text

Write the best code possible

Slide 94

Slide 94 text

Keep using what you know best

Slide 95

Slide 95 text

Never stop
 learning

Slide 96

Slide 96 text

Never stop
 learning new things

Slide 97

Slide 97 text

Thank you @glnnrys · glennreyes.com