Hello World

Найменшы прыклад React выглядае наступным чынам:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Ён адлюстроўвае загаловак “Hello, world!” на гэтай старонцы.

Наступныя некалькі разьдзелаў будуць паступова знаёміць вас з выкарыстаньнем React. Мы разгледзім будаўнічыя блёкі прыкладных праграмаў React: элемэнты й кампанэнты. Засвоіўшы іх, вы зможаце ствараць складаныя прыкладныя праграмы зь невялікіх шматразова ўжывальных частак.

Праходжаньне

Самы просты спосаб пачаць працу з React — скарыстацца гэтым прыкладам коду Hello World на CodePen. Вам ня трэба нічога ўсталёўваць; вы можаце адчыніць яго ў іншай укладцы ды ісьці за намі ў праходжаньні прыкладаў. Калі ж вы аддаяце перавагу выкарыстаньню лякальнага асяродзьдзя распрацоўкі, то паглядзіце разьдзел Installation (Устаноўка).

Дапушчэньні ўзроўняў ведаў

React — гэта бібліятэка JavaScript, і таму мы мяркуем, што ў вас ёсьць базавае разуменьне мовы JavaScript. Калі вы адчуваеце сябе ня вельмі ўпэўнена, то мы рэкамэндуем прайсьці навучаньне JavaScript, каб праверыць свой узровень ведаў і мець магчымасьць рухацца па гэтым пакрокавым дапаможніку, ня блытаючыся. Гэта можа заняць ад 30 хвілінаў да гадзіны, але ў выніку вы ня будзеце адчуваць, што вывучаеце як React, так і JavaScript адначасова.

Гэты пакрокавы дапаможнік таксама ў некаторай ступені выкарыстоўвае новы сынтаксіс JavaScript у прыкладах. Калі вы не працавалі з JavaScript апошнія некалькі год, то вам у асноўным павінны памагчы гэтыя тры пункты:

  • Мы азначаем пераменныя з дапамогай апэратараў let ды const. Для мэтаў гэтага дапаможніка вы можаце лічыць іх эквівалентнымі var.
  • Мы выкарыстоўваем ключавое слова class для азначэньня клясаў JavaScript. Тут варта ўзгадаць пра дзьве рэчы. Па-першае, у адрозьненьне ад аб’ектаў, паміж азначэньнямі мэтадаў клясаў косак ставіць ня трэба. Па-другое, у адрозьненьне ад многіх іншых моваў з клясамі, у JavaScript значэньне this у мэтадзе залежыць ад таго, як яно выклікаецца.
  • Часам мы ужываем => для азначэньня “стрэлкавых функцый”. Яны падобныя да звычайных функцый, толькі карацейшыя. Напрыклад, x => x * 2 прыблізна эквівалентная function(x) { return x * 2; }. Важна адзначыць, што стрэлкавыя функцыі ня маюць свайго ўласнага значэньня this, таму яны зручныя, калі вы хочаце захаваць значэньне this з вонкавага азначэньня мэтаду.

Не хвалюйцеся, калі гэтага занадта шмат, каб прыняць адразу. MDN JavaScript Reference зьяўляецца славутым рэсурсам, і вы можаце зьвяртацца да яго кожны раз, калі вы ў чымсьці заблыталіся.

Акрамя таго, калі вы ня ўпэўненыя ў тым, што азначае нешта з новага сынтаксісу, вы можаце выкарыстаць Babel REPL з прэсэтам ES2015, каб праверыць у які эквівалент старога сынтаксісу ён скампілюе.