-
Before you start create this first
:
npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd your-new-project-directory
-And then run this
:
npx @mhmurad/respa init
Hints: This may take 3-7 minutes depends on your net speed.
react-structure-package(respa) is a Node.js package that helps you quickly set up a React front-end project structure with essential folders, files, and dependencies. By running a single command, you’ll get a boilerplate setup for a React app, ready to use with tools like React
, React-dom
, React-router-dom
, React-icons
, Axios
, Firebase
, Tailwind
, DaisyUI
, Prop-types
, localforage
, match-sorter
, sort-by
and React Hook Form
.
- Automatically creates a standard React project folder structure.
- Generates common files like
index.css
,ErrorPage.jsx
,firebase.config.js
,MainLayout.jsx
,Routes.jsx
,tailwind.config.js
andHome.jsx
. - Installs additional dependencies like
React
,React-dom
,React-router-dom
,React-icons
,Axios
,Firebase
,Tailwind
,DaisyUI
,Prop-types
,localforage
,match-sorter
,sort-by
andReact Hook Form
. - Saves you time by handling initial project setup and structure creation.
When you run this package, it creates the following folder structure:
'src',
'src/components',
'src/assets',
'src/pages',
'src/utils',
'src/hooks',
'src/layouts',
'src/routes',
'src/firebase',
'src/provider',
'public'
-
src/main.jsx
: A basic React component that serves as the app’s main component. -
src/index.css
: CSS file for global styles. -
index.html
: HTML file that serves as the main template. -
src/components/ExampleComponent.js
: A sample component to show where components can be added. -
.gitignore
: Includes common files and folders to ignore in Git. -
And many more like
:index.css
,ErrorPage.jsx
,firebase.config.js
,MainLayout.jsx
,Routes.jsx
andHome.jsx
Before using this package, make sure you have:
- Node.js (v14 or later) and npm installed on your system.
To use react-structure-package(respa), you don’t need to install it globally. Instead, use npx
to run it directly:
npx @mhmurad/respa init
This command will execute the init.js
script in the package, setting up the project folder structure and installing necessary dependencies.
- To set up the React project structure, simply run:
npx @mhmurad/respa init
- When you run the command:
A folder structure will be created in your current directory.
Essential files like App.js
and index.html
will be generated with starter content.
react-router-dom
and react-hook-form
will be installed automatically, appearing in your package.json
as dependencies.
-
Once the structure is created, navigate to your project folder (if needed) and install any remaining dependencies (e.g.,
react
andreact-dom
) if they aren't installed by default.
To start the development server, initialize a new project with Create React App:
npx create-react-app
Or, if you have the structure and dependencies already in place, you can just start coding in the src
folder.
-
You can now start using
react-router-dom
andreact-hook-form
in your app right away. Here’s a quick example of how to use React Router inApp.js
:
// src/App.js
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ExampleComponent from "./components/ExampleComponent";
function App() {
return (
<Router>
<div className="App">
<h1>My React App</h1>
<Routes>
<Route path="/" element={<ExampleComponent />} />
</Routes>
</div>
</Router>
);
}
export default App;
If you need to install additional dependencies, you can add them using npm install
as usual. This package sets up the initial folder structure and installs a couple of common dependencies, but you’re free to add more as needed.
-
Permission Issues
: If you run into permission issues, try using sudo with npx (on macOS or Linux) or run your terminal as Administrator (on Windows). -
Missing Dependencies
: If react and react-dom are not installed by default, you can install them manually:
npm install react react-dom
If you run into any issues or have suggestions for improvement, feel free to open an issue on the GitHub repository or contact the maintainer.
This package is open-source and available under the MIT License
. See the LICENSE file for more details.