Создаем проект на React
React

Создаем проект на React

Опубликовано Автор: Дмитрий Поляков / Нет комментариев

Что же такое React?

React – очень интересный зверь. На сайте React https://reactjs.org/ сразу на главной странице, можно увидеть интересные примеры. Также на сайте есть хорошее “Введение”, в котором описывается создание игры на React.

Для разработки проекта нам потребуется:

  • node.js – для запуска сервера разработки
  • хороший текстовый редактор, например: Visual studio code:
    https://code.visualstudio.com
  • npm – который устанавливается вместе с node.js. https://www.npmjs.com

Итак создаем, я назвал проект todo, который позволит вести список дел и задач:

npx create-react-app todo

После этого запускаем:

cd todo
npm todo

Приложение запущено, можно открывать в редакторе и редактировать.

Настраиваем VisualStudioCode при помощи EditorConfig (не обязательно)

Для поддержки стилей кодирования, тем более если разработка ведется в команде, хорошо использовать EditorConfig https://editorconfig.org/

Добавляем в корень проекта файл:

.editorconfig

Можно с таким содержимым:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,json}]
indent_style = space
indent_size = 2

Также нужно установить плагин EditorConfig в VisualStudioCode

Добавляем плагин EsLint в VisualStudioCode (не обязательно)

Плагин помогает видеть ошибки при разработке, что существенно облегчает писать код. https://eslint.org/

Для установки в VisualStudioCode в плагинах просто ищем EsLint и нажимаем кнопку установки.

Добавляем файл в корень проекта:

.eslintrc.js

С таким содержимым:

module.exports = {
  "extends": "react-app"
}

Начинаем писать проект на React

Так как будем писать все с начала:

Удаляем ненужные файлики в проекте, в папке src app.css, logo.svg.

Редактируем App.js, после очистки получился такой:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Список задач</h1>
    </div>
  );
}

export default App;

В папке src добавим папку components, туда будем складывать все компоненты.

Туда перенесем файл App.js

Обновляем импорт в index.js

import App from './components/App';

Файл index.html – также можно почистить, устанавливаем нужный title

Подключаем Bootstrap

Чтобы хоть немного навести красоту подключим bootstrap – его сайт – https://getbootstrap.com

Я подключу через CDN. В файле index.html, добавляем строку, которую взял сайта bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Также на сайте https://www.bootstrapcdn.com можно скачать стили иконок в разделе Font Awesome, в inex.html соответственно добавляем:

<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Полезные расширения в браузер

Полезные расширения в браузер для отладки (я использую google chrome):

  • React Developer Tools
Дмитрий Поляков

Оставить комментарий