React Archives - WPTom.com - Coding Services

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

React / By Tom / 1 minute of reading

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. …

Prevent React applications from 404 errors when refreshing the page on inner URLs Read More »

Fetch a JSON file in React using context

React / By Tom / 2 minutes of reading

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 …

Fetch a JSON file in React using context Read More »

What is useEffect hook in React?

Leave a Comment / React / By Tom / 2 minutes of reading

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 …

What is useEffect hook in React? Read More »

Generate unique keys in React

React / By Tom / 2 minutes of reading

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 …

Generate unique keys in React Read More »

React’s useState – how does it work?

React / By Tom / 1 minute of reading

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 …

React’s useState – how does it work? Read More »

Create a template using React router and SASS

React / By Tom / 2 minutes of reading

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 …

Create a template using React router and SASS Read More »