Начиная с create-react-app.
Запустите следующий процесс, чтобы получить шаблонный код, запустить приложение React в вашей системе и настроить среду.
- Перейти к терминалу на Mac (или терминал WSL в Windows)
- Перейдите в соответствующий каталог и выполните,
$ sudo npm install -g create-react-app $ npx create-react-app my-clock-app
3. Перейдите в каталог my-clock-app и выполните,
$ cd my-clock-app $ npm start
Теперь, когда у вас есть приложение React, работающее на локальном «https: // localhost: 3000», и ваша среда разработки настроена со следующим экраном, давайте начнем пошаговый процесс.
Очистите каталог
Удалите все файлы из каталога src и создайте следующие файлы в src,
- index.js
- style.css
Создайте компоненты каталога в src, где будут храниться все файлы, связанные с компонентами. В каталоге компонентов создайте следующие файлы:
- Title.js
- Main.js
- Clock.js
После создания всего каталог вашего проекта должен выглядеть следующим образом:
|- node_modules
|- public
|- src
|- components
|- Title.js
|- Main.js
|- Clock.js
|- index.js
|- style.css
|- package-lock.json
|- package.json
|- README.md
Теперь, когда мы настроили все наши файлы и каталог проекта на месте, давайте приступим к редактированию файлов и написанию кода для запуска и запуска приложения часов,
Редактирование файлов
Title.js
import React, {Component} from 'react';
class Title extends Component{
render(){
return (
<h1>{this.props.title}</h1>
)
}
}
export default Title
Здесь мы просто визуализируем заголовок страницы с выражением JSX ‹h1›,
реквизиты будут передаваться из текущего состояния приложения, которое мы будем вызывать в Main.js. Как вы поняли из кода, мы создаем компонент заголовка, который будет отображать заголовок с тегом HTML ‹h1›.
Clock.js
import React, {Component} from 'react';
import '../style.css';
class Clock extends Component{
constructor(props){
super(props);
this.state = {date: new Date()};
}
componentDidMount(){
this.timer = setInterval(
() => this.setState({date: new Date()}),
1000
);
}
componentWillUnmount(){
clearInterval(this.timer);
}
render(){
return(
<div class="clock">
<div class="timer">{this.state.date.toLocaleTimeString()}</div>
</div>
)
}
}
export default Clock
Здесь находится основная логика того, как должны работать часы. Первоначальное определение конструктора, который установит текущее состояние в объект Date. Здесь мы определим жизненный цикл компонента, компонент, который будет отображать информацию о часах в DOM.
componentDidMount() вызывается сразу после того, как компонент смонтирован (вставлен в дерево). setState запустит рендеринг и произойдет до того, как браузер обновит экран.
componentWillUnmount() вызывается непосредственно перед размонтированием и уничтожением компонента. Код выполнит необходимую очистку в этом методе.
Функция render() не изменяет состояние компонента, она возвращает тот же результат при каждом вызове и не взаимодействует напрямую с браузером.
И, наконец, мы возвращаем компонент Clock, чтобы его можно было импортировать и использовать при рендеринге DOM.
Main.js
import React, {Component} from 'react';
import Title from './Title';
import Clock from './Clock';
import '../style.css';
class Main extends Component{
render(){
return(
<div>
<Title title="Digital Clock"></Title>
<Clock clock="ClockData"></Clock>
</div>
)
}
}
export default Main
Компонент Main объединяет все модульные компоненты вместе как JSX.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Components/Main';
ReactDOM.render(<Main />, document.getElementById('root'));
index.js - это традиционная и актуальная точка входа для всех узловых приложений. Здесь, в React, у него просто есть код того, что и где рендерить. Итак, мы отрендерим наш Main компонент в корневом объекте DOM.
style.css
.clock{
align-self: center;
display: grid;
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 1000px;
height: 300px;
border: 2cm;
border-block-color: black;
}
h1{
text-align: center;
font-family: 'Courier New', Courier, monospace;
font-size: 7em;
}
.timer{
text-align: center;
background-color: aquamarine;
font-family: monospace;
font-size: 8em;
padding-top: 0.8em;
}
Запуск приложения,
Перейдите в каталог проекта в Terminal / bash и выполните следующую команду:
$ npm start
Приложение начнет работать на https: // localhost: 3000 /.
