Это небольшая шпаргалка по React, которая поможет работать быстрее и на новом уровне. React мощная штука для построения интерфейсов, не смотря на то, что уже есть не менее интересные и востребованные аналоги. Тем не менее приступим.
Предполагается, что NodeJS у вас уже установлен. Вы каким-то чудом догадались попасть в командную строку node.js и открыли папку в которой предполагаете создавать свой проект. Пусть это будет так
- если надо меняем диск C:/D:
- Заходим в папку cd myProject
1. Создание приложения React
npx create-react-app my-app | эта команда создаст нам новый проект, который мы превратим в популярное приложение под названием my-app. После нажатия на Enter придётся подождать пока NPX при помощи NPM скачает и раскидает по папкам все пакеты, которые нам понадобятся для разработки React приложения.
Увидели Happy Hacking? Всё супер. Поехали дальше
2. Запускаем наше приложение
npm start | Эта команда запустит нам сервер и откроет наше приложение в браузере. При этом вызывать её надо находясь в папке проекта.
3. Наша первая компонента и варианты записи
Компонента это функция, которая будет выводить разметку на экран. Записывать можно тремя способами. И так от простого к сложному.
Способ 1
function App(){
return(
<p>Hello React</p>
);
}
Способ 2
const App = () => {
return(
<p>Hello React</p>
);
}
Способ 3
class App extends React.Component {
render(){
return(
<p>Hello React</p>
);
}
}
Во всех трёх случаях компонентой будет строка <p>Hello React</p>. Это если кратко и просто. Или все теги, находящиеся в return, если там больше чем просто <p>Hello React</p>
Таким образом мы описали нашу компоненту или тег <App />, которую должны экспортировать выше при помощи команды export default App;
Все компоненты можно фигачить в одном файле, но это не прилично. Правильнее всего выносить каждую компоненту в свой файл. И есть мнение, что чем больше файлов вы создадите, тем тоньше сможете настроить своё приложение.
4. Экспорт и импорт компонент в Reacte
Для того, чтобы мы могли использовать свои компоненты внутри других наших компонент надо научиться их экспортировать и импортировать. Для этого в начале файла с компонентой в которую мы хотим импортировать другйю пишем, где Header это компонента
import Header from './Components/Header/Header';
затем описываем текущую компоненту в которою при помощи тега <Header /> вставляем импортируемую компоненту.
class App extends React.Component {
render(){
return(
<Header />
<p>Hello React</p>
);
}
}
export default App; // после этого мы можем экспортировать текущую компоненту <App />
5. Как подключить JSX в наших компонентах?
Наша компонента не будет работать если в начале файла мы не подключим JSX. Делается это следующей командой.
import React from 'react';
Мы импортируем react, как и все остальные компоненты, которые хотим использовать внутри нашей.
6. Как работать с CSS в ReactJS
Первым делом подключаем нашу таблицу стилей в начале файла с компонентой для которой пишем свой CSS.
import './app.css'; //файл со стилями лучше держать рядом с файлом в котором описана компонента. Для каждой компоненты у нас будет своя таблица стилей. Так круто.
теперь мы можем применять наши классы из таблицы стилей app.css. Для этого внутри "тега" надо прописать
className="app"
или
<header className="app"></header>
Получается тоже самое, что и в HTML, только вместо class будет className.
7. Установка пакетов на примере React-router-dom
Для того, что бы установить новый пакет в React необходимо ввести в консоли
npm i react-rourer-dom -save
save пропишет пакет в файле package.json и это позволит скачав файл с git'а просто проинсталлировать его командой npm install
8. BrowserRouter. Или почему Route не работает?
Для того что бы наш Router заработал и открывался тот компонент, который мы хотим, надо привязать его к Route.
<BrowserRouter>
<Route exact path='page1' component='comp1' /> exact говорит Route, что надо отображать comp1 строго если адрес page1. Если адрес /page1/2 то comp1 отображаться не будет.
<Route path='page2' component='comp2' /> Если адрес /page2/test2 то comp2 отображаться будет так как не указали exact.
</BrowserRouter>
Всё хорошо, но не очень. Заметили? Мы не можем передавать в наши компоненты comp1 и comp2 какие либо props.
Что бы у нас появилась такая возможность надо переписать немного наш код, а именно заменить component на render
<BrowserRouter>
<Route exact path='page1' render={ () => <comp1 name="test" age="test2"/>} />
<Route exact path='page2' render={ () => <comp2 name="test1" age="test1"/>} />
</BrowserRouter>
Как видите, теперь мы смогли вписать props
9. Ссылки в React. <NavLink to="#"><NavLink>
Для того, что бы создать ссылку при переходе по которой не будет срабатывать перезагрузка страницы, необходимо использовать следующую конструкцию
<NavLink to="page1"><NavLink>
<NavLink to="page2"><NavLink>
10. Присваиваем ссылке свой класс active
import s frome './ourCss.module.css'; - импортируем нашу таблицу стилей
<NavLink to="page1" activeClassName="s.active"><NavLink> где s объект нашей таблицы стилей из которой мы используем класс active
11. Как работать с элементами и их свойствами. Кнопки, input и так далее. ref={newTaskElement}, React.createRef()
Для того, что бы получить значение/свойство input или любого другого DOM элемента необходимо создать на него ссылку. делается это командой
let nameLink = React.createRef();
в самом элементе мы так же должны прописать имя ссылки которая будет к нему относиться.
<input type="text" ref={nameLink}>
Всё. Теперь мы можем получить свойства этого элемента в своём коде. Выглядит это так:
let text = NameLink.current.value;