React Native

ПЛАН
1. Что такое React Native?
2. История React Native
3. React по сравнению с React Native
4. Что такое кросс-платформенная разработка?
5. Как работает React Native?
6. React Dev Tools
7. Virtual DOM
8. Альтернативы

Компоненты
JSX
CRA

Create React App
$ npx create-react-app myapp --use-npm
$ cd myapp/
$ npm start

Компонент
// Pokemon.js
function Pokemon() {
return 'some pokemon';
}
export default Pokemon;
// App.js
import React from 'react';
import Pokemon from './Pokemon';
function App() {
return (
);
}
export default App;

JSX
// Pokemon.js
import React from 'react';
function Pokemon() {
return (
<>
Slowpoke
Вес:
360 гектограмм
src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/79.png"
alt="Slowpoke"
/>
);
}
export default Pokemon;

Props

Props
// Pokemon.js
import React from 'react';
function Pokemon({ name, weight, img }) {
return (
<>
{name}
Вес:
{' '}
{weight}
{' '}
гектограмм
);
}
export default Pokemon;
// App.js
import React from 'react';
import Pokemon from './Pokemon';
function App() {
return (
name="Slowpoke"
weight={360}
img="https://bit.ly/2LkFfgI"
/>
);
}
export default App;

map
&&
?:

map, key
// App.js
import React from 'react';
import Pokemon from './Pokemon';
function App() {
const pokemons = [
{ name: 'Slowpoke', weight: 360, img: 'https://bit.ly/2LkFfgI' },
{ name: 'Pikachu', weight: 60, img: 'https://bit.ly/3co9xem' },
{ name: 'Psyduck', weight: 196, img: 'https://bit.ly/2Wldz1g' },
];
return (
{pokemons.map(({ name, weight, img }) => (
key={name}
name={name}
weight={weight}
img={img}
/>
))}
);
}
export default App;

&&
// Pokemon.js
import React from 'react';
function Pokemon({ name, weight = false, img }) {
return (
<>
{name}
{
weight
&& (
Вес:
{' '}
{weight}
{' '}
гектограмм
)
}
);
}
export default Pokemon;

?:
// Pokemon.js
import React from 'react';
function Pokemon({ name, weight = false, img }) {
return (
<>
{name}
{
weight
? (
Вес:
{' '}
{weight}
{' '}
гектограмм
)
:
Вес не определён
}
);
}
export default Pokemon;

useState

useState (+functional updates)
// Pokemon.js
import React, { useState } from 'react';
const weightStep = 50;
function Pokemon({ name, weight, img }) {
const [
currentWeight,
setCurrentWeight,
] = useState(weight);
function addWeight() {
setCurrentWeight((x) => x + weightStep);
}
function removeWeight() {
setCurrentWeight((x) => x - weightStep);
}
return (
<>
{name}
Вес:
{' '}
{currentWeight}
{' '}
гектограмм
Потолстеть
Похудеть
width={96 * (currentWeight / weight)}
src={img}
alt={name}
style={{ display: 'block' }}
/>
);
}
export default Pokemon;

useEffect

useEffect
// App.js
import React, { useState, useEffect } from 'react';
function App() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timer = setTimeout(() => setDate(new Date()), 1000);
return () => clearTimeout(timer);
}, [date]);
return (
{date.toLocaleString()}
);
}
export default App;

useEffect (practical example)
// App.js
import React from 'react';
import PokemonList from './PokemonList';
function App() { return (
);
}
export default App;
// lib/fetch-all.js
export default async (urls, options) => {
const responses = await Promise.all(
urls.map((url) => fetch(
url,
options,
)),
);
return Promise.all(
responses.map((response) => response.json()),
);
};
// PokemonList.js
import React, { useState, useEffect } from 'react';
import fetchAll from './lib/fetch-all';
import Pokemon from './Pokemon';
function PokemonList({ pokemons }) {
const [pokemonsData, setPokemonsData] = useState([]);
useEffect(() => {
(async () => {
const jsonResults = await fetchAll(
pokemons.map((name) => `https://pokeapi.co/api/v2/pokemon/${name}/`),
);
return setPokemonsData(jsonResults.map((data) => ({
name: data.name,
weight: data.weight,
img: data.sprites.front_default,
})));
})();
}, [pokemons]);
return pokemonsData.map(({ name, weight, img }) => (
));
}
export default PokemonList;

useEffect (clean-up)
// App.js
import React from 'react';
import PokemonList from './PokemonList';
function App() {
return (
);
}
export default App;
// lib/fetch-all.js
export default async (urls, options) => {
const responses = await Promise.all(
urls.map((url) => fetch(
url,
options,
)),
);
return Promise.all(
responses.map((response) => response.json()),
);
};
// PokemonList.js
import React, { useState, useEffect } from 'react';
import fetchAll from './lib/fetch-all';
import Pokemon from './Pokemon';
function PokemonList({ pokemons }) {
const [pokemonsData, setPokemonsData] = useState([]);
useEffect(() => {
const abortController = new AbortController();
const { signal } = abortController;
(async () => {
let jsonResults;
try {
jsonResults = await fetchAll(
pokemons.map((name) => `https://pokeapi.co/api/v2/pokemon/${name}/`),
{ signal },
);
} catch (err) {
return setPokemonsData([]);
}
return setPokemonsData(jsonResults.map((data) => ({
name: data.name,
weight: data.weight,
img: data.sprites.front_default,
})));
})();
return () => abortController.abort();
}, [pokemons]);
return pokemonsData.map(({ name, weight, img }) => (
));
}
export default PokemonList;

React Dev Tools

React Dev Tools
https://github.com/facebook/react/tree/master/packages/react-devtools

Virtual DOM

Virtual DOM
Reconciliation
Diffing
Keys

Альтернативы