- please note that my clone is not 100% exact as original website, for reusability and simplicity purposes. Header scrolling animation also might not work as I am using new css features, that are experimental for now
- React-router-dom - for client-side routing and SPA
- Vite - React new generation bundler
- i18next - for localization
- Google materials - for icons (check CDN links in html root file)
- React Hooks I have used
- Issues in production of this application
I have used following router's hooks:
- useNavigate(): - App component
For me it seems somewhat like a Gulp
This is what I have understand for now:
- It reads scss
- install it: npm install react-i18next i18next --save
- create languages folder
- create i18n file (for config) and write following:
// Languages import
import global_en from "./english/english.json"
import global_ru from "./russian/russian.json"
import global_tj from "./tajik/tajik.jso
// i18next
import { initReactI18next } from "react-i18next"
import i18n from "i18nex
// i18n initalization
i18n.use(initReactI18next).init({
lng: localStorage.getItem("language") || "english"
debug: true,
resources: {
english: {
translation: global_en,
},
russian: {
translation: global_ru,
},
tajik: {
translation: global_tj,
},
},
})
export default i18n;
- wrap main.tsx with
I18nextProvider(andi18nconfig file as its prop). - in header.tsx or app.tsx, where language-switcher lies add these:
// i18next hook
import { useTranslation } from "react-i18next";
...
// handle languages
const { i18n } = useTranslation()
const locLang = localStorage.getItem("language") || i18n.language
const [lang, setlang] = useState(locLang)
const changeLang = (language: string) => {
setlang(language)
localStorage.setItem("language", language)
i18n.changeLanguage(language)
}
...
// switcher
<select
className="header__switchers__languages"
value={lang}
onChange={(e) => changeLang(e.target.value)}
>
<option value="english">EN</option>
<option value="russian">RU</option>
<option value="tajik">TJ</option>
</select>
...
<NavLink to="/news">{t("header.news")}</NavLink>
...
- Add CDN in HTML head tag (here I have for outlined, sharp and rounded icons):
<!--Google icons CDN outlined-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<!--Google icons CDN sharp-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<!--Google icons CDN rounded-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<title>softclub</title>
- Search for desired icon on official website and paste icon in your html. Google material icons are usually as span html tags.
- useState - used to store values (instead of variables, for it won't work in React DOM)
- useEffect -
- used to add and remove classes (just like
element.classList.addorelement.classList.removein vanilla) in Header.tsx. - to run a function based on dependecy change in App.tsx
- used to add and remove classes (just like
- useLocation - is like window.location that we have in vanilla (for now I do not see any difference, although it is recommended to use useLocation)
- useRef - used to select rendered html elements
- Header box-shadow animation (scroll) is not working , therefore I have commented that part of my code
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent