Tag: reactjs

How to import .tsx file .js file ?

STEP 1: Install TypeScript and Type Definitions

Open your terminal in the project root and run the following command

npm install --save-dev typescript @types/react @types/react-dom

STEP 2: Create or Update tsconfig.json

If you don’t have a tsconfig.json, create one in your project root.
If you have empty one , add the following basic configuration:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "resolveJsonModule": true
  },
  "include": [
    "src"
  ]
}

STEP 3:  Use .tsx Components in .js Files

Now you can import your .tsx files in your .js files as usual as follows

import MyComponent from '../path/to/MyComponent.tsx';

Note:

  • If you use Create React App or Vite, most of this is already set up.
  • You can mix .js, .jsx, .ts, and .tsx files in your project.
  • If you want TypeScript type checking in .js files, set "checkJs": true in tsconfig.json.

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!

How to call Multiple Apis on the same page or component using createBrowserRouter ?

If we want to call multiple APIs when loading a particular page or component using createBrowserRouter, the best place to do that is in the loader function of the route.

Genarally we use createBrowserRouter as follows.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from 'Components/Dashboard';
import dashboardLoader from 'loaders/dashboardLoader';


const App = () => {
     
    const router = createBrowserRouter([
         {
          path: "/dashboard",
          element: <Dashboard />,
          loader: dashboardLoader,
         }
   ])

    return <RouterProvider router={router} />
}

Here in the above example, the best place to call multiple APIs is dashboardLoader. In the similar way we use a loader of any specific page where we will call required number of API calls.

Error creating ./public/runtime-env.js: Error: Could not generate runtime config. Check your .env format! error command failed with exit code 1.

This Error usually occurs when you have issues in your .env file and try to run npm start or yarn start.

We need to take care of the following things to fix the above error.

  1. Ensure .env file not empty.
  2. Ensure correct Key, Value format.
  3. No Duplicate Keys.
  4. No unnecessary spaces, quotes.

Showing Greeting Message using ReactJS

In ReactJS, To Display Personalized Greeting message (like “Good Morning”, “Good Afternoon” ) based on the current time, we need to follow the following code.

import React, { useEffect, useState } from 'react';
import { Typography } from '@mui/material';

const Greeting = ({ user }) => {
    const [greeting, setGreeting] = useState('');
    const [color, setColor] = useState('');

    const updateGreeting = () => {
        const hour = new Date().getHours();

        if (hour < 12) {
            setGreeting('Good Morning');
            setColor('#FFA726');
        } else if (hour < 17) {
            setGreeting('Good Afternoon');
            setColor('#29B6F6');
        } else if (hour < 20) {
            setGreeting('Good Evening');
            setColor('#9AB7BC');
        } else {
            setGreeting('Good Night');
            setColor('#0FFDE4');
        }
    };

    useEffect(() => {
        updateGreeting();
        const interval = setInterval(updateGreeting, 60 * 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <Typography variant="h6">
            <span style={{ color, fontWeight: 500 }}>{greeting}</span>{' '}
            <span>{user.name || user.role}</span>
        </Typography>
    );
};

export default Greeting;

const [greeting, setGreeting] = useState(”) ==> This holds the current Greeting string (like “Good Morning”, “Good Afternoon” ).

const [color, setColor] = useState(”) ==> This holds the current color for the Greeting Text.

const hour = new Date().getHours() ==> Gives current hour. Based on the current hour, it will compare with 12, 17, 20 and sets different greeting message and associated color.

useEffect() ==> For the first render calls updateGreeting(), and displays the Greeting message. Then we used setInterval(updateGreeting, 60 * 1000), to update the Greeting message for every 1 minute. Finally this line return () => clearInterval(interval), cleans up the interval when the component unmounts to prevent the memory leaks.

You need to enable JavaScript to run this app – After deploying React App to firebase

After deploying React App to Firebase, In Network calls we will see 200 status code but in Response Preview, we will see the message as “You need to enable JavaScript to run this app” . I too faced this issue after deploying my React App to firebase.

In my case issue is with the BASE_URL. Go to your firabse settings and check the config details.

Cross-check with your network call base url with the config details like databaseURL, authDomain. If your network call BASE_URL is not matching with the config details, update your BASE_URL and then deploy the app again. I have fixed my issue by following these steps. If it is not fixing in your case, please follow the proper deployment guidelines.

You can deploy your React App to Firebase by using these instructions : https://learnersstore.com/2024/12/29/deploying-reactjs-app-to-firebase