Вивчіть основи React.js - для початківців

Сьогодні я збираюся висвітлити основи світу React. Якщо ви щойно розпочали свою подорож у ReactJS, то я б сказав, що ви потрапили в потрібне місце. У цій статті я спробував висвітлити основи React дуже просто. Сподіваюся, наприкінці статті ви знатимете основні поняття React.

Давайте розпочнемо.

ReactJS - потужна бібліотека

Як ви вже могли читати в багатьох місцях, React - це бібліотека для створення веб- та мобільного інтерфейсу. Його розробив Facebook.

ReactJS керується компонентами. Все є компонентом, який відповідає за певну функціональність. Ви пишете маленькі, маленькі компоненти, а потім поєднуєте їх разом, утворюючи великі компоненти. Це робить код більш читабельним і зрозумілим. Особливості, які роблять React потужним та красивим:

  1. Він використовує віртуальну концепцію DOM замість реальної DOM.
  2. Читаність коду через JSX. Використання JSX викликає у вас відчуття, що ви пишете веб-програми (надає вигляд JavaScript, як HTML).
  3. Він також використовує SSR (SSR допомагає в SEO).

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

Віртуальний DOM ReactJS

Віртуальний DOM є копією реального DOM. На відміну від реального DOM, віртуальний DOM виконує мінімальну кількість маніпуляцій DOM, щоб підтримувати компоненти в актуальному стані. Він оновлює лише ту частину, яку оновлено.

Маніпуляція з DOM дуже проста. Ось наочна демонстрація роботи віртуального DOM:

  1. Віртуальний DOM є копією справжнього DOM.

2. Коли дані змінюються в компоненті, весь інтерфейс повторно відображається у віртуальній DOM.

3. Тоді відбувається порівняння між реальним DOM і віртуальним DOM.

4. Після того, як обчислення зроблено, реальний DOM оновлюється із змінами.

Ми говорили про одну з чудових особливостей React - це віртуальний DOM, але зачекайте! Яким був JSX у другій функції (вище пункти на об’єкті)? Можливо, вам було цікаво, що це було, яке його відношення до React і як це дає нам відчуття від написання веб-програм ...

Зараз цього разу зануримось у пул JSX.

JSX

Перш ніж рухатися вперед, давайте подивимось на наведений нижче код:

class FirstComponent extends React.Component { render() { return ( My First Component ); } }
class FirstComponent extends React.Component { render() { return ( React.createElement('span',{className: 'customSize'}, 'My First Component') ); } }

У першому прикладі функція візуалізації виглядає так, ніби вона повертає HTML-код, але це JSX. Перший приклад являє собою версію JSX з другої . JSX - це розширення JavaScript, яке надає коду JS HTML-вигляду.

Якщо ви подивитесь на другий приклад, React.createElement використовується для створення елемента реакції, який представляє компонент реакції. Другий аргумент може бути нульовим або порожнім, якщо для елемента не потрібні реквізити або атрибути. Третій аргумент визначає, що має бути всередині нього (як і будь-який інший елемент React, скажімо, з атрибутом 'src').

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

ReactJS без JSX:

React.createElement("div", null, React.createElement("img", {src: "image.jpg", alt: "Random photo"}), React.createElement("h3", null, "Hello React"));

ReactJS з версією JSX:

Hello React

Переглядаючи наведений вище приклад, ви можете зрозуміти, що я говорив щодо читабельності коду. Наскільки легко читати код за допомогою JSX, так? Я думаю, цього достатньо для JSX, і я сподіваюся, що тепер ви зможете краще зрозуміти силу JSX у світі React.

Примітка - Браузери не можуть читати JSX. Отже, ми маємо перевести його в JavaScript за допомогою JSX-трансформаторів (скажімо, babel), щоб браузер міг зрозуміти.

Тепер ми знаємо, що таке JSX. Але я хотів би, щоб ви перейшли до попередньої картинки, де я писав, що React - це все про компоненти. Він керується компонентами. Оскільки компоненти є будівельними блоками React, давайте дослідимо їх.

ReactJS Heart - Компоненти

Ну, можливо, ви стикалися з наведеним нижче кодом, як створювати компоненти під час свого дослідження на React:

class MyStatefulComponent extends React.Component { state = { title: '' } componentDidMount() { console.log('Component mounted') } render() { return {this.props.name} ; } }

Якщо ви пишете свій компонент вищевказаним способом, він називається компонентом Class / Stateful / Container . Якщо ви думаєте, що це єдиний спосіб створення компонентів, подумайте ще раз. Так, існує інший спосіб створення вашого компонента, що призводить до функціональних / без стану / презентаційних компонентів. Перш ніж рухатися вперед, давайте подивимося, як пишуться функціональні компоненти:

const MyStatelessComponent = props => {props.name} ;

Тепер ви можете задатися питанням, в чому різниця між ними і як вам слід вибрати, який тип створювати. Отже, давайте зануримось у пул компонентів Stateful та Stateless.

Бездержавні (або презентаційні чи функціональні) компоненти - це ті компоненти, які не мають жодного стану (не знаєте про стан? Не хвилюйтеся, я поясню це пізніше). Вони використовуються для презентації, наприклад, як ви хочете, щоб ваш компонент виглядав.

A component is a plain JavaScript function which takes a prop as an argument and returns a React element (see above example). Its name is self explanatory — it has no state. It has no lifecycle methods (like componentDidMount method etc. which you might have read during your research on React tutorials).

Stateful (or container or class) components are those components which have state — a source of data (you can call this.setState inside it), lifecycle methods (can use to make an API call). It is a JavaScript class that extends your React component which means React creates instances of it. React initialize the component class in order to use lifecycle methods, for initializing the state and more.

Wait… now you might wonder which one is better, and what to choose? You can answer this question if you have this question in your mind on how to separate the logical part from the presentational one. Yes, it is strange that one question answers another question, but you will soon get why I said this.

As you might have seen in other React tutorials, they use class for creating their components. They put the logical as well as presentational parts in the same component which makes that component more complicated and bulky.

So, if you want to separate your logical from presentational components, then the component class is best suited for logical stuff like fetching data from the API or data changes. On the other hand, if your component is focused on presentational/functional things, the component should look good.

In short, I would say use both. Use the component class when you need one of the things (lifecycle methods, state) and for presentation, use a functional component.

That’s all about components.

Now, we have a picture of how we can write components, but I have not told you how we can manage data in them. I think without data, components would be useless. So, we will have a look at how we can manage a component’s data (like fetching data from an API, React ‘state’ story, setting the state and so on).

Let’s start.

Props

‘Prop’ is shorthand for properties, and this is the one source of data in our component. It can be used to pass data to different components. Wait! I would like you to go back where I told you about presentational and class components. I told you to use presentational components to manage how your component should look, and container components for handling data and all that. Correct!

So the ‘prop’ is the one which we can use to make the connection between these two types of components. Yes, you can use props for passing data from a container component to a presentational component, where the presentational component will render the view with your dynamic data. Please have a look at the below code to better understand:

import {ButtonView} from './button.presentation'; class MyContainerComponent extends React.Component { state={ text : 'Submit' } render() { return (  ) } } 
export const ButtonView=({btnText})=>( {btnText} )

Like the above way (using props — ‘btnText’), you can separate the logical part from the presentational part. The other feature of props is that they are read only, i.e. they are immutable. They are not going to modify inside the component in which they are passed. The data flow is also unidirectional — which gives us one way data binding (unlike Angular).

But, there might be cases where we want to change the data (like in some event by the user and so on). Hence, for this case, ‘State’ comes into the React market. Let’s dive into it.

State

As I told you, props are immutable whereas state is for mutable data — that is data that will change in response to certain events. So, if you want to change your data value, then store it in the state. State are objects that store your component’s data. To give a better picture of how state is defined and how to use it, here is an example:

class LoginContainer extends React.Component { constructor(props) { super(props); this.state = { userName: "", }; } onFilluserName = event => { this.setState({ userName: event.target.value, }); } render() { return ( 

You can see from the above example that state represents objects where your component’s data are stored. They are initialized inside a constructor. You can access the state using ‘this.state’. This is the way of using state for rendering your data in your component.

But, I told you that the thing which makes state the heart of your components is its mutable behaviour. Yes, now the point comes as to how we can change the state’s property. The answer is using ‘this.setState’ (please have a look at the above example). Using this.setState, we have changed our data value when the user types.

In short, props and state are both sources of data, but their usage and behaviour is different. Whenever there is a case where your data may change, use ‘state’ for that — else ‘prop’ is good choice.

That’s all about the basics of the React world. I hope you have a better understanding of the basics.

There is a very important part of a class component that I haven’t discussed: lifecycle methods. Yes, lifecycle methods are another critical part of ReactJS, but what they are and why they’re important will be in my next article!

Thanks for reading.

Original text