10 принципов и концепций React, которые должен знать каждый разработчик React

React — это не просто; здесь так много концепций и принципов, которые необходимо знать. Добро пожаловать в 10 концепций, терминов и принципов React, которые должен знать каждый разработчик React.

1. create-react-app

Это один из самых популярных способов начать работу с React-приложением. Это довольно сложный CLI; он более продвинутый, чем вы думаете, но, по сути, именно так мы создаем новое приложение:

npx create-react-app [name of your app] 
Войти в полноэкранный режим Выйти из полноэкранного режима

В качестве бонуса; если вы хотите добавить typescript, это очень просто:

npx create-react-app [name of your app] --template typescript
Войти в полноэкранный режим Выйти из полноэкранного режима

Как я уже говорил, есть и другие возможности. Ознакомьтесь с их официальной документацией.
Как только вы создадите новое приложение React, вы начнете писать что-то под названием JSX вместо HTML.

2. JSX

Это расшифровывается как Javascript и XML. По сути, это способ вставить javascript и динамические значения в наш HTML. JSX — это фундаментальная вещь, которая делает React декларативным фреймворком. Теперь вы знаете, что такое JSX, и готовы приступить к созданию компонентов.

3. Компоненты на основе классов

Это старый вид компонентов (появился в React 16.8); они используют классы для определения компонентов.

class Clock extends Component{
// Application Code //
}
export default Clock
Вход в полноэкранный режим Выход из полноэкранного режима

Проблема с компонентами на основе классов заключается в том, что они устарели и очень сложны для изучения новичками. Это приводит нас к другому типу компонентов.

4. Функциональный компонент

Эти компоненты определяются простой функцией и являются более современными для написания (появились в React 17).

function clock(){
// application data //
}
export default Clock
Вход в полноэкранный режим Выход из полноэкранного режима

Эти компоненты проще и чище в написании, но есть одно большое ограничение. Функциональные компоненты сами по себе не могут делать большинство важных вещей, которые могут делать компоненты на основе классов, например, хранить состояние и т.д. Это подводит нас к другой концепции.

5. Крючки

Поскольку функциональные компоненты не могут делать большинство вещей, которые могут делать компоненты на основе классов, например, хранить данные и т.д., мы можем использовать крючки. Крючки — это способ расширить функциональность функционального компонента. Наиболее важным из них является —, что является еще одним понятием.

6. useState хук

Это, несомненно, самый важный хук React, без него функциональные компоненты бесполезны. Его функция заключается в создании состояния (то есть реактивных данных) для функциональных компонентов.

const [sampleState,setSampleState] = useState('I am a sample state')
Вход в полноэкранный режим Выход из полноэкранного режима

Сам по себе хук usestate не является полноценным. Поэтому его часто используют вместе с другими хуками.

7. useEffect хук

Этот хук — не что иное, как хук useEffect. Этот хук очень запутанный, но в основном он используется для запуска кода при определенном условии.

useEffect(() =>{
// some logic
},[condition])

Войти в полноэкранный режим Выход из полноэкранного режима

8. props

Теперь мы рассмотрели, как компоненты хранят внутренние данные (useState); давайте посмотрим, как компоненты обмениваются данными друг с другом; они делают это с помощью props. Давайте вкратце рассмотрим, как они работают.

function body(){
<nav color='red' /> // the color is the prop
}
// now let's receive that data inside the nav component
function nav(props){ // destructing is possible but let's keep it simple
const color = props.color
}
Вход в полноэкранный режим Выход из полноэкранного режима

9. Компонент высшего порядка

Компонент высшего порядка — это продвинутая техника в React, которая используется для надстройки и повторного использования компонентов. Она принимает компонент в качестве аргумента и возвращает что-то другое.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Вход в полноэкранный режим Выход из полноэкранного режима

10. ключ

Чтобы эффективно отобразить список данных, мы присваиваем уникальный идентификатор каждому элементу списка. Это называется ключом.

Заключение

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

Оцените статью
devanswers.ru
Добавить комментарий