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.