Дізнайтеся React за 5 хвилин - Підручник React.js для початківців

Цей підручник дасть вам базове розуміння React, створивши дуже  простий додаток. Я залишу все, що, на мою думку, не є основним.

І тоді, якщо це викликає у вас інтерес, і ви хочете дізнатись більше, ви можете ознайомитися з нашим безкоштовним курсом React на Scrimba.

А поки що, зупинимось на основних положеннях!

Налаштування

Починаючи роботу з React, вам слід скористатися найпростішим налаштуванням: файлом HTML, який імпортує Reactта ReactDOMбібліотеки за допомогою тегів скриптів.

Це виглядає так:

 /* ADD REACT CODE HERE */    

Ми також імпортували Babel, оскільки React використовує щось під назвою JSX для написання розмітки. Нам потрібно буде перетворити JSX на простий JavaScript, щоб браузер міг це зрозуміти.

Є ще дві речі, які я хочу, щоб ви помітили:

  1. The з ідентифікатором #root. Це точка входу для нашого додатка. Тут буде жити весь наш додаток.
  2. Тег в організмі. Тут ми напишемо наш код React.

Якщо ви хочете поекспериментувати з кодом, відвідайте цей ігровий майданчик Скрімба.

Компоненти

Усе в React є компонентом, і вони, як правило, мають форму класів JavaScript. Ви створюєте компонент, поширюючи на React-Componentклас. Давайте створимо компонент під назвою Hello:

class Hello extends React.Component { render() { return 

Hello world!

; } }

Потім ви визначаєте методи для компонента. У нашому прикладі ми маємо лише один метод, який називається render().

Всередині render()ви повернете опис того, що ви хочете, щоб React намалював на сторінці. У наведеному вище випадку ми просто хочемо, щоб він відображав h1тег із текстом Hello world! всередині нього.

Щоб наша крихітна програма відображалася на екрані, ми також повинні використовувати ReactDOM.render():

ReactDOM.render( , document.getElementById("root") ); 

Отже, тут ми пов’язуємо наш Helloкомпонент із точкою входу для програми ( ).

Тож ми просто говоримо: Гей, реагуй! Продемонструйте компонент Hello всередині вузла DOM з ідентифікатором root !

Це призводить до наступного:

Синтаксис HTML'ish, який ми щойно розглянули (

і ) - це код JSX, про який я згадав раніше. Це насправді не HTML, він набагато потужніший. Хоча те, що ви там пишете, закінчується як теги HTML у DOM.

Наступний крок - отримати наш додаток для обробки даних.

Обробка даних

У React є два типи даних: props і state . На початку різницю між ними дещо складно зрозуміти, тому не хвилюйтеся, якщо вам здасться трохи заплутаною. Як тільки ви почнете з ними працювати, стане легше.

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

Компонент може змінювати свій внутрішній стан безпосередньо. Він не може змінювати свій реквізит безпосередньо.

Спершу розглянемо реквізит.

Реквізит

Наш Helloкомпонент повністю статичний. Він передає одне і те ж повідомлення, незважаючи ні на що. Однак велика частина React - це багаторазове використання, тобто можливість написати компонент один раз, а потім повторно використовувати його в різних випадках використання. Наприклад, для відображення різних повідомлень.

Для досягнення цього типу багаторазового використання ми додамо реквізит. Ось як ви передаєте реквізит компоненту:

ReactDOM.render( , document.getElementById("root") ); 

Цей реквізит називається messageі має значення “мій друг”. Ми можемо отримати доступ до цього опису всередині компонента Hello, посилаючись this.props.message, наприклад:

class Hello extends React.Component { render() { return 

Hello {this.props.message}!

; } }

Як результат, це відображається на екрані:

Причина, по якій ми пишемо {this.props.message}фігурними дужками, полягає в тому, що нам потрібно сказати JSX, що ми хочемо додати вираз JavaScript. Це називається втечею .

So now we have a reusable component which can render whatever message we want on the page. Woohoo!

However, what if we want the component to be able to change its own data? Then we have to use state instead!

State

The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

So if you want the data in your app to change — for example, based on user interactions — it must be stored in a component’s state somewhere in the app.

Initializing state

To initialize the state, simply set this.state  in the constructor() method of the class. Our state is an object which in our case only has one key called message.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return 

Hello {this.state.message}!

; } }

Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

Changing the state

To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return 

Hello {this.state.message}!

; } }

Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.

Event Handlers

The next step is to create a button to click on, so that we can trigger the updateMessage() method.

So let’s add a button to the render() method:

render() { return ( 

Hello {this.state.message}!

Click me! ) }

Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.

Here’s the entire component:

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( 

Hello {this.state.message}!

Click me! ) } }

The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:

Congrats! You now have a very basic understanding of the most important concepts in React.

If you want to learn more, be sure to check out our free React course on Scrimba.

Good luck with the coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.