Skip to content

I am developing this package for reduce the time to setup the react.js project. Here some npm package are preinstalled so that you don't have to install it again and again and folder structure are organized. So try this package.

smmunna/react-starter-template-smmunna

Repository files navigation

Start with your React.js Starter Template

Jumpstart your project instantly with a pre-configured React.js setup.
Reduce the total time to setup the project

Starter Template Features

🔰Installed these (Packages):

  1. React with Vite [Visit Link]
  2. React Router v6 setup [Visit Link]
  3. Tailwind CSS (Configuration) setup [Visit Link]
  4. axios + axios interceptor setup [Visit Link]
  5. Tanstack query/ React Query setup [Visit Link]
  6. react-helmet-async setup [Visit Link]
  7. React Icons setup [Visit Link]
  8. rc-pagination added [Visit Link]
  9. react-lazy-load-image-component [Visit Link]
  10. react redux toolkit [Visit Link]
  11. react-getquery-params [Visit Link]
  12. json-server [Visit Link]

New Component Features components/ui

  • <PageTitle title={}/> — component takes a props as a page title
  • <Image src={} alt={} effect={} height={} width={} transitionDelay={''}/> — component takes these props, default effect: blur, 'black-and-white, opacity, and transitionDelay: set any seconds like 1s,2s,3s....
  • <Spinner/> — component used for any Loading state.
  • <ErrorPage/> — component used for if any error found in any routes.

New CSS Features utils/css

  • h1, h2, h3, h4, h5 styles hasbeen added
  • all-center className added. Following this: <div className="all-center"><div>All Item will be center</div></div>

Folder Structures

  • apisecureApi.jsx contains the axios interceptors configuration, just use your server URL
  • assets — Handle this folder for work with images/icons/others....
  • componentsui folder has some specific components, you can modify if you want
  • hooksdemoHooks/useData.jsx see the demos, for fetching the data from the server
  • layoutMainLayout.jsx follow this for any time of layout you want to make
  • liblib if you want to make any library, then you can make here
  • pages — Inside the you can make any page
  • redux — State management tool hasbeen added
  • router — All of your routes will be here
  • shared — Login, Register, Header, Footer are available . You can customize
  • utilscss/Fixed.css some fixed are available, you can customize. Inside this you can keep any js file.

How to use this Starter Template

  1. Clone this repository from this github repository
  2. Goto that project and run npm install
   git clone https://github.com/smmunna/react-starter-template-smmunna.git
  1. Change your folder name/project name according to your own
  2. Go to the project diretory
   git remote rm origin
  1. Now run
   npm install 

Now Start your Project use the commandline

 npm run dev

Following URL Project will run-

Requirements

  1. Node.js version with v18+
  2. VS Code Editor with recommended Extension
    1. JavaScript
    2. ES7+React/Redux/React Native
    3. Tailwind CSS
  3. Optionally React Developer Tools

Scripts

  • npm run dev for starting this project
  • npm run build Compiles and bundles the app for deployment

License

Copyright © 2024-present Sm Munna.

About

I am developing this package for reduce the time to setup the react.js project. Here some npm package are preinstalled so that you don't have to install it again and again and folder structure are organized. So try this package.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published