React.js – Тема 1 – Courses WebSkill

Тема 1. Створення React.js, проєкт ToDoList

Створення нового React.js проєкту

Інформація
Команди консолі

Створення нового React.js проєтку, якщо необхідна додаткова інформація перегляньте вкладку "Тема по React.js"

D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку

npx create-react-app todolistappreact - створення нового React.js проєкту

npx create-react-app - сама команда створення

todolistappreact - назва папки в якій буде проєкт

cd todolistappreact - переходимо в створену папку

Встановлення додаткових бібліотек

Інформація
Команди консолі

Встановлюємо ядро, іконки та компонент Реакту для іконок в нашому проєкті

Встановлення основного пакету
npm i --save @fortawesome/fontawesome-svg-core

Встановлення пакету безкоштовних іконок
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

Встановлюємо компонент Font Awesome React
npm i --save @fortawesome/react-fontawesome@latest

Запускаємо наш додаток
npm start

Форматування і підготовка

Інформація
Видалення рядків

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли:
setupTests.js
reportWebVitals.js
logo.svg
index.css
App.test.js

З файлу index.js видаляємо такі рядки
import './index.css';
import reportWebVitals from './reportWebVitals';
reportWebVitals();
Та коментарі:
// If you want...

З файлу App.js видаляємо
import logo from './logo.svg';
Тег <img> i <p>

Створення папки components та файлів в ній

Інформація

Створюємо нову папку components всередині папки src
В папці components створюємо такі файли js:
EditTodoForm.js
Todo.js
TodoForm.js
TodoWrapper.js
TodoWrapperLocalStorage.js

Скопіюйте стилізацію нижче та замініть її в файлі App.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  background: #8758ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.App {
  text-align: center;
}
 
h1 {
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
}
 
.TodoWrapper {
  background: #1A1A40;
  margin-top: 5rem;
  padding: 2rem;
  border-radius: 5px;
}
 
.TodoForm {
  width: 100%;
  margin-bottom: 1rem;
}
 
.todo-input {
  outline: none;
  background: none;
  border: 1px solid #8758ff;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 300px;
  color: #fff;
}
 
.todo-input::placeholder {
  color: #ffffff4d;
}
 
.todo-btn {
  background: #8758ff;
  color: #fff;
  border: none;
  padding: 0.55rem;
  cursor: pointer;
}
 
.Todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #8758ff;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  cursor: pointer;
}
 
.fa-trash {
  margin-left: 0.75rem;
}
 
.completed {
  color: #c5aeff;
  text-decoration: line-through;
}

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Правильно імпортуйте усі файли та бібліотеки

В кожній вкладці прописані імпортовані бібліотеки та файли, перевірте чи вірно ви їх написали

ВАЖЛИВО! Не імпортуйте все одразу, буде багато помилок у зв'язку із пустим кодом всередині файлів. Спочатку перегляньте відео.

import './App.css';

import { TodoWrapper } from './components/TodoWrapper';

import React, {useState} from 'react';

import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';

import { faTrash } from '@fortawesome/free-solid-svg-icons';

import React, {useState} from 'react';

import React, { useState } from "react";

import { Todo } from "./Todo";

import { TodoForm } from "./TodoForm";

import { v4 as uuidv4 } from "uuid";

import { EditTodoForm } from "./EditTodoForm";

import React, {useState, useEffect} from 'react'

import { TodoForm } from './TodoForm'

import { v4 as uuidv4 } from 'uuid';

import { Todo } from './Todo';

import { EditTodoForm } from './EditTodoForm';

uuidv4();

Заготовки файлів для додатку

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

import './App.css';

import { TodoWrapper } from './components/TodoWrapper';

function App() {

return (

</div>

);

}

export default App;

import React, {useState} from 'react';

export const EditTodoForm = {

return (

)

}

import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';

import { faTrash } from '@fortawesome/free-solid-svg-icons';

export const Todo {

return (

)

}

import React, {useState} from 'react';

export const TodoForm {

return (

)

}

import React, { useState } from "react";

import { Todo } from "./Todo";

import { TodoForm } from "./TodoForm";

import { v4 as uuidv4 } from "uuid";

import { EditTodoForm } from "./EditTodoForm";

export const TodoWrapper = () => {

return (

);

};

import React, {useState, useEffect} from 'react'

import { TodoForm } from './TodoForm'

import { v4 as uuidv4 } from 'uuid';

import { Todo } from './Todo';

import { EditTodoForm } from './EditTodoForm';

uuidv4();

export const TodoWrapperLocalStorage = () => {

return (

)

}

Слідкуйте за нами:

Тема 1. Створення React.js, проєкт ToDoList

Створення нового React.js проєкту

Встановлення додаткових бібліотек

Форматування і підготовка

Створення папки components та файлів в ній

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Правильно імпортуйте усі файли та бібліотеки

Заготовки файлів для додатку

Скріншоти усіх файлів в нашому додатку

Відео повністю готового додатку

Посилання на Тему 9. Введення в React.js з попереднього курсу