151 Pokemon in the Pokedex left!
Name
Type
Likes
Display
...
...
10
...
...
8
...
...
7
...
...
7
...
...
7
...
...
5
...
...
2
...
...
2
Display
Display
Display
Display
Display
Display
Display
Display
Id
...
...
...
...
...
...
...
...
Pikachu
If you wave its tail, it will try to bite you
Delete
Like
Instructions
import React, { PureComponent } from "react";
class PokeCounter extends PureComponent {
render() {
return <h1>Hello World</h1>;
}
}
export default PokeCounter;
import React from "react";
const PokeCounter = () => {
return <h1>Hello World</h1>;
}
export default PokeCounter;
When the parent pokeCounters is re-rendered, a normal child component will also be re-rendered but not the pureComponent
PureComponent
Component
// Link.react.test.js
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';
test('Link changes the class when hovered', () => {
const component = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
// __tests__/__snapshots__/Link.react.test.js.snap
exports[`Link changes the class when hovered 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}>
Facebook
</a>
`;
exports[`Link changes the class when hovered 2`] = `
<a
className="hovered"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}>
Facebook
</a>
`;
exports[`Link changes the class when hovered 3`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}>
Facebook
</a>
`;
App
Native app
+ very efficient
+ access to all device functionalities
+ great UX
- maintain 1app/OS
App
OS
OS
Browser
Web app
+ cross-platform
- less access to device functionalities
- need to be online
App
OS
Web view
Hybrid app
+ cross-platform
- efficiency
const App = () =>
<div>Hello World</div>
React
DOM element
const App = () =>
<View>Hello World</View>
React Native
UIView
(iOS)
android.view
App
TotalBar
PokeCounters
PokeCounter
counters[]
State management can be complex!
Store
View
Action
Dispatcher
Render your app on the server and send it to the client
The client will then take over and your application can operate as normal
Ideal for SEO and also increase performances
The Most popular React Framework is Next JS