[Перевод] Основные основы JavaScript, прежде чем вы изучите React

Оригинальный адрес:JavaScript Basics Before You Learn React
Оригинальный автор: Натан Себхастиан

написать впереди

Чтобы не тратить ваше драгоценное время, сразу скажу, что данная статья предназначена для прочтения:Reactили только что связалисьReactи дляES6Для студентов, которые мало знают о грамматике, это базовая вводная статья.Я не планировала переводить такую базовую статью в начале, но прочитав всю статью, вспомнила, что только начала учитьReactкогда сбит с толку,ES6Их так много, сколько мне нужно освоить? Для спешки, чтобы начатьReactДля тех, кто пишет код, эта статья рассказывает вам наиболее базовые знания для освоения, позволяя вам писать быстро. Однако улучшение более позднего этапа все еще должно быть консолидировано.JavascriptОсновы.

предисловие

В идеальном состоянии можно разобраться до погружения в ReactJavaScriptа такжеWebВсе знания развиты. К сожалению, мы живем в несовершенном мире, поэтому вReactположить всеJavaScriptПережевывание всего этого только усложнит вам задачу. если у вас уже естьJavaScriptопыт, тоReactВсе, что вам нужно выучить прежде, на самом деле для развитияReactПрограммыJavaScriptФункция. изучениеReactЧему вы должны были научиться раньшеJavaScriptОчки знаний:

ES6Добрый
использоватьlet / constобъявить переменную
стрелочная функция
присваивание деструктуризации
Mapа такжеfilter
ES6модульная система

здесь ты будешь80％используется в течение времени20％изJavaScriptНовые функции, поэтому в этой статье я помогу вам изучить их все.

Создайте`React`Исследование приложений

начать учитьсяReactОбычный случай - запуститьcreate-react-appпакет, он будет запущен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="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Если вы никогда раньше не училисьES6, то можно подумать, что этоclassзаявлениеReactособенность . На самом деле этоES6Новая фишка , поэтому учимся правильноES6позволяет лучше понятьReactкод. мы начнемES6начинается класс.

`ES6`тип

ES6представилclassсинтаксис похож наJavaилиPythonЖдатьOO(объектно-ориентированный) язык.ES6Базовый класс в выглядит следующим образом:

class Developer {
  constructor(name){
    this.name = name;
  }

  hello(){
    return 'Hello World! I am ' + this.name + ' and I am a web developer';
  }
}

classЗа синтаксисом следует идентификатор (или имя), который можно использовать для создания новых объектов. Методы конструктора всегда вызываются при инициализации объекта. Любые аргументы, переданные этому объекту, будут переданы новому объекту. Например:

var nathan = new Developer('Nathan');
nathan.hello(); // Hello World! I am Nathan and I am a web developer

Класс может определить любой метод, который ему нужен, в этом случае мы определяем метод, который возвращает строкуhelloметод.

наследование классов

Класс может расширить определение другого класса, и новый объект, инициализированный из этого класса, будет иметь все методы обоих классов.

class ReactDeveloper extends Developer {
  installReact(){
    return 'installing React .. Done.';
  }
}

var nathan = new ReactDeveloper('Nathan');
nathan.hello(); // Hello World! I am Nathan and I am a web developer
nathan.installReact(); // installing React .. Done.

Класс, который наследуется от другого класса, обычно называемыйchildкласс илиsubкласс, а расширяемый класс называетсяparentкласс илиsuperДобрый. Подкласс также может переопределять методы, определенные в родительском классе, что означает, что он заменит определение метода родительского класса новым методом, определенным им самим. Например, давайте покроем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 World! I am Nathan and I am a REACT developer

И просто так, мы переписываемDeveloperв классеhelloметод.

Использование в реакции

теперь мы понимаемES6классов и наследования, мы можем понятьsrc / app.jsопределено вReactДобрый. ЭтоReactкомпонент, но на самом деле это просто нормальныйES6класс, который наследуется отReactпакет импортированReact Componentопределение класса.

import React, { Component } from 'react';

class App extends Component {
  // class content
  render(){
    return (
      <h1>Hello React!</h1>
    )
  }
}

Это позволяет нам использоватьrender()метод,JSX,this.stateи другие методы. Все эти определения находятся вComponentв классе. Но, как мы увидим позже,classне определениеReact Componentединственный способ. Если вам не нужны состояние и другие методы жизненного цикла, вы можете использовать функции.

использовать`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 {
  // class content
  render(){
    const greeting = 'Welcome to React';
    return (
      <h1>{greeting}</h1>
    )
  }
}

на протяжении всего жизненного цикла приложенияgreetingне меняется, поэтому здесь мы используемconst

стрелочная функция

Стрелочные функцииES6Новая функция , которая почти широко используется в современных кодовых базах, поскольку делает код кратким и легко читаемым. Это позволяет нам писать функции с более коротким синтаксисом.

// regular function
const testFunction = function() {
  // content..
}

// arrow function
const testFunction = () => {
  // content..
}

Если вы опытныйJSразработчик, то переключение с обычного синтаксиса функций на синтаксис стрелок может вызвать у вас дискомфорт. Когда я изучал стрелочные функции, я переписал свою функцию, выполнив два простых шага:

Удалитьfunctionключевые слова
существует()добавить после=>

Круглые скобки по-прежнему используются для передачи параметров и могут быть опущены, если имеется только один параметр.

const testFunction = (firstName, lastName) => {
  return firstName+' '+lastName;
}

const singleParam = firstName => {
  return firstName;
}

скрытый`return`

Если стрелочная функция имеет только одну строку, вы можете вернуть значение без использования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,
}

//destructure developer object
const { firstName, lastName } = developer;
console.log(firstName); // returns 'Nathan'
console.log(lastName); // returns 'Sebhastian'
console.log(developer); // returns the object

Как видите, мы поместили объект разработчика вfirstNameа такжеlastNameприсвоить новой переменнойfirstNameа такжеlastName. Теперь, если вы хотитеfirstNameпоставить имяname, Что я должен делать?

const { firstName:name } = developer;
console.log(name); // returns 'Nathan'

Деструктуризация также работает с массивами, используя индексы вместо ключей объекта:

const numbers = [1,2,3,4,5];
const [one, two] = numbers; // one = 1, two = 2

Вы можете пройти в,чтобы пропустить некоторые индексы во время деструктуризации:

const [one, two, , four] = numbers; // one = 1, two = 2, four = 4

существует`React`использовать в

Чаще всего деструктурируют в методеstate:

reactFunction = () => {
  const { name, email } = this.state;
};

Или в функциональном компоненте без сохранения состояния в сочетании с ранее упомянутым примером:

const HelloWorld = (props) => {
  return <h1>{props.hello}</h1>;
}

Мы можем просто сразу деконструировать параметр:

const HelloWorld = ({ hello }) => {
  return <h1>{hello}</h1>;
}

`Map`а также`filter`

Хотя в данной статье основное внимание уделяетсяES6, но нужно упомянутьJavaScriptмножествоMapа такжеfilterметоды, как они могут быть построеныReactНаиболее часто используемое приложениеES5Одна из функций. Особенно при обработке данных.

Эти два метода чаще используются при работе с данными. Например, предположим, что из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 {
  // class content
  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>
    )
  }
}

Мы также можемrenderФильтровать данные в

<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="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

В первой строке кода мы видимimportЗаявление:

import React, { Component } from 'react';

В первой строке кода мы видимexport defaultЗаявление:

export default App;

Чтобы понять эти операторы, давайте сначала обсудим синтаксис модуля.

модуль это простоJavaScriptфайл, он используетexportКлючевое слово экспортирует одно или несколько значений (которые могут быть объектами, функциями или переменными). Первый вsrcСоздайте каталог с именемutil.jsновый файл

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));

Каждый модуль может иметь несколько именованных экспортов, но только один экспорт по умолчанию. Экспорт по умолчанию можно импортировать без использования фигурных скобок и соответствующего имени функции экспорта:

// in util.js
export default function times(x) {
  return x * x;
}

// in app.js
export k from './util.js';

console.log(k(4)); // returns 16

Но для именованного экспорта вы должны импортировать с фигурными скобками и точным именем. В качестве альтернативы импорту можно присвоить псевдоним, чтобы избежать двух разных импортов с одинаковым именем:

// in util.js
export function times(x) {
  return x * x;
}

export function plusTwo(number) {
  return number + 2;
}

// in app.js
import { times as multiplication, plusTwo as plus2 } from './util.js';

Импортируйте имя напрямую следующим образом:

import React from 'react';

сделаюJavaScriptэкзаменnode_modulesчтобы получить соответствующее имя пакета. Поэтому, если вы импортируете локальный файл, не забудьте указать правильный путь.

Использование в реакции

Очевидно, мы ужеsrc / App.jsВидел это в документации, потом вindex.jsЭкспортированный файл виден вAppКак отображается компонент. мы пока игнорируемserviceWorkerчасть.

//index.js file

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'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Обратите внимание, как./Appимпорт каталогаApp, и опущен.jsимя расширения. Мы можем только импортироватьJavaScriptфайл с опущенным расширением файла, но в других файлах мы должны указать расширение, например..css. Мы также импортируем другойnodeмодульreact-dom, что позволяет намReactКомпонент отображается какHTMLэлемент.

Что касаетсяPWA, это делаетReactФункция для работы приложения в автономном режиме, но, поскольку она отключена по умолчанию, нет необходимости изучать ее в начале. После того, как у вас будет достаточно уверенности, чтобы построитьReactПосле пользовательского интерфейса лучше учитьсяPWA.

Суммировать

ReactПреимущество в том, что он не похож на другиеWebтот самый кадрJavaScriptДобавьте все внешние слои абстракции сверху. поэтомуReactстать очень популярнымJSРазработчики приветствуют причины. Он просто использует лучшееJavaScriptСоздание пользовательского интерфейса, чтобы сделать его проще и удобнее. существуетReactприложения, их действительно больше, чемReact specixбольше грамматикиJavaScript, так что как только вы поймете лучшеJavaScript- особенноES6- Вы сможете писать уверенноReactприложение сейчас. Но это не значит, что вы должны овладетьJavaScriptначать писатьReactзаявление. Напишите его прямо сейчас, и вы станете лучшим разработчиком, как только представится возможность. Спасибо за прочтение, надеюсь, вы узнали что-то новое :)

наконец

буклетХитрости отладки Chrome, о которых вы не зналиПредпродажа стартовала.

Добро пожаловать в публичный аккаунт "Front-end Bully", отсканируйте код, чтобы следовать, вас ждет много хорошего~

написать впереди

предисловие

СоздайтеReactИсследование приложений

ES6тип

наследование классов

Использование в реакции

использоватьES6серединаletа такжеconstобъявлять переменные

Что использовать?

когда мыReactв использовании?

стрелочная функция

скрытыйreturn

существуетReactиспользовать в

Разбор присваиваний массивам и объектам

существуетReactиспользовать в

Mapа такжеfilter

Модульная система ES6

Использование в реакции

Суммировать

наконец

Создайте`React`Исследование приложений

`ES6`тип

использовать`ES6`середина`let`а также`const`объявлять переменные

когда мы`React`в использовании?

скрытый`return`

существует`React`использовать в

существует`React`использовать в

`Map`а также`filter`