Основы JavaScript, прежде чем вы изучите React
В идеальном мире вы можете узнать все о JavaScript и веб-разработке, прежде чем погрузиться в React. К сожалению, мы живем в неидеальном мире, поэтому если вы съедите ВЕСЬ JavaScript перед React, у вас просто потечет кровь. Если у вас уже есть некоторый опыт работы с JavaScript, все, что вам нужно изучить перед React, — это только функции JavaScript, которые вы фактически будете использовать для разработки приложения React. Вещи о JavaScript, с которыми вы должны быть знакомы, прежде чем изучать React:
Это 20% функций JavaScript, которые вы будете использовать в 80% случаев, поэтому в этом руководстве я помогу вам изучить их все.
Изучение создания приложения React
Обычный случай начала изучения React — запустить create-react-app package, который устанавливает все необходимое для запуска React. Затем, после завершения процесса, открытие src/app.js представит нам единственный класс React во всем приложении:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Если вы никогда раньше не изучали ES6, вы могли бы подумать, что этот оператор класса является функцией React. На самом деле это новая функция ES6, поэтому правильное изучение ES6 позволит вам лучше понять код React. Мы начнем с классов ES6.
Классы ES6
В ES6 представлен синтаксис класса, который используется аналогично объектно-ориентированному языку, такому как Java или Python. Базовый класс в ES6 будет выглядеть так:
class Developer {
constructor(name){
this.name = name;
}
hello(){
return 'Hello World! I am ' + this.name + ' and I am a web developer';
}
}
class синтаксис сопровождается идентификатором (или просто именем), который можно использовать для создания новых объектов. constructor метод всегда вызывается при инициализации объекта. Любые параметры, переданные в объект, будут переданы в новый объект. Например:
var nathan = new Developer('Nathan');
nathan.hello();
Класс может определять столько методов, сколько необходимо, и в этом случае у нас есть hello метод, который возвращает строку.
Наследование классов
Класс может extends определение другого класса, и новый объект, инициализированный из этого класса, будет иметь все методы обоих классов.
class ReactDeveloper extends Developer {
installReact(){
return 'installing React .. Done.';
}
}
var nathan = new ReactDeveloper('Nathan');
nathan.hello();
nathan.installReact();
Класс, который extends обычно называется другой класс дочерний класс или же подкласса расширяемый класс называется родительский класс или же супер класс. Дочерний класс также может отменить методы, определенные в родительском классе, что означает, что он заменит определение метода новым определенным методом. Например, давайте переопределим hello функция:
class ReactDeveloper extends Developer {
installReact(){
return 'installing React .. Done.';
}
hello(){
return 'Hello World! I am ' + this.name + ' and I am a REACT developer';
}
}
var nathan = new ReactDeveloper('Nathan');
nathan.hello();
Ну вот. hello метод из Developer класс был переопределен.
Использование в реакции
Теперь, когда мы понимаем класс ES6 и наследование, мы можем понять класс React, определенный в src/app.js. Это компонент React, но на самом деле это обычный класс ES6, который наследует определение класса React Component, импортированного из пакета React.
import React, { Component } from 'react';
class App extends Component {
render(){
return (
<h1>Hello React!</h1>
)
}
}
Именно это позволяет нам использовать render() метод, JSX, this.state, другие методы. Все эти определения находятся внутри Component учебный класс. Но, как мы увидим позже, класс — не единственный способ определить компонент React. Если вам не нужны состояние и другие методы жизненного цикла, вместо этого вы можете использовать функцию.
Объявление переменных с помощью ES6 let а также const
Потому что JavaScript var ключевое слово объявляет переменную глобально, для решения этой проблемы в ES6 были введены два новых объявления переменных, а именно let а также const. Они все одинаковые, в которых они используются для объявления переменных. Разница в том, что const не может изменить свое значение после объявления, в то время как let Можно. Оба объявления являются локальными, то есть если вы объявите let внутри области действия функции вы не можете вызвать ее вне функции.
const name = "David";
let age = 28;
var occupation = "Software Engineer";
Какой использовать?
Эмпирическое правило заключается в том, что объявляйте переменную, используя const по умолчанию. Позже, когда вы будете писать приложение, вы поймете, что значение const нужно изменить. Это время, когда вы должны провести рефакторинг const в let. Надеюсь, это заставит вас привыкнуть к новым ключевым словам, и вы начнете распознавать шаблон в своем приложении, где вам нужно использовать const или же let.
Когда мы используем его в React?
Каждый раз, когда нам нужны переменные. Рассмотрим следующий пример:
import React, { Component } from 'react';
class App extends Component {
render(){
const greeting = 'Welcome to React';
return (
<h1>{greeting}</h1>
)
}
}
Поскольку приветствие не изменится на протяжении всего жизненного цикла приложения, мы определяем его с помощью const здесь.
Функция стрелки
Стрелочная функция — это новая функция ES6, которая почти широко используется в современных кодовых базах, поскольку она делает код кратким и удобочитаемым. Эта функция позволяет нам писать функции, используя более короткий синтаксис.
const testFunction = function() {
}
const testFunction = () => {
}
Если вы опытный разработчик JS, поначалу переход от обычного синтаксиса функций к синтаксису стрелок может показаться неудобным. Когда я изучал функцию стрелки, я использовал эти простые 2 шага, чтобы переписать свои функции:
- удалить ключевое слово функции
- добавить символ толстой стрелки
=>после()
круглые скобки по-прежнему используются для передачи параметров, и если у вас есть только один параметр, вы можете опустить круглые скобки.
const testFunction = (firstName, lastName) => {
return firstName+' '+lastName;
}
const singleParam = firstName => {
return firstName;
}
Неявный возврат
Если ваша стрелочная функция состоит только из одной строки, вы можете возвращать значения без использования return ключевое слово и фигурные скобки {}
const testFunction = () => 'hello there.';
testFunction();
Использование в реакции
Другой способ создать компонент React — использовать функцию стрелки. Реагируйте на функцию стрелки:
const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}
как эквивалент компонента класса ES6
class HelloWorld extends Component {
render() {
return (
<h1>{props.hello}</h1>;
);
}
}
Использование функции стрелки в вашем приложении React делает код более лаконичным. Но это также удалит использование состояния из вашего компонента. Этот тип компонента известен как функциональный компонент без сохранения состояния. Вы найдете это имя во многих учебниках по React.
Разрушение присваивания для массивов и объектов
Один из самых полезных новых синтаксисов, представленных в ES6, деструктурирующее присваивание — это просто копирование части объекта или массива и помещение их в именованные переменные. Краткий пример:
const developer = {
firstName: 'Nathan',
lastName: 'Sebhastian',
developer: true,
age: 25,
}
const { firstName, lastName } = developer;
console.log(firstName);
console.log(lastName);
console.log(developer);
Как видите, мы присвоили имя и фамилию из developer объект в новую переменную firstName а также lastName. А что, если вы хотите поставить firstName в новую переменную с именем name?
const { firstName:name } = developer;
console.log(name);
Деструктуризация также работает с массивами, только вместо ключей объекта используется индекс:
const numbers = [1,2,3,4,5];
const [one, two] = numbers;
Вы можете пропустить какой-либо индекс из деструктурирования, передав его с помощью ,:
const [one, two, , four] = numbers;
Использование в реакции
В основном используется при деструктуризации state в методах, например:
reactFunction = () => {
const { name, email } = this.state;
};
Или в функциональном компоненте без состояния, рассмотрим пример из предыдущей главы:
const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}
Мы можем просто немедленно деструктурировать параметр:
const HelloWorld = ({ hello }) => {
return <h1>{hello}</h1>;
}
Карта и фильтр
Хотя это руководство посвящено ES6, массив JavaScript map а также filter необходимо упомянуть методы, поскольку они, вероятно, являются одной из наиболее часто используемых функций ES5 при создании приложения React. В частности, об обработке данных.
Эти два метода гораздо чаще используются при обработке данных. Например, представьте, что результат выборки из API возвращает массив данных JSON:
const users = [
{ name: 'Nathan', age: 25 },
{ name: 'Jack', age: 30 },
{ name: 'Joe', age: 28 },
];
Затем мы можем отобразить список элементов в React следующим образом:
import React, { Component } from 'react';
class App extends Component {
render(){
const users = [
{ name: 'Nathan', age: 25 },
{ name: 'Jack', age: 30 },
{ name: 'Joe', age: 28 },
];
return (
<ul>
{users
.map(user => <li>{user.name}</li>)
}
</ul>
)
}
}
Мы также можем фильтровать данные в рендере.
<ul>
{users
.filter(user => user.age > 26)
.map(user => <li>{user.name}</li>)
}
</ul>
Модульная система ES6
Модульная система ES6 позволяет JavaScript импортировать и экспортировать файлы. Давайте посмотрим src/app.js код еще раз, чтобы объяснить это.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
В первой строке кода мы видим оператор импорта:
import React, { Component } from 'react';
и в последней строке мы видим export default утверждение:
export default App;
Чтобы понять эти утверждения, давайте сначала обсудим синтаксис модулей.
Модуль — это просто файл JavaScript, который экспортирует одно или несколько значений (могут быть объектами, функциями или переменными) с помощью export ключевое слово. Сначала создайте новый файл с именем util.js в src каталог
touch util.js
Затем напишите внутри него функцию. Это экспорт по умолчанию
export default function times(x) {
return x * x;
}
или несколько именованный экспорт
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}
Затем мы можем импортировать его из src/App.js
import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));
У вас может быть несколько именованных экспортов на модуль, но только один экспорт по умолчанию. Экспорт по умолчанию можно импортировать без использования фигурных скобок и соответствующего имени экспортируемой функции:
export default function times(x) {
return x * x;
}
export k from './util.js';
console.log(k(4));
Но для именованного экспорта необходимо импортировать с использованием фигурных скобок и точного имени. В качестве альтернативы импорт может использовать псевдоним, чтобы не использовать одно и то же имя для двух разных импортов:
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}
import { times as multiplication, plusTwo as plus2 } from './util.js';
Импортировать из абсолютного имени, например:
import React from 'react';
Сделает проверку JavaScript node_modules для соответствующего имени пакета. Поэтому, если вы импортируете локальный файл, не забудьте указать правильный путь.
Использование в реакции
Очевидно, мы видели это в src/App.js файл, а затем в index.js файл, куда экспортируется App компонент рендерится. Давайте пока проигнорируем часть serviceWorker.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Обратите внимание, как приложение импортируется из ./App каталог и .js расширение было опущено. Мы можем не указывать расширение файла только при импорте файлов JavaScript, но мы должны включать его в другие файлы, такие как .css. Мы также импортируем еще один модуль узла react-domчто позволяет нам визуализировать компонент React в элемент HTML.
Что касается PWA, это функция, позволяющая приложению React работать в автономном режиме, но, поскольку она отключена по умолчанию, нет необходимости изучать ее в начале. Лучше изучать PWA после того, как вы будете достаточно уверены в создании пользовательских интерфейсов React.
Вывод
Самое замечательное в React то, что он не добавляет никакого внешнего слоя абстракции поверх JavaScript, как другие веб-фреймворки. Вот почему React становится очень популярным среди разработчиков JS. Он просто использует лучшее из JavaScript, чтобы сделать создание пользовательских интерфейсов проще и удобнее в сопровождении. Внутри приложения React действительно больше JavaScript, чем специальный синтаксис React, поэтому, как только вы лучше поймете JavaScript — особенно ES6 — вы сможете уверенно писать приложение React. Но это не значит, что вам нужно освоить все, что касается JavaScript, чтобы начать писать приложение React. Идите и напишите его прямо сейчас, и когда у вас появятся возможности, вы станете лучшим разработчиком.
Время халявы!
Вы можете подписаться на мой Новостная рассылка за полезное изучение React-халявы. Включая это руководство в формате PDF.
Спасибо за чтение, и я надеюсь, что вы узнали что-то новое 
