Самый простой способ настроить среду для запуска приложения на react.js это установить готовый пакет Create React App от разработчиков Facebook
Просто потому. что вместе с ним мы получим готовый, настроенный сервер, Babel интерпретатор, Webpack для сборки и другие плюшки, в виде свободы в написании кода без префиксов для кросбраузерности и настроенную среду для тестирования и сборки приложения. В вашей среде будет все, что вам нужно для создания современного приложения React:
Для начала нам потребуется установленный Node.js с менеджером пакетов npm или yarn.
Теперь, когда у вас на машине установлен пакет create-react-app глобально, вы можете с легкостью его развернуть в любой папке для создания нового react-приложения. Это очень удобно. Я делаю так:
Надеясь, что вам было понятно и я не слишком утомил вас подробными объяснениями. Дело в том, что информации по React.js действительно много, но порой она больше касается теории, или опускает какие-то моменты, которые авторам кажутся очень простыми и само-собой разумеющиеся, но это осложняет жизнь начинающим пользователям. Да, и приятно, когда нужные, простые заметки всегда под рукой.
Подписывайтесь на мой блог и не забывайте поделиться, чтобы не потерять, если вам понравилось.
Следующая часть - React (2) - разбить на компоненты
Почему приложение Create React App?
Просто потому. что вместе с ним мы получим готовый, настроенный сервер, Babel интерпретатор, Webpack для сборки и другие плюшки, в виде свободы в написании кода без префиксов для кросбраузерности и настроенную среду для тестирования и сборки приложения. В вашей среде будет все, что вам нужно для создания современного приложения React:
- React, JSX и ES6.
- Языковые дополнительные функции за пределами ES6, такие как spread operator объектов.
- Dev-сервер, который накладывает на обычные ошибки.
- Импортируйте файлы CSS и изображений непосредственно из JavaScript.
- Autoprefixed CSS, поэтому вам не нужны -webkit или другие префиксы.
- Сценарий сборки для объединения JS, CSS и изображений для производства с sourcemaps.
Для начала нам потребуется установленный Node.js с менеджером пакетов npm или yarn.
Чтобы проверить, установлен ли на ваш компьютер Node.js, а npm - пакеты к нему устанавливаются по умолчанию, то введите в КС - командной строке, или bash -
node -v.Должны получит версию ноды. Например: v8.5.0
- Идем на сайт gitHub - create-react-app
или его русскоязычный аналог - create-react-app-rus - Устанавливаем приложение глобально. В КС - командной строке (или Bash) вводим:
npm install -g create-react-app - Ждем окончания установки и переходим в директорию (команда cd), где будет создаваться папка нашего приложения. В КС набираем:
create-react-app my-app
В данном случае - my-app - название папки вашего приложения. - Открываем папку нашего проекта my-app в редакторе и удаляем из папки public все файлы кроме index.html
- В файле index.html удаляем все и добавляем самый простой код страницы:
- В папке src оставляем только файл index.js с кодом, где будет например такой код (файл полностью):
- Сохраняем и переходим непосредственно в наше приложение - >
cd my-app
A для запуска сервера на локальном хосте 3000 в КС набираем:
npm start
Появится сообщение, что сайт запущен на локальном хосте по адресу -http://localhost:3000 - Перейдите по этому адресу и вы должны увидеть вот такую страницу
- Остановить сервер - Ctrl + C
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react'
import {render} from 'react-dom'
function Article() {
const body = <section>Footer</section>
return(
<div className="hello" style={{color:"red"}}>
<h2>title</h2>
<section>body</section>
{ body }
<h3 style={{color:"red"}}>
"creation date : "{ (new Date()).toDateString()}
</h3>
</div>
);
}
function App() {
return (
<div>
<h1>App Name</h1>
<Article/>
</div>
);
}
render(<App/> ,document.getElementById('root'))
Создание нового и открытие старого приложения.
Теперь, когда у вас на машине установлен пакет create-react-app глобально, вы можете с легкостью его развернуть в любой папке для создания нового react-приложения. Это очень удобно. Я делаю так:
- выбираю директорию в проводнике и нажимаю правую кнопку мыши.
- В выпадающем меню выбираю - Git Bush Here
- Далее все, как в примере выше, с пункта 3, или просто делаю
npm start
для запуска уже созданного приложения на локальном хосте.
Надеясь, что вам было понятно и я не слишком утомил вас подробными объяснениями. Дело в том, что информации по React.js действительно много, но порой она больше касается теории, или опускает какие-то моменты, которые авторам кажутся очень простыми и само-собой разумеющиеся, но это осложняет жизнь начинающим пользователям. Да, и приятно, когда нужные, простые заметки всегда под рукой.
Подписывайтесь на мой блог и не забывайте поделиться, чтобы не потерять, если вам понравилось.
Следующая часть - React (2) - разбить на компоненты
Комментариев нет:
Отправить комментарий