Coding Tech Life: create-react-app

Showing posts with label create-react-app. Show all posts

Tailwind CSS: Dark and Light Theme

I am using Tailwindcss in my react app. One of the requirement was to provide light and dark theme for the web app. This can be achieved easily with Tailwind.

1. Specify colours and styles for light and dark theme. For light theme just use class-name as it is and for dark theme, use dark:class-name.

eg: bg-white dark:bg-gray-700

Switch between white and dark theme

To switch between the themes, there are many methods. I chose using class. Using class, need to mention darkMode: "class" in tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
  content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./public/index.html"],
};

Then we can add a button, on click add/remove class-name "dark" to/from <html> to toggle between dark between light theme.

document.documentElement.classList.toggle("dark");

document.documentElement.classList.add("dark");

document.documentElement.classList.remove("dark");

Note: To keep the theme selection, we can store the value to localstorage and retrieve it on load for better user experience.

Reference: https://tailwindcss.com/docs/dark-mode

React Router V6 (react-router-dom) Dynamic Routing

React Router V6(react-router-dom) Dynamic Routing

I was trying to implement dynamic routing with router v6 similar to that with v4 .

eg in v4

const routes = [
  { path: '/', key:"home", component: Home },
  { path: 'page1',key:"page1", component: Page1  },
  { path: 'page2', key:"page2" component: Pag2  }
];

<Route path={variable} component

<Router>
  <Switch>
     {routes.map(page => (<Route key={page.key} path={page.path} component={page.component} />))} 
  </Switch>
</Router>

This can be achieved in router v6 using useRoutes

Router.tsx

import { useRoutes } from "react-router-dom";

import Home from "../pages/Home";
import Page1 from "../pages/Page1";
import Page2 from "../pages/Page2";

export default function Router() {
  return useRoutes([
    { path: "/", element: <Home /> },
    { path: "/page1", element: <Page1 /> },
    { path: "/page2", element: <Page2 /> },
  ]);
}

App.tsx

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./helpers/Router";
function App() {
  return (
    <div>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </div>
  );
}

export default App;

References:

https://reactrouter.com/en/main/hooks/use-routes

React: Create React App not working in Internet explorer

React: Create React App not working in Internet explorer

I faced this issue today. When I created a new react application using CRA. It was not working in internet explorer browser. I solved it by using polyfills. I followed below steps

1. installed react-app-polyfill

yarn add react-app-polyfill --save

2. imported it in index.js (should be first line)

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

3. Updated browsers in package.json

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

4. Deleted node_modules

5 yarn and yarn start. Worked !!!

Create React Application with Antd framework - step form example

Create React Application with Antd framework - Step form example

Github Link : https://github.com/codingtechlife/cra-antd

create-react-app - Create ReactJs Application Tutorial

I have been trying to learn ReactJs and create some sample applications with it. Today found create-react-app (https://github.com/facebookincubator/create-react-app) which will help us to generate sample reactjs application without knowing the reactjs. Only thing we need to do are,

1. Install latest nodejs version.

2. Install create-react-app

npm install -g create-react-app

3. Generate reactjs application using create-react-app

create-react-app myApp

4. Run the application

cd myApp

npm start

The application will be started at http://localhost:3000.