Главная » React & Redux » Создание SPA-приложения "Учёт сотрудников"

Создание SPA-приложения "Учёт сотрудников"


10.11.2021, 09:31

Внешний вид создаваемого приложения "Учёт сотрудников"

CRUD - создание(create), чтение(read), модификация(update) и удаление(delete): четыре базовые функции, используемые при работе с базами данных

Все эти операции будут присутствовать в разрабатываемом приложении. Разрабатываемое приложение todo-подобное (вариация списка дел).

1. Создаём базу для будущего приложения (как это сделать смотри здесь)


Базовая структура установленного приложения после чистки "ненужных" вещей

2. Внутри папки src создаём папку components (папка для компонентов, составляющих приложение в целом)

3. В файле index.html подключим стили bootstrap (для базового оформления вида приложения) и иконки font-awesome, используя сервис cdnjs:

Код

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>

Базовые стили для файла index.css (импортируются в главном файле приложения, в index.js):

Код

body {
   margin: 50px 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
}

Анализ приложения

Внешне в структуре будущего приложения можно выделить 4 основные его части:

- шапка

- блок с фильтрами и строкой поиска

- список сотрудников

- форма для добавления нового сотрудника


Анализируем приложение, выделяя мысленно его основные части

В папке components создадим отдельные папки под каждый будущий компонент (названия записываем в стиле kebab-case) и внутри каждой из них одноименно названные js-файлы:

папка app-info (шапка) + файл app-info.js

папка app-filter (блок с фильтрами) + файл app-filter.js

папка search-panel (строка поиска) + файл search-panel.js

папка employers-list (список сотрудников) + файл employers-list.js

папка employers-list-item (отдельный элемент в списке) + файл employers-list-item.js

папка employers-add-form (форма для добавления нового сотрудника в список) + файл employers-add-form.js


Получившаяся структура папок проекта

Добавляем здесь же главную папку app и в неё файл app.js, в который мы будем импортировать данные из других папок.

Подобным образом создаётся структура папок при создании приложения по какому-то готовому макету.

Папка app

Внутри папки создаём файл app.css

Код

.app {
     margin: 0 auto;
     max-width: 1000px;
}

В файле app.js мы импортируем стили из app.css и создаём функцию App(), которая будет возвращать нам какую-то структуру, для оборачивающего блока div с помощью className задаём класс .app, описание которого ранее было указано в app.css

По умолчанию экспортируем наш компонент App.

Код

import "./app.css";

function App() {
     return(
         <div className="app">

         </div>
     )
}

export default App;

В файле index.js импортируем компонент App, при этом расширение .js для файла app.js можно не указывать.

Код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from "./components/app/app";

ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
);



В результате на странице сайта рендерится главный блок div с id = "root", а внутри него блок-обёртка с классом .app


Если открыть консоль разработчика, то в коде страницы можно увидеть, что к странице применились не только стили основного файла index.css, но и локальные стили папки app из файла app.css

Получаем логику работы:

- прописываем стили в файле стилей папки компонента

- импортируем эти стили в файле js папки этого компонента

Код

import "./app.css";

- внутри файла js папки компонента создаём функцию, возвращающую какую-то структуру (собственно, это и есть сам компонент)

Код

function App() {
     return(
         <div className="app">

         </div>
     )
}

- экспортируем компонент по умолчанию в файле js папки этого компонента

Код

export default App;

импортируем компонент в файле index.js, например:

Код

import App from "./components/app/app";

далее, в этом же файле, компонент размещается внутри ReactDOM.render(), после чего отображается на странице сайта

Код

ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
);


Папка app-info

Создаём в папке файл стилей app-info.css

Код

.app-info {
     padding: 25px;
     background-color: #3d5a80;
     border-radius: 4px;
     box-shadow: 15px 15px 30px rgba(0,0,0, .15);
     color: #fff;
}


В файле app-info.js импортируем стили css, создаём компонент AppInfo и экспортируем его по умолчанию:

Код

import './app-info.css';

const AppInfo = () => {
     return(
         <div className="app-info">
             <h1>Учёт сотрудников в компании N</h1>
             <h2>Общее число сотрудников: </h2>
             <h2>Премию получат: </h2>
         </div>
     )
}

export default AppInfo;

Импортируем компонент AppInfo в файле app.js и помещаем компонент AppInfo внутрь компонента App.

Код

import AppInfo from "../app-info/app-info";
import "./app.css";

function App() {
     return(
         <div className="app">
             <AppInfo/>
         </div>
     )
}

export default App;

За счёт того, что компонент App рендерится в главном файле index.js,

Код

ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
);

находящийся внутри него компонент AppInfo также появится на странице сайта.

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
React-приложение
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)