Введение
Я хотел бы дать обзор того, что представляет собой контент, это в основном простое приложение-счетчик, которое увеличивает и уменьшает значение на 1, а также имеет возможность устанавливать и сбрасывать значение до нуля, чего я достиг с помощью некоторых Реакция перехватывает зависимости, позволяет глубже погрузиться в определение некоторых концепций и их реализаций. Реакция, как мы все знаем, представляет собой среду JavaScript с открытым исходным кодом и библиотеку, разработанную Facebook. Она используется при создании веб-приложения вместе с более интерактивным пользовательским интерфейсом. , чище и эффективнее, чем ванильный JavaScript
Предпосылки
- на его ноутбуке должна быть установлена последняя версия Node.js.
- интегрированная среда разработки (IDE) очень важна, потому что именно здесь происходит волшебство, будь то Vscode, Atom или любой другой редактор по вашему выбору принимается.
- установите Git на свои устройства, которые так много используются разработчиками по всему миру.
Создайте свое приложение React с помощью терминала
- откройте командную строку, это может быть PowerShell, git в зависимости от случая.
2. создайте новую папку, используя командную строку "mkdir" имя_реакт_проекта и "cd" для имя_реакт_проекта.
3. установите приложение реакции с помощью командной строки «npx create-react-app my-app», которая затем установит необходимые зависимости, которые я использовал для создания приложения счетчика.
$ mkdir sample $ cd sample $ npx create-react-app counter-sample
Содержание
- useReducer: яиспользовал useReducer в качестве управления состоянием для управления сложным состоянием вместо хука useState, а затем определял различные действия, включая увеличение, уменьшение, установку и сброс состояния.
export const ACTIONS={
INCREMENT: 'INCREMENT',
DECREMENT:"DECREMENT",
RESET:"RESET",
SETVALUE:'SETVALUE'
}
const Reducer =(state,action)=>{
switch(action.type){
case ACTIONS.INCREMENT:
return {count:state.count +1}
case ACTIONS.DECREMENT:
return {count:state.count -1}
case ACTIONS.SETVALUE:
return {count:action.payload}
case ACTIONS.RESET:
return {count:0}
default:
return {state}
}
}
export default Reducer
Теперь давайте поговорим о реализации обработчика событий, который включает в себя Increment, Decrement, Set и Reset, и это стало возможным благодаря различным случаям, которые мы сделали в нашей функции useReducer, хук useRef используется для очистки ввода после получения значения. Условный оператор в decrementHandler помогает предотвратить переход счетчика к отрицательному значению.
const Counter = () => {
const InputRef = useRef()
const Decrement =()=>{
if(Initialstate.count===0 ){
return
}
dispatch({type:ACTIONS.DECREMENT})
}
const Increment =()=>{
dispatch({type:ACTIONS.INCREMENT})
}
const Reset =()=>{
dispatch({type:ACTIONS.RESET})
}
const SetValue =(event)=>{
event.preventDefault()
dispatch({type:ACTIONS.SETVALUE,payload:Number(event.target.number.value)})
InputRef.current.value=''
}
2. React router: я установил последнюю версию React Router с помощью командной строки (npm install react-router-dom@6), которую я использовал для навигации по разным маршрутам/страницам. моего приложения, ниже приведен фрагмент кода для настройки моего маршрутизатора в моем приложении.
function App() {
return (
<div>
<Routes>
<Route path='/' element={<NavBar/>}/>
<Route path='/counter' element={<Counter/>}/>
<Route path='/errorpage' element={<ErrorPage/>}/>
<Route path='/error' element={<Errorboundary/>}/>
</Routes>
</div>
);
}
export default App;
который я затем обернул с помощью ‹BrowserRouter›‹BrowserRouter/› в моем файле index.js.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
3.Панель навигации: я реализовал панель навигации, чтобы можно было легко переходить на разные страницы с помощью маршрутизатора LINK, если быть точным. Я также использовал хук useRef, чтобы сделать панель навигации более отзывчивой, переключая класс. Взгляните на фрагмент кода и поймите лучше. Я также установил материальную иконку пользовательского интерфейса при создании гамбургера с помощью командной строки npm install @mui/icons-material @mui/material @emotion/styled @emotion/react.
import React,{useRef} from 'react'
import CloseIcon from '@mui/icons-material/Close';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';
import {Link} from 'react-router-dom';
import './Nav.css'
const NavBar = () =>{
const NavRef = useRef()
const shownavlink =()=>{
NavRef.current.classList.toggle('responsive-nav')
}
return (
<>
<header className= 'header'>
<h1>MICKY</h1>
<nav ref={NavRef}>
<Link to='counter'>Counter</Link>
<Link to='/errorpage'>Errropage</Link>
<Link to='error'>Errorboundary</Link>
<button
className='nav-btn nav-close'
onClick={shownavlink}>
<CloseIcon/>
</button>
</nav>
<button
className='nav-btn'
onClick={shownavlink}>
<MenuOpenIcon/>
</button>
</header>
<div className= 'about-app'>
<h1>
welcome to our site
</h1>
</div>
</>
)
}
export default NavBar
4. Внедрение SEO: SEO расшифровывается как «поисковая оптимизация». Проще говоря, это означает процесс улучшения вашего сайта, а также повышения его видимости для пользователей при поиске любых тем, связанных с вашей, в любой поисковой системе, такой как Google и Bing. вот несколько шагов о том, как я реализовал это в своей работе
3.1. Я установил его с помощью командной строки npm install -save react-helmet-async. ниже приведен фрагмент кода о том, как реализовать
вот ссылка, если вы хотите узнать больше о SEO
<Helmet>
<title>AppCounter</title>
<meta
name='description'
content='the parent root of our Counter App for Altschool Assignment'/>
<link ref='canonical' href='/'/>
</Helmet>
4. React-Error-boundary: перехватывает ошибку JavaScript и отображает резервный пользовательский интерфейс вместо отказавшего дерева компонентов. он был установлен с использованием npm i react-error-boundary. всегда есть возможность проверить границу ошибки, нажав кнопку, а также возможность восстановить границу с помощью кнопки
const Errorboundary = () => {
const [explode, setExplode] = useState(false);
const test={
description:'Errorboundary section'
}
function Bomb() {
throw new Error("💥 CABOOM 💥");
}
return (
<>
<div >
<Link to='/' className='link'>Home</Link>
</div>
<div className='container-errorboundary'>
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => setExplode(false)}
resetKeys={[explode]}
>
<h5>{test.description.toUpperCase()}</h5>
<h4>Error will be thrown once button is clicked</h4>
<div>
{explode ? <Bomb /> : null}
<button onClick={()=>setExplode(state=>!state)}>Click Explode</button>
</div>
</ErrorBoundary>
</div>
</>
)
}
export default Errorboundary
5. Erropage: я реализовал страницу ошибки, которая должна в случае, если пользователь щелкнет неверный URL-адрес или страницу, он будет уведомлен с помощью резервного пользовательского интерфейса вместе с сообщениемстраница не найдена и есть возможность вернуться на домашнюю страницу, чтобы восстановить приложение.
import React from 'react'
import {Link} from 'react-router-dom';
const ErrorPage = () => {
return (
<>
<div >
<Link to='/' className='link'>Home</Link>
</div>
<div className='errorpage-cont'>
opps!!!
page not found
</div>
</>
)
}
export default ErrorPage
6. Размещение/развертывание сайта. Я разместил свое приложение с помощью netlify, но сначала отправил свою работу на github, что позволяет мне размещать ее на netlify. Узнайте больше о том, как размещать на netlify, перейдя по ссылке. Хотя я боролся со своим дизайном, но, может быть, у меня получилось что-то хорошее, все еще надеясь на улучшение с помощью постоянной практики, моя работа был оформлен с помощью vanilla css.
ниже приведена ссылка на демонстрацию моего приложения и репозитории github.
