React in 40 minutes (JCON)

R    40 M
Maarten Mulders (@mthmulders)
#reactin40mins

“React is a library for declaratively
building user interfaces using
JavaScript and (optionally) XML.
#reactin40mins

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
#reactin40mins

M  J S
#reactin40mins

C
EUR
class Amount {
    constructor(currency, value) {
        this.currency = currency;
        this.value = value;
    }
    getCurrency() {
        return this.currency;
    }
}
const text = new Amount('EUR', 15).getCurrency();
document.getElementById('app').innerText = text;
1
2
3
4
5
6
7
8
9
10
11
12
13
#reactin40mins

F
true
function isEven(number) {
   return number % 2 == 0;
}
const text = isEven(42);
1
2
3
4
5
6
#reactin40mins

A  F
false
const isEven = (number) => {
   return number % 2 == 0;
}
const text = isEven(43);
1
2
3
4
5
6
#reactin40mins

O  D
Jane Doe
const person = { name : 'Jane Doe', age: 42, occupancy: 'JavaScript dev' };
const { name, age } = person;
const text = name;
1
2
3
4
5
#reactin40mins

A  D
two
const numbers = [ 'one', 'two', 'three' ];
const [ first, second ] = numbers;
const text = second;
1
2
3
4
5
#reactin40mins

O  S  N
42
const name = 'Jane Doe';
const age = 42;
const person = { name, age };
const text = age;
1
2
3
4
5
6
#reactin40mins

S  I
EUR 150
class Amount {
    constructor(currency, value) {
        this.currency = currency;
        this.value = value;
    }
    toString() {
        return `this.currency{this.currency} {this.value}`;
    }
}
const text = new Amount('EUR', 150).toString();
1
2
3
4
5
6
7
8
9
10
11
12
13
#reactin40mins

B  JSX
#reactin40mins

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
But it has its limitations
Needs to be transpiled to JavaScript
e.g. React.createElement(...)
#reactin40mins

E
Elements can be regular DOM elements... (for now, but not for long)
Hi!
const element = <div>Hi!</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
#reactin40mins

A
Elements can have attributes, but they can have different
names than HTML attributes:
Hi!
const element = <div className='redtext'>Hi!</div>
1
2
#reactin40mins

... and they can behave differently:
Hi!
const style = { color: 'red', fontWeight: 'bold' };
const element = <div style={ style }>Hi!</div>
1
2
3
#reactin40mins

S  R  N
Values must have a single root node (or an array)
x
y
const element = <><div>x</div><div>y</div></>
1
2
3
#reactin40mins

C
Function that takes props (think: arguments) and returns a
React element.
Hello, world!
const Greeter = (props) => <div>Hello, world!</div>
ReactDOM.render(<Greeter />, document.getElementById('app'));
1
2
#reactin40mins

A  JSX
#reactin40mins

E    JSX
The answer to the ultimate question of life, universe and
everything:  42
const answerToQuestionOfLife = 40 + 2;
const askQuestionOfLife = () => answerToQuestionOfLife;
const Example = () => <div>
    The answer to the ultimate question of life,
    universe and everything:
    &nbsp;
    <strong>{ askQuestionOfLife() }</strong>
</div>;
ReactDOM.render(<Example />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
#reactin40mins

O        / 
Hello JCON!
const Greeter = (props) => <div>Hello { props.name }!</div>
ReactDOM.render(<Greeter name='JCON' />, document.getElementById('app'));
1
2
#reactin40mins

O        / 
Alternatively, using object decomposition:
Hello JCON!
const Greeter = ({ name }) => <div>Hello { name }!</div>
ReactDOM.render(<Greeter name='JCON' />, document.getElementById('app'));
1
2
#reactin40mins

C      JSX
Clapping hands...
const ClapHands = () => <span>Clapping hands...</span>;
const DryTears = () => <span>Drying tears...</span>;
const ShowEmotion = ({ happy }) => happy ? <ClapHands /> : <DryTears />;
ReactDOM.render(<ShowEmotion happy={ true } />,
 document.getElementById('app'));
1
2
3
4
5
6
7
#reactin40mins

C      JSX (2)
HEIA
PHIA
const Ticker = ({ symbol }) => <div>{ symbol }</div>;
const TickerList = ({ symbols }) => symbols.map(
 (symbol) => <Ticker symbol={ symbol } />
);
const symbols = ['HEIA', 'PHIA'];
ReactDOM.render(<TickerList symbols={ symbols } />,
1
2
3
4
5
6
7
8
9
#reactin40mins

R   M
#reactin40mins

A    
So far, we've written components and wired them together.
Babel or tsc transpiles them to React.createElement(...)
invocations:
<Greeter name={ 'World' }   
 
/** transpiles into   
 
React.createElement(Greeter, { name: 'World' }, null) 
#reactin40mins

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.
#reactin40mins

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 identiﬁes child elements over re-renders. This
tells React what makes two elements "the same".
#reactin40mins

1  E      
 Hallo, JCON!
const DutchGreeter = ({ name }) => <div>  Hallo, { name }!</div>;
const EnglishGreeter = ({ name }) => <div>  Hello, { name }!</div>;
const GermanGreeter = ({ name }) => <div>  Hallo, { name }!</div>;
const App = ({ lang, name }) => {
  switch(lang) {
    case 'de': return <GermanGreeter name={ name } />
    case 'nl': return <DutchGreeter name={ name } />
    case 'en':
    default  : return <EnglishGreeter name={ name } />
  }
};
ReactDOM.render(<App name='JCON' lang='nl' />,
  document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
13
#reactin40mins

2  T  KEY 

const randomPrice = () => 100 + Math.floor(Math.random() * 900)
const Ticker = ({ symbol }) => <span>{ symbol }: { randomPrice() } &mdash; </spa
const symbols = ['HEIA', 'PHIA', 'ASML', 'KLMR'].map(
 (symbol) => <Ticker key={ key } symbol={ symbol } />
);
ReactDOM.render(<Shuffle children={ symbols } />,
1
2
3
4
5
6
7
8
9
#reactin40mins

Y  E
1. Keeping state
2. Reacting to events
3. Fetching data over HTTP
4. Storing data
#reactin40mins

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
#reactin40mins

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!
#reactin40mins

C  C
Counter: 0 
+   ‑
const Counter = () => {
    const [ counter, setCounter ] = React.useState(0);
    const increase = () => setCounter(counter + 1);
    const decrease = () => setCounter(counter  1);
    return <div>Counter: { counter }<br />
                <button onClick={ increase }>   +   </button> &nbsp;
                <button onClick={ decrease }>      </button>
           </div>
}
ReactDOM.render(<Counter />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
#reactin40mins

C  C
 
Greet!
const Greeter = () => {
    const [ name, setName ] = React.useState('');
    const updateName = (e) => setName(e.target.value);
    const callback = () => alert(`Hi ${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
#reactin40mins

F      HTTP
What we need:
1. A bit of Plain Old JavaScript to fetch some data
2. A component to show the fetched data
#reactin40mins

1  A     API
 
 
 
 
 
 
 
 
 
 
const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci 
             .customer oci.com/v1/joke'; 
const getJoke = ()   { 
    return fetch(url); 
 
 
 
}; 
#reactin40mins

1  A     API
const checkStatus = (response)   { 
    if (response.status   200   response.status < 300) { 
        return Promise.resolve(response); 
    } else { 
        return Promise.reject(`HTTP ${response.status}: ${response.statusText}`); 
    } 
}; 
 
 
 
    return fetch(url) 
                .then(checkStatus); 
 
 
}; 
#reactin40mins

1  A     API
    } else { 
    } 
}; 
 
const parseJson = (response)   response.json(); 
 
                .then(checkStatus) 
                .then(parseJson); 
 
}; 
#reactin40mins

1  A     API
    } else { 
    } 
}; 
 
const parseJson = (response)   response.json(); 
 
                .then(checkStatus) 
                .then(parseJson) 
                .then(response   response.joke); 
}; 
#reactin40mins

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 before.
        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
#reactin40mins

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
#reactin40mins

D  A
1. Debugging
2. Testing
3. Building
#reactin40mins

D
Install the React Developer Tools for your browser of choice.
#reactin40mins

I  C  T
#reactin40mins

D
#reactin40mins

T    
Use Jest (test platform & library) and (React) Testing Library
(testing utilities)
Render a React component in a unit test
Make assertions about its output and behaviour
#reactin40mins

T      C
import { render, screen } from '@testing library/react' 
 
describe('<Greeter  ', ()   { 
    it('should render text', ()   { 
        render(<Greeter name='JCON'  ); 
        expect(screen.getByText(/hello, jcon/i)).toBeVisible(); 
    }); 
}); 
#reactin40mins

T  B      C
import { f reEvent, render, screen } from '@testing library/react' 
 
describe('<AwesomeButton  ', ()   { 
    it('should invoke action on click', ()   { 
        const callback = jest.mock(); 
        render(<AwesomeButton action={ callback }  ); 
        f reEvent.click(screen.getByRole('link')); 
        expect(dummy).toHaveBeenCalled(); 
    }); 
}); 
#reactin40mins

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 
#reactin40mins

U  CRA
npm run start to start developing
npm run build to create a production build
npm run test to run unit tests
#reactin40mins

T  
Use Create React App
Think in (small) components
Think declaratively
U  
Create React App: 
Dad Jokes API: 
Philippe De Ryck on "Building Secure React Applications":
https://bit.ly/c-r-a
https://bit.ly/dad-joke-api
http://bit.ly/secure-react
#reactin40mins

React in 40 minutes (JCON)

React in 40 minutes (JCON)

Recommended

More Related Content

Similar to React in 40 minutes (JCON)

Similar to React in 40 minutes (JCON) (20)

More from Maarten Mulders

More from Maarten Mulders(20)

Recently uploaded

Recently uploaded(20)

React in 40 minutes (JCON)