Category: React

  • Prevent React applications from 404 errors when refreshing the page on inner URLs

    This code is an Apache web server configuration file written in Apache’s mod_rewrite syntax. It’s commonly used in React applications to prevent 404 errors when refreshing the page on inner URLs. In summary, this code tells Apache to rewrite all requests that aren’t for an existing file, directory or symbolic link to the “/index.html” file.…

  • Fetch a JSON file in React using context

    Assuming you have a data.json file in your project that contains an array of objects with some data: You can create a context to manage the data in your React app using the createContext function from the React library. Here’s an example: In the example above, we created a context called DataContext and a provider…

  • What is useEffect hook in React?

    useEffect is a built-in React hook that allows you to manage side effects in functional components. Side effects are actions that occur outside the scope of a component and are not related to rendering, such as making an API call, adding an event listener, or setting a timer. The useEffect hook takes two arguments: Here’s…

  • Generate unique keys in React

    by

    in

    One common way to do this is by using the index of the current item in the iteration, in combination with a prefix or suffix that is unique to the component. For example, consider the following code: In this example, each li element is given a key based on the index of the item in…

  • React’s useState – how does it work?

    by

    in

    useState is a hook in React that allows you to add state to your functional components. It returns an array with two elements: the current state value, and a function that updates it. Here’s an example to help illustrate its usage: In this example, we’re using useState to store the number of times a button…

  • Create a template using React router and SASS

    Here is an example of the full code for each of the files described above: src/Routes.js src/App.js src/Home.js src/About.js src/Contact.js src/sass/main.scss Please note that this is a basic example and you may want to add more functionality and styles to your components as needed. Also, Make sure that you’ve installed the necessary packages react-router-dom and…