Початок роботи з React.js

React.js є гнучкою та компонентною Бібліотека JavaScript для створення інтерактивних інтерфейсів користувача. Це було створений і відкритий у Facebook і використовується багатьма провідними технологічними компаніями, такими як Dropbox, AirBnB, PayPal і Netflix. React дозволяє розробникам створювати важкі для даних програми які можна безболісно оновлювати повторне відображення лише необхідних компонентів.

Реакція Переглянути шар з MVC шаблон дизайну програмного забезпечення, і це головним чином фокусується на маніпуляції DOM. Оскільки в ці дні всі говорять про React, на цій посаді ми розглядаємо, як ви можете розпочати з нею.

Встановити реакцію

Ви також можете встановити React з менеджером пакетів npm або додавання необхідних бібліотек вручну на вашу HTML-сторінку. Рекомендується за допомогою React with Babel що дозволяє використовувати синтаксис ECMAScript6 і JSX в коді React.

Якщо ти хочеш встановити React вручну, офіційні документи рекомендують використовувати цей файл HTML. Ви можете завантажити сторінку, натиснувши кнопку Файл> Зберегти сторінку як ... у вашому браузері. Скрипти, які вам знадобляться (React, React DOM, Babel), також завантажуватимуться в реакція-приклад_файлів / папки. Потім додайте наступні теги сценарію до розділу вашого HTML-документа:

Замість того, щоб завантажувати їх, можна додати сценарії React від CDN так само.

Ви також можете використовувати зменшені версії перелічених вище файлів JavaScript:

Якщо хочете встановіть React з npm, найкращим способом є використання Створити програму React App Github repo створений інкубатором Facebook - це також рішення, яке рекомендують документи React. Крім React, це також містить Webpack, Babel, Autoprefixer, ESLint та інші інструменти розробника. Щоб розпочати роботу, скористайтеся наступними командами CLI:

 npm install -g create-react-app створити-реагувати-додаток my-app cd моє додаток npm start

Коли ви будете готові, ви можете доступ до нової програми React на localhost: 3000 URL-адреса:

Якщо ви хочете читати більше на як встановити React, перевірте встановлення документів.

Реакція і JSX

Хоча це не обов'язково, ви можете використовувати синтаксис JSX у програмах React. JSX означає JavaScript XML, і це передається в звичайний JavaScript. Великою перевагою JSX є те, що він дозволяє включати HTML у ваші файли JavaScript, таким чином, полегшує визначення елементів React.

Ось найважливіші відомості про JSX:

Мітки, які починати з нижнього регістру (нижній випадок верблюда) як звичайні елементи HTML.
Мітки, які починати з великих літер (верхній випадок верблюдів) як реагують компоненти.
Будь-який код написана в фігурних дужках … інтерпретуються як буквальний JavaScript.

Якщо ви хочете дізнатися більше про це як використовувати JSX з React перевірте цю сторінку з документів і для документація за замовчуванням JSX Ви можете подивитися на вікі JSX.

Створюйте елементи React

Реакція має a архітектура на основі компонентів в якому створюють розробники багаторазові компоненти для вирішення різних проблем. Компонент React складається з декількох чи багатьох Реакційні елементи які найменші одиниці програм React.

Нижче ви можете побачити простий приклад елемента React який додає кнопку "Натисніть мені" на HTML-сторінку. У HTML ми додаємо a

контейнер з "myDiv" Ідентифікатор, який буде заповнюється елементом React. Ми створюємо наш елемент React в межах a

   Ми відтворюємо наш елемент React за допомогою ReactDOM.render () метод котрий приймає два необхідних параметра,  Реакційний елемент () і його контейнер (document.getElementById ("myDiv")). Детальніше читати можна далі як працюють елементи реакції в “Елементи візуалізації” розділ документів.
 Створити компоненти
 Реагують компоненти є багаторазові незалежні одиниці UI в якому можна легко оновити дані. Компонент може бути виконаний з одного або декількох елементів React. Реквізит є довільні входи можна використовувати для передачі даних компоненту. Компонент React працює подібно до функцій JavaScript - кожен раз, коли його викликають генерує якийсь вихід.
 Ви можете скористатися або синтаксис класичної функції або нове Синтаксис класу ES6 до визначити компонент React. У цій статті я скористаюся останньою, оскільки Babel дозволяє використовувати ECMAScript 6. Якщо ви зацікавлені в тому, як створити компонент без ES6, подивіться на сторінку Components and Props документації.
 Нижче ви можете побачити Простий компонент React ми збираємося створити в якості прикладу. Це основне сповіщення, яке користувач бачить після входу на сайт. Є три частини даних, які будуть перехід від випадку до випадку: ім'я користувача, кількість повідомлень і кількість повідомлень, ми передамо їх як реквізит.
  
Кожен компонент React - це клас JavaScript розширює React.Component базовий клас. Наш компонент буде називатися Статистика оскільки вона надає користувачеві базову статистику. По-перше, ми створити Статистика клас з Клас Stats розширює React.Component … синтаксис, то ми перенесіть його на екран за допомогою виклику ReactDOM.render () метод (ми використали останній у попередньому розділі).
  класу Stats extends React.Component render () return (  Привіт this.props.name, у вас є this.props.notifications нові сповіщення та this.props.messages нові повідомлення. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Перший аргумент ReactDOM.render () Метод складається з назва нашого компонента React (), і його реквізит (ім'я, сповіщень, і повідомлень) зі своїми значеннями. Коли ми оголошуємо значення реквізиту, то рядки повинні бути укладені в лапки (люблю "John Doe") і числові значення у фігурних дужках (люблю 3).
 Зверніть увагу, що через JavaScript ми використовується className замість клас щоб передати атрибут класу до тега HTML (className = "summary").
 Відповідна сторінка HTML така:
          
    
 У документах React є багато інших цікавих прикладів як створювати та керувати компонентами React, і що ще знати про реквізит.
 Подальше читання
 З React, Facebook введений новий вид рамки у розробку інтерфейсу кидає виклик шаблону дизайну MV *. Якщо ви хочете краще зрозуміти, як він працює, і що ви можете і не можете досягти з ним, ось деякі цікаві статті, які можуть допомогти:
 Повідомлення блога Facebook на чому вони побудували React.
 Блискучий блог Ендрю Рея на добро і погано реагують.
 Codementor на як порівняти React і AngularJS.
 FreeCodeCamp думає про те, чи є MVC мертвий на передньому кінці.
 Стаття про HackerNoon як оптимізувати продуктивність, пов'язану з реагуванням.