import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
function App() {
const {getUser, user, setUser} = useUser();
return (
<Router>
<Routes>
<Route path="/" element={<LoginForm user={user} getUser={getUser}/>}/>
<Route path="login" element={<LoginForm user={user} getUser={getUser}/>}/>
<Route path="dashboard/*" element={<PrivateRoute user={user}><DashboardRoutes user={user}/></PrivateRoute>}/>
</Routes>
</Router>
);
}
export default App;
const DashboardRoutes = ({user}) => (
<Routes>
<Route path="/" element={<Dashboard user={user}/>}/>
<Route path="acts" element={<ActsPage user={user}/>}/>
</Routes>
);
const PrivateRoute = ({user, children}) => {
if(localStorage.getItem('token')) {
return children;
}
return <Navigate to="/login"/>;
}DashboardRoutes() можно добавлять вложенные роуты.
if (__DEV__) {
console.warn('Some warning message');
}import React, {useState, useEffect} from 'react';
function SuperComponent() {
// хранилище для пунктов
const [checkedLanguages, setCheckedLanguages] = useState([]);
const [displayData, setDisplayData] = useState([]);
const languagesData = [
{ id: "1", name: "Javascript" },
{ id: "2", name: "Python" },
{ id: "3", name: "Java" },
{ id: "4", name: "Kotlin" },
{ id: "5", name: "Dart" },
{ id: "6", name: "C#" }
];
// фильтруем пункты
useEffect(() => {
if (checkedLanguages.length > 0) {
const newData = languagesData.filter(language => checkedLanguages.includes(language.name));
setDisplayData(newData);
} else {
setDisplayData(languagesData);
}
}, [checkedLanguages]);
function handleCheckboxChange(event) {
const languageName = event.target.value;
if (event.target.checked) {
setCheckedLanguages([...checkedLanguages, languageName]);
} else {
const newCheckedLanguages = checkedLanguages.filter(language => language !== languageName);
setCheckedLanguages(newCheckedLanguages);
}
}
return (
<div>
{checkedLanguages.map(language => (
<div key={language} className="selected-language">
<p>{language}</p>
</div>
))}
{languagesData.map(language => (
<div key={language.id} className="checkbox-wrapper">
<input
type="checkbox"
value={language.name}
onChange={handleCheckboxChange}
/>
<label>{language.name}</label>
</div>
))}
// отображаем отфильтрованные пункты
<div className="languages-list">
{displayData.map(language => (
<div key={language.id}>
{language.name}
</div>
))}
</div>
</div>
);
}
export default SuperComponent;Each child in a list should have a unique "key" prop
// ..
{items.map((i) => (
<React.Fragment key={i.id}>
<Item {...i}/>
</React.Fragment>
))}
// ..// ..
{items.map((i) => (
<Item key={i.id} {...i}/>
))}
// ..export const routes = [
{ path: '/', element: <MainPage /> },
{
path: '/posts',
element: <Posts />,
children: [
{ path: ':postId', element: <PostIdPage /> }
]
},
{ path: '/about', element: <About /> },
{ path: '/*', element: <Error /> },
]const renderRoutes = (routes) => {
return (
<Routes>
{routes.map((route, index) => (
<Route key={index} path={route.path} element={route.element}>
{route.children && renderRoutes(route.children)}
</Route>
))}
</Routes>
);
};export default function App() {
return (
<div>
{renderRoutes(routes)}
</div>
);
}import express from 'express';
import cors from 'cors';
import axios from 'axios';
const app = express();
app.use(cors());
app.get('/getBooks', async (req, res) => {
try {
const result = await axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi');
res.json(result.data);
} catch (error) {
console.error(error);
res.status(500).send(error);
}
});
app.listen(4000, () => {
console.log('Proxy server running on http://localhost:4000');
});{"proxy": "https://www.googleapis.com"}
На каком уровне нужно знать react для junior?
Какие есть отдельные важные темы?
Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range
const d = (name, blob) => {
const url = URL.createObjectURL(blob);
// code
}или все же стоит использовать
/audioList/audioList.tsx
audioList/audioList.tsxAudioList/AudioList.tsxКакие вообще есть плюсы и минусы при использовании того или иного способа.
И вот можете расписать, пожалуйста, ваше мнение насчет этого. Плюсы и минусы и вашу позицию максимально подробно, хочу все же разобраться, что лучше, что хуже и что приоритетнее
<button onclick={this.handleclick} ><button onClick={this.handleclick} >
CSS-IN-JS, CSS-modules
Сразу пишите в jsx
Как подключаете less/sass?