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

За да използвате React в производството, имате нужда от NPM и Node.js

За да получите преглед на това, което е React, можете да напишете React код директно в HTML.

Но за да използвате React в производството, трябва да имате инсталирани NPM и Node.js.


Реагирайте директно в HTML

Най-бързият начин да започнете да учите React е да пишете React директно във вашите HTML файлове.

Започнете с включването на три скрипта, първите два ни позволяват да пишем React код в нашите JavaScript файлове, а третият, Babel, ни позволява да пишем със синтаксис JSX и ES6 в по-стари браузъри.

Ще научите повече за JSX в главата React JSX .

Пример

Включете три CDN файла във вашия HTML файл:

Опитайте сами »

Този начин на използване на React може да бъде добре за целите на тестване, но за производствена среда ще трябва да настроите среда на React .


Създаване на реагираща среда

Ако имате инсталирани NPM и Node.js, можете да създадете приложение React, като първо инсталирате приложението create-response-app.

Ако вече сте създали приложението create-response – можете да пропуснете този раздел.

Инсталирайте create-response-app, като изпълните тази команда във вашия терминал: C:\Users\Your Name>npm install -g create-react-app

След това можете да създадете React приложение, нека създадем едно наречено myfirstreact.

Изпълнете тази команда, за да създадете React приложение с име myfirstreact: C:\Users\Your Name>npx create-react-app myfirstreact

Приложението create-response-ще настрои всичко необходимо за стартиране на React приложение.


Стартирайте приложението React

Сега сте готови да стартирате първото си истинско приложение React!

Изпълнете тази команда, за да се преместите в myfirstreact директорията: C:\Users\Your Name>cd myfirstreact

Изпълнете тази команда, за да стартирате приложението React myfirstreact: C:\Users\Your Name\myfirstreact>npm start

Ще се появи нов прозорец на браузъра с новосъздаденото ви приложение React! Ако не, отворете браузъра си и въведете localhost:3000 в адресната лента.

Резултатът:


Променете React Application

Засега добре, но как да променим съдържанието?

Погледнете в myfirstreact директорията и ще намерите src папка. Вътре в src папката има файл, наречен App.js, отворете го и той ще изглежда така:

/myfirstreact/src/App.js:

Опитайте да промените HTML съдържанието и запазете файла.

Забележете, че промените са видими веднага след като запазите файла, не е нужно да презареждате браузъра!

Пример

Заменете цялото съдържание вътре в <div className="App"> с <h1> елемент.

Вижте промените в браузъра, когато щракнете върху Запазване.

Забележете, че сме премахнали ненужния им импорт (logo.svg и App.css).

Резултатът:


Какво следва?

Сега имате React Environment на вашия компютър и сте готови да учите повече за React.

В останалата част от този урок ще използваме нашия инструмент Show React, за да обясним различните аспекти на React и как те се показват в браузъра.

Ако искате да следвате същите стъпки на компютъра си, започнете, като премахнете src папката, за да съдържа само два файла: index.js и index.html в някои компилации вместо това можете да намерите index.html в публичната папка, трябва също да премахнете всички ненужни редове с код в двата файла, за да изглеждат като файловете в инструмента Show React по-долу:

Пример

Щракнете върху бутона „Изпълнение на пример“, за да видите резултата.

index.js:

index.html:

Пример за изпълнение »