Започнете с React

Библиотеките на JavaScript които отговарят за манипулирането на изгледите и начина, по който те показват информацията, все повече включват повече функционалности, които правят разработването на приложения по -лесно за разработчика и по -приятно за потребителите, които ги използват.

Сред тези библиотеки имаме Реагирайте, която е библиотека на JavaScript на отворен код, фокусиран главно върху създаването на потребителски интерфейси за приложения с една страница или приложения на една страница, които се използват от Facebook и Instagram да обработва всичко, което се отнася до изгледи, решавайки проблема с големи приложения, където данните, показвани на потребителя, се променят постоянно.

Функции на React

За да разрешим този проблем, който споменахме Реагирайте основава своята философия на следните характеристики:

ПростТази характеристика изразява начина, по който нашето приложение трябва да изглежда в определена точка и по какъв начин го прави и какво прави Реагирайте е, че той автоматично обработва всички актуализации на потребителския интерфейс, когато се направят фундаментални промени в приложението.
ДекларативнаКогато информацията се промени в нашето приложение Реагирайте изпълнява функцията за опресняване на нашата страница, но само там, където информацията се е променила.
Изграждане на комбинирани компонентиКогато говорим за Реагирайте, ние говорим главно за конструирането на компоненти за многократна употреба, всъщност с тази библиотека това, което правим през повечето време, е изграждането на компоненти и благодарение на факта, че те са капсулирани, те правят повторното използване на код, тестове и разделянето на функционалностите изключително прост.

Първи реакция

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

За да получим най -новата версия, изтегляме таблет с библиотеката на следната връзка. След изтегляне, разархивираме и поставяме съдържанието в папка, наречена Hello_React и вътре създаваме файл, наречен hello_react.html който ще съдържа следното съдържание:

Както виждаме, това е доста прост код, който ни позволява да изобразяваме текст в основния си изглед благодарение на включването на response.js. Освен това използваме JSX какво е синтаксис XML в рамките на нашите JavaScript и след това направете трансформацията в браузъра, която можем да използваме благодарение на внедряването на втората наречена библиотека JSXTransformer.js

В допълнение към това можем да направим нашия код по -четим и модулен, като отделим логиката му, можем да постигнем това, като направим два файла, за това създаваме един, наречен hello_react.js и въвеждаме следния код:

 React.render (, document.getElementById ('example_react'));

Тогава в нашия HTML това, което правим, е да включим нашия .js файл в маркера на скрипта и ще имаме същата операция:

Нека видим тогава, когато стартираме нашия пример в браузъра, неговия отговор:

Както виждаме, манипулирането на данните беше доста просто, но има по -добър начин за внедряване Реагирайте, тъй като начинът, по който го правим, кодът използва трансформатора на JSX на браузъра, както ще видим в съобщението, което получаваме през конзолата.

Това съобщение на конзолата ни дава решение на това малко предупреждение и то е да извършим предварителна компилация на нашия .js код, за това ще използваме мениджъра на пакети на Node.js за тази задача, така че ако нямаме тази среда инсталирана на нашия компютър, отиваме на официалната страница и я изтегляме в случай, че работим в Windows и в случай, че работим в Linux, можем да следваме стъпките в този урок.

Предварително компилиране на нашия код

За да изпълним тази задача, отиваме в нашата конзола Node.js и с помощта на npm инсталирахме инструмента Реагирайте за извикана командна конзола инструменти за реакция за които трябва само да изпълним този ред:

 npm install -g response -tools

Сега това, което правим, е да преведем нашия код на JavaScript чисто, както следва:

 jsx -гледайте hello_react.js

Това не само превежда нашия код, но автоматично генерира файла hello_react.js Всеки път, когато се прави промяна в нашето приложение, нека видим отговора от конзолата, когато изпълняваме тази команда:

Накрая променяме нашата HTML премахване на включването на библиотеката JSXTransformer.js тъй като нямаме нужда от него и правим включването на нашия скрипт по конвенционален начин, нека видим:

 Здравейте React!

Както споменахме, последната операция, която извършваме чрез конзолата, автоматично генерира файла всеки път, когато правим промяна в нашето приложение, така че ако сме направили промени, конзолата ще ни уведоми, както следва:

Както можем да видим, имаме две известия, че са направени промени във файла, които всъщност са тези, които направихме по отношение на премахването на библиотеката и извършването на конвенционално включване на JavaScript файл.

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