Подорожі в Інтернеті з MERN (MongoDB, Express.js, React та Node.js) #1

ВСТУП ДО ІНСТРУМЕНТІВ ДЛЯ ФРОНТЕНДУ

Розширення для встановлення:

1. prettier
2. beautify css/sass
3. ES7 React/Redux/GraphQL/React-Native snippets

npm install -g create-react-app  
npx create-react-app .  
npm install react-router-dom node-sass

Видаліть ці 3 файли, оскільки вони не потрібні

1. створіть папку assets -> images

Завантажте scss тут, у папці bootstrap

[

Завантаження

Завантажте Bootstrap, щоб отримати скомпільований CSS і JavaScript, вихідний код або включіть його у ваш улюблений пакет…

getbootstrap.com

](https://getbootstrap.com/docs/4.3/getting-started/download/?source=post_page-----79d4c77c6d8a--------------------------------)

Видаліть файл у scss

Перейменуйте на style.scss

App.js  

import 'assets/scss/style.scss';

1. створіть папку elements (компонент React) -> Button

.scss -> стилі

.test -> для тестування

.js -> головний файл

rfc (tab) -> автоматично створює визначення компонента React

1. створіть папку pages/LandingPage.js

2. створіть папку parts/Header.js

для blade

1. створіть конфігурацію

jsconfig.json -> полегшує виклик файлів при імпорті

{  
 "compilerOptions" : {  
 "baseUrl": "src"  
 },  
 "include": ["src/**/*"]  
}

компонент кнопки

Цей код створює компонент кнопки, який можна використовувати для різних потреб у додатку React.
Завдяки цьому компоненту ми можемо створювати звичайні кнопки, кнопки, що виглядають як посилання, або навіть посилання, що ведуть на інші сторінки.

index.js

import React from "react";  
import { Link } from "react-router-dom";  
import propTypes from "prop-types";  

export default function Button(props) {  
 const className = [props.className];  
 if (props.isPrimary) className.push("btn-primary");  
 if (props.isLight) className.push("btn-light");  
 if (props.isLarge) className.push("btn-lg");  
 if (props.isSmall) className.push("btn-sm");  
 if (props.isBlock) className.push("btn-block");  
 if (props.hasShadow) className.push("btn-shadow");  

 const onClick = () => {  
 if (props.onClick) props.onClick();  
 };  

 if (props.isDisabled || props.isLoading) {  
 if (props.isDisabled) className.push("disabled");  
 return (  

 {props.isLoading ? (  
 <>  

 Loading...  

 ) : (  
 props.children  
 )}  

 );  
 }  

 if (props.type === "link") {  
 if (props.isExternal) {  
 return (  

 {props.children}  

 );  
 } else {  
 return (  

 {props.children}  

 );  
 }  
 }  

 return (  

 {props.children}  

 );  
}  

Button.propTypes = {  
 type: propTypes.oneOf(["button", "link"]),  
 onClick: propTypes.func,  
 href: propTypes.string,  
 target: propTypes.string,  
 className: propTypes.string,  
 isPrimary: propTypes.bool,  
 isLight: propTypes.bool,  
 isExternal: propTypes.bool,  
 isDisabled: propTypes.bool,  
 isLoading: propTypes.bool,  
 isSmall: propTypes.bool,  
 isLarge: propTypes.bool,  
 isBlock: propTypes.bool,  
 hasShadow: propTypes.bool,  
};

Частина 1: Функція onClick

• Ця функція викликається, коли кнопка натискається.
• Перш ніж виконати функцію props.onClick (яка надається користувачем компонента), ця функція перевіряє, чи існує props.onClick.

Частина 2: Логіка для Loading або Disabled

• Якщо кнопка відключена або завантажується → відображається елемент ``

Частина 3: Якщо кнопка є посиланням (внутрішнім чи зовнішнім)

• Зовнішнє посилання → використовуємо ``.
• Внутрішнє посилання → використовуємо ``.

Частина 4: Звичайна кнопка

• Якщо кнопка звичайна → використовуємо ``

index.test.js

import React from "react";  
import { render } from "@testing-library/react";  
import { BrowserRouter as Router } from "react-router-dom";  

import Button from "./index";  

test("Кнопка не повинна бути активною, якщо встановлено isDisabled", () => {  
 const { container } = render();  

 expect(container.querySelector("span.disabled")).toBeInTheDocument();  
});  

test("Повинна відображатися індикація завантаження/спінер", () => {  
 const { container, getByText } = render();  

 expect(getByText(/loading/i)).toBeInTheDocument();  
 expect(container.querySelector("span")).toBeInTheDocument();  
});  

test("Повинна відображатися тега ", () => {  
 const { container } = render();  

 expect(container.querySelector("a")).toBeInTheDocument();  
});  

test("Повинна відображатися компонент ", () => {  
 const { container } = render(  



 );  

 expect(container.querySelector("a")).toBeInTheDocument();  
});

• Кнопка, для якої встановлено isDisabled, отримає клас disabled.
• Кнопка, для якої встановлено isLoading, буде відображати спінер завантаження.
• Кнопка з type="link" і isExternal рендерить елемент ``.
• Кнопка з type="link", яка знаходиться всередині Router, рендерить компонент `` для внутрішньої навігації.

Додавання або зміна кольору тексту

створення CSS класу для кольору тексту на основі списку кольорів (градація сірого).
Отже, замість того, щоб вручну прописувати всі кольори один за одним, цей код допомагає швидко створювати багато правил для кольорів.

кроки:

1. Додайте новий колір в Color System рядок 6 -> src/variable.scss
2. Додайте його в map (наприклад, $blues)
3. Додайте цикл @each

scss/utilities/_text.scss

тут додається функція $colors і $grays

наступна частина — створення хедера, так~

Перекладено з: Web Travel With MERN(MongoDB, Express.js, React, dan Node.js) #1