В этой статье мы разберём основы работы с фреймворком React.js, или быстрый старт на этой библиотеки.
Также посмотрите статью «Топ 9 библиотек для JavaScript», думаю она вам будет интересна.
Установка React.JS:
Для начала как и любую библиотеку нужно установить и подключить, для этого можете использовать CDN:
1 2 | <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> |
Для проверки можете сделать вот этот не большой код:
1 2 3 4 | ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); |
Здесь мы используем метод render(), объекта ReactDOM, первым параметром идёт JSX объект (Об этом чуть позже), второй параметр, это элемент куда вставлять объект из первого параметра.
В целом вам больше не чего не надо, для подключения, но на мой взгляд, если использовать React.JS, то только если нужно создать SPA приложение, для этого введите эти команды:
1 2 | npm install -g create-react-app npx create-react-app name-app |
Первая команда используется для скачивания библиотеки которая нужна, чтобы создать приложение, вторая она создаёт SPA приложение, в качестве параметра name-app, используется название которое вы хотите выбрать для проекта.
Так же, если вы используете Webpack или другой сборщик проекта, то для установки нужно использовать вот эту команду:
1 | npm install --save react react-dom |
На этом с установкой всё.
Работа с React.JS:
Теперь перейдём к работе с различными компонентами, тут не будет подробного описании всего и вся, но самые основы буду, это же быстрый старт на React.js.
JSX:
Если грубо говоря, то JSX это HTML Элементы которые вы можете использовать прямо в коде, вот пример.
1 2 3 4 5 6 7 | const name = 'Вася Пупкин'; const element = <h1>Привет, {name}</h1>; ReactDOM.render( element, document.getElementById('root') ); |
Как можете заметить, в одну переменную мы положили обычную строку, а в другая в себе хранит JSX элемент, так же прямо там мы вызвали первую переменную, таким образом у нас выводится «Привет, Вася Пупкин».
Вы можете внутри фигурных скобок в JSX использовать кроме переменных и другие вещи, например: функции или выражения.
Стоит знать, что если вы делаете JSX из нескольких HTML элементов, возвращаете его из функции или строите его на разных строках, то стоит обернуть его в круглые скобки, например так:
1 2 3 4 5 | const element = ( <h1 className="greeting"> Hello, world! </h1> ); |
Так же у вас есть возможность внутри JSX использовать условия, первое это обычная тернарная операция, второе это аналог if в JS, их нужно делать внутри фигурных скобок:
1 2 3 4 5 | {arrey.length > 0 && <h2> Длинная массива: {arrey.length}. </h2> } |
Это всё самое важное что стоит знать про JSX.
Компоненты и свойства:
Теперь перейдём к созданию своих компонентов, так же мы рассмотрим что такое props, если вы создали SPA приложение на React, то в папке «src», создайте папку «components», в ней можете создать файл «Сomponent.js», вот что я в нём напишу:
1 2 3 4 5 | import React from 'react'; export default function Hello() { return <h1>Hello World!</h1> } |
Как можете заметить, если вы хорошо знаете стандарт ES6, то мы экспортируем функцию Hello, для того чтобы её импортировать в папку «App.js».
Наверное уже понятно что нам нужно перейти в файл «App.js», и в нём импортировать нашу переменную.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import logo from './logo.svg'; import './App.css'; import Hello from './components/Сomponent' function App() { return ( <> <Hello /> </> ); } export default App; |
Примерно так должен выглядеть ваш файл «App.js», после того как вы использовали только созданный новый компонент, в качестве его название вы должны использовать название функции, которое возвращает.
Ещё вы можете передавать таким элементам различные атрибуты, для этого надо использовать пропсы, модифицируем функцию Hello:
1 2 3 4 5 | import React from 'react'; export default function Hello(props) { return <h1>Hello {props.name}</h1> } |
То есть мы во функции добавляем обязательный параметр, его можно назвать как угодно, но я назвал props, он будет хранить объект всех данных которые мы передали как атрибуты, в нашем случаем мы используем данные из атрибута name.
Теперь немного изменим функцию App, вот как мы её сделаем.
1 2 3 4 5 6 7 8 9 10 | function App() { const name = "Vova"; return ( <> <Hello name={name} /> </> ); } |
Тут мы создали переменную с нашем именем которое мы хотим передать, и передаём его в атрибуте name, вот что у нас получилось:
Всё работает, таким образом вы можете передавать всё что вы хотите, от обычных строк и чисел, до функция и даже объектов.
Состояние:
Дальше что стоит знать обязательно, так это про состояние, если грубо говоря, то это такие переменные специально для React.
Тут наверное у многих возникнет вопрос, зачем нужны состояние, если есть обычные переменные, всё дело в том, что при изменение состояния автоматически вызывается функция render(), и заново перерисовывает страницу, что позволяет динамически изменять страницу.
В качестве примера работы со состоянием я буду использовать хуки, так как react сейчас перешёл на функциональное программирование, а хуки для этого и нужны, чтобы не использовать классы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import React, {useState} from 'react'; function App() { const [count, setCount] = useState(0); const increment = () => setCount(count + 1) return ( <div> <p>Вы кликнули {count} раз</p> <button onClick={increment}> Нажми на меня </button> </div> ); } |
Давайте не много разберём этот код, в начале нам нужно импортировать хук useState(), который нужен для создания состояния, при использование в качестве параметра делаем то состояние которое нам нужно, это может быть простое значение или объект.
Хук нам возвращает массив с двум элементами, первый это состояние которое мы назначили, второе это функция для его изменения, она нужна для того чтобы при изменение состояния происходил рендер, ну и для безопасности, передаём эти значения переменным count и setCount.
Ещё создаём стрелочную функцию increment(), которая увеличивает count на один и вызываем её при клики на кнопку, вот что получилось:
Ещё стоит упомянуть, что для изменения состояния лучше использовать предыдущие состояния, для наглядности изменю increment().
1 2 3 | const increment = () => setCount(prev => { return prev + 1; }) |
Но главное для чего используется предыдущие состояния, так это для изменения массива и объектов, вот не большой пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const [objects, setObjects] = useState({ title: "Интересный заголовок", time: "20:12", }); const [array, setArray] = useState([1, 2, 3, 4, 5]); setObjects(prev => { return { ...prev, title: "Новый заголовок" } }) setArray(prev => { return { ...prev, [1]: 10 } }) |
Здесь мы создаём один объект и массив, когда меняем объект, просто меняем ключ который нам надо или добавляем новое значение по новому ключу, самое главное не забыть в начале ...prev, это значит что он будет совмещать новые данные со старыми.
С массивом всё примерно также, только указываем в квадратных скобках индекс который хотим изменить.
Вывод:
В этой статье вы прочитали быстрый старт на React.js, узнали самые основы работы, этого вам хватит чтобы делать простые сайты, если он вас заинтересовал, то посмотрите документацию.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...