Хотите научиться React как можно быстрее?
Чтобы предложить вам подробный обзор каждой темы React, которую вам нужно будет понять в 2022 году, я составил действительно удобную шпаргалку. Если вам понравилось, ждите моей следующей статьи. Хорошей новостью является то, что он удобен для начинающих, и я рассмотрел очень простую концепцию.
Игра начинается здесь!
Создайте React-приложение
Create React App обеспечивает удобную среду для изучения React и является самым простым способом начать создание нового одностраничного приложения в React.
// Create a new app
npx create-react-app hello-world
// Run the created app
cd hello-world
npm start
// http://localhost:3000Компоненты
Компоненты — это автономные и повторно используемые фрагменты кода. Они выполняют ту же работу, что и функции JavaScript, за исключением того, что они действуют независимо и возвращают синтаксис псевдо_HTML. Компоненты подразделяются на два типа: компоненты класса и компоненты функции. Этот курс будет посвящен функциональным компонентам.
Функциональный компонент
Нет необходимости импортировать. Реагировать от слова реагировать (начиная с React 17). JSX должен быть возвращен, если первая буква в верхнем регистре.
// React Component function App(){ return <h1>Hey, I'm Functional Component</h1> }export default App;
Два способа импорта компонента
Для каждого компонента будут созданы отдельные файлы. Каждый компонент должен быть экспортирован, а затем импортирован.
function Card(){
return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default Card;Этот компонент может быть импортирован следующими способами; вы также можете изменить его имя во время импорта.
import ICard from './Card'function App(){ return <ICard/> }
или экспорт имени…
export const Card = () => {
return <>
<div className="card">
<h1>I'm Card.. </h1>
</div>
</>
}
export default CardЗатем этот компонент может быть импортирован.
import {Card} from './Card'function App(){ return <Card/> }
Вложенные компоненты
Вложенный компонент является подкомпонентом содержащегося в нем компонента. Относительно этого родителя дочерний компонент позиционируется и отображается.
// Arrow function shorthand component const User = () => <h1>Khansa</h1>// Arrow function component const Message = () => { return <h1>Hello!</h1> }// Function component function App(){ return ( <> <Message /> <User /> </> ) }
Некоторые правила JSX здесь
Это синтаксическое расширение JavaScript. Мы рекомендуем использовать его вместе с React, чтобы указать, как должен выглядеть пользовательский интерфейс.
родительский элемент
Вернуть только один элемент (только один родительский элемент)
// not valid return <h1>Hello world</h1><h2>Hi!</h2>// valid with React fragment. return ( <React.Fragment> <h1>Hello World</h1> <h2>Hi!</h2> </React.Fragment> )// valid with fragment as Well. return ( <> <h1>Hello World</h1> <h2>Hi!</h2> </> )// Noted the parenthesis for multi-line formatting
Вместо класса используйте className. Объяснение. Единственная причина, по которой здесь используется className вместо class, заключается в том, что class является зарезервированным термином в JavaScript, а поскольку мы используем JSX в React, который является расширением JavaScript, мы должны использовать className вместо className. атрибут класса. Кроме того, все имена атрибутов должны быть в camelCase.
// not valid return ( <div class="card"> I'm Card.. </div> )// valid return ( <div className="card"> I'm Card.. </div> )
Закрыть каждый элемент также важно.
return (
<img src="image.jpg" />
<input type="text" placeholder="write your name..." />
)JSX-элементы
Как и стандартные HTML-компоненты, элементы React написаны таким же образом. Любой допустимый HTML-элемент может быть написан на React.
// valid
const input = <input type="text" />
// valid as well
<h1>I am Header</h1>
<p>I am paragraph </p>
<button>I am button</button>JSX-функции
Все ваши примитивы могут быть переданы в функции JSX.
// JSX Functions
const name = "khansa";
const age = 22;
const isHuman = true;
return (
<h1>My name is {name}. I am {age} year's old.</h1>
);Условный рендеринг JSX
Используя только оператор if:
import React from "react";
export default function Weather(props) {
if (props.temperature >= 20) {
return (
<p>
It is {props.temperature}°C (Warm) in {props.city}
</p>
);
} else {
return (
<p>
It is {props.temperature}°C in {props.city}
</p>
);
}
}Or
с помощью тернарного оператора
const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman ? <h1>My name is {name}. I am {age} year's old.</h1> : <p>I'm not here</p>}
);Используя значение истинности или оператор &&
const name = "khansa";
const age = 22;
const isHuman = true;
return (
{ isHuman && <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);Используя || оператор.
const name = "khansa";
const age = 22;
const isHuman = false;
return (
{ isHuman || <h1>My name is {name}. I am {age} year's old.</h1> || <p>I'm not here</p>}
);Характеристики
Входные значения компонента поступают из свойств. Они используются при рендеринге компонента и установке состояния (которое обсуждается в ближайшее время). Свойства компонента следует рассматривать как неизменяемые после того, как они были созданы.
<User firstName="Khansa" lastName="Mueen" age={22} pro={true} />Значение реквизита по умолчанию
Атрибут value в элементах формы будет иметь приоритет над значением в DOM во время процесса рендеринга React. Вы часто хотите, чтобы React указывал начальное значение для неконтролируемого компонента, но позволял будущим обновлениям быть неконтролируемыми.
const User = ({name, age, children}) => { return ( <h1>Name: {name} Age: {age}</h1> <p>{children}</p> ) }User.defaultProps = { name: 'Khansa', age: 22, }
Список с использованием оператора спреда
export const SpreadData = () => { const users = ["khansa", "Mueen", "Arshad"]const data = [...users, "Moiz"]return <div>Users data is: {data}</div>; };
Список с использованием карты
На веб-сайтах меню обычно отображаются с помощью списков, которые используются для упорядоченного отображения фактов. Списки в React можно создавать аналогично тому, как списки создаются в JavaScript.
const users = [ {id: 1, name: 'khansa', age: 22}, {id: 2, name: 'Arshad', age: 33}, {id: 3, name: 'Mueen', age: 47}, ] function App(){ return ( users.map(person => { return <Person name={person.name} age={person.age}/> }) ) }const Person = (props) => { return ( <h1>Name: {props.name}, Age: {props.age}</h1> ) }
Деструктуризация объекта реквизита
import React from "react" import Card from './component/Card'function App(){ return( <div className = "App"> <Card title="React Course" duration = "1 day"/> </div> ); } export default App;
Заключение
Это действительно основные понятия, которые я рассмотрел для новичков, и я должен вскоре закончить следующий раздел. Для получения дополнительных обновлений пишите мне в Twitter.
