Първи стъпки с React.js

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

Реакцията е Преглед на слоя от MVC модел на проектиране на софтуер, и основно фокусира върху DOM манипулация. Тъй като тези дни всички говорят за React, в този пост ще разгледаме как можете започнете с него.

Инсталиране на реакцията

Можете също да инсталирате React с npm пакетния мениджър или от ръчно добавяне на необходимите библиотеки към вашата HTML страница. Препоръчва се използвайки React with Babel което ви позволява използва синтаксиса ECMAScript6 и JSX в кода на Вашия Реакт.

Ако искаш инсталирайте React ръчно, официалните документи препоръчват на използвайте този HTML файл. Можете да изтеглите страницата, като кликнете върху Файл> Запазване на страница като ... в браузъра. Скриптовете, които ще ви трябват (React, React DOM, Babel), също ще се изтеглят в реагират-example_files / папка. След това добавете следните скриптови маркери към раздел на вашия HTML документ:

Вместо да ги изтеглите, можете да добавите сценариите React от CDN също.

Можете да използвате и умалени версии от горните JavaScript файлове:

Ако предпочитате инсталирайте React с npm, най-добрият начин е да използвате Създаване на приложение за реакция Github repo, създаден от Facebook Incubator - това е и решението, което препоръчва React docs. Освен React, също съдържа Webpack, Babel, Autoprefixer, ESLint и други инструменти за програмисти. За да започнете, използвайте следните команди CLI:

 npm install -g create-react-app Създай-реагирай-ап my-app cd my-app npm старт

Когато сте готови, можете влезте в новото си приложение React на Localhost: 3000 URL адрес:

Ако искате да прочетете повече за как да инсталирате React, разгледайте указание за монтаж от документите.

React и JSX

Въпреки че не е задължително, можете използва синтаксиса на JSX в приложенията Реагирайте. JSX означава JavaScript XML, и то преминава в обикновен JavaScript. Голямото предимство на JSX е това ви позволява да включите HTML във вашите JavaScript файлове, следователно улеснява определянето на елементи на React.

Ето най-важните неща, които трябва да знаете за JSX:

Отбелязва, че започнете с малки букви (случай на долната камила) като обикновени HTML елементи.
Отбелязва, че започнете с главни букви (случай на горна камила) като реагиращи компоненти.
Всеки код написани в къдрави скоби … се тълкуват като буквален JavaScript.

Ако искате да знаете повече за това как да използвате JSX с React разгледайте тази страница от документите и за JSX документация по подразбиране можете да разгледате уикито на JSX.

Създаване на елементи на реакцията

Реакцията има a архитектура, базирана на компонентите в която разработчиците създават компоненти за многократна употреба за решаване на различни проблеми. Реактивен компонент е изграден от някои или от много Реагирайте елементи които са най-малките единици на приложенията React.

По-долу можете да видите прост пример за елемент React който добавя бутон „Кликни ме“ на HTML страница. В HTML добавяме a

контейнер с "MyDiv" ID, което ще бъде Попълнен с елемента React. Създаваме нашия Реактивен елемент в рамките на a

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