Testing React components

  Content description:

 In this post I'll describe how to test React component

Material UI - Select component and React

Content description:
In this post I'll describe how use Select component with React

By placing a label variable in the Select component, the label will not be displayed. Only an empty field will appear.

useContext hook

Content description:
In this post, I will describe how to use the useContext hook to display appropriate links depending on whether the user is already logged in or not.
If you are not logged in, the navigation bar will display Login and Register links, and after a successful login, a Logout link will be displayed.

Creating and editing a warehouse - React frontend for DRF API

Content description:
In this article, I'll show you how to create a new warehouse and edit an existing one using a front-end built in React (the back-end API was built in DRF).

First, I add the components of the pages responsible for creating a new warehouse and editing an existing one to the router in the main App.jsx component.

     
import WarehouseAddPage from "./pages/WarehouseAddPage"
import WarehouseEditPage from "./pages/WarehouseEditPage"
import { warehouseLoader } from "./components/Warehouse"

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<MainLayout/>}>
      <Route index element={<MainPage/>} />
      <Route path="/login/" element={<LoginPage/>} />
      <Route path="/logout" element={<LogoutPage/>} />
      <Route path="/register" element={<RegisterPage/>} />
      <Route path="/warehouses" element={<WarehousesPage/>} />
      <Route path="/warehouses/:id" element={<WarehousePage/>} loader={warehouseLoader} />
      <Route path="/add-warehouse" element={<WarehouseAddPage/>} />
      <Route path="/edit-warehouse/:id" element={<WarehouseEditPage/>} loader={warehouseLoader} />
      <Route path="*" element={<ErrorPage/>} />
    </Route>
  )
)

function App() {
  return (
    <RouterProvider router={router} /> 
  )
}

export default App