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

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

Facebook Instagram Youtube

Тема 2. React.js Quiz, Temperature App's

Quiz App
Temperature App
Теми по React.js

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

Створення Quiz React.js проєкту, введення команд в консоль

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

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

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

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

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

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

Видаляємо непотрібні файли, чистимо 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 та файлів в ній

В папці src створюємо такі файли js:
Quiz.js
question.js

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

Подивитись стилізацію App.css
Стилізація App.css

body {
margin: 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;
}
* {
font-family: "Verdana", cursive, sans-serif;
color: #ffffff;
}

body {
background-color: #7cc6fe;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.app {
background-color: #252d4a;
width: 450px;
min-height: 200px;
height: min-content;
border-radius: 15px;
padding: 20px;
box-shadow: 10px 10px 42px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-evenly;
}

.score-section {
display: flex;
font-size: 24px;
align-items: center;
}

/* QUESTION/TIMER/LEFT SECTION */
.question-section {
width: 100%;
position: relative;
}

.question-count {
margin-bottom: 20px;
}

.question-count span {
font-size: 28px;
}

.question-text {
margin-bottom: 12px;
}

.timer-text {
background: rgb(230, 153, 12);
padding: 15px;
margin-top: 20px;
margin-right: 20px;
border: 5px solid rgb(255, 189, 67);
border-radius: 15px;
text-align: center;
}

/* ANSWERS/RIGHT SECTION */
.answer-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

button {
width: 100%;
font-size: 16px;
color: #ffffff;
background-color: #252d4a;
border-radius: 15px;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
border: 5px solid #234668;
cursor: pointer;
}

.correct {
background-color: #2f922f;
}

.incorrect {
background-color: #ff3333;
}

button:hover {
background-color: #555e7d;
}

button:focus {
outline: none;
}

button svg {
margin-right: 5px;
}

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

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

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 React from 'react';
import './App.css';

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

    </div>
  );
}
export default App;
import React, { useState } from 'react';
const Quiz = ({ questions }) => {
  return (
    <div className='app'>
     
    </div>
  );
};
export default Quiz;
const questions = [
    {
      questionText: '...?',
      answerOptions: [
        { answerText: '...', isCorrect: false },
        { answerText: '...', isCorrect: true },
      ],
    },
  ];
export default questions;

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

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

Створення Temperature Control React.js проєкту, введення команд в консоль

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

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

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

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

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

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

Видаляємо непотрібні файли, чистимо 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 та файлів в ній

В папці src залишаємо лише такі файли:
App.js
App.css
index.js

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

Подивитись стилізацію App.css
Стилізація App.css
body {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
.app-container {
  height: 400px;
  width: 300px;
  background: #2b5870;
  border-radius: 20px;
  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}
.temperature-display-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
}
.temperature-display {
  display: flex;
  border-radius: 50%;
  color: #ffffff;
  height: 220px;
  width: 220px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  border: 3px #ffffff solid;
  transition: background 0.5s;
}
button {
  border-radius: 100px;
  height: 80px;
  width: 80px;
  font-size: 32px;
  color: #ffffff;
  background: rgb(105, 104, 104);
  border: 2px #ffffff solid;
}
button:hover {
  background: rgb(184, 184, 184);
  cursor: pointer;
}
button:focus {
  outline: 0;
}
.button-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.neutral {
  background: rgb(184, 184, 184);
}
.cold {
  background: #035aa6;
}
.hot {
  background: #ff5200;
}

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

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

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 React, { useState } from "react";
import './App.css';
 
function App() {
  return (
    <div className='app'>
 
    </div>
  );
}
export default App;

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

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

Відкрити Тему 9

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

Відкрити Тему 1
Copyright © 2023 Courses WebSkill | Powered by WebSkill
Scroll to Top