A Minimal Setup & Fast Boilerplate for React.js with Vite
π Dynamic Pages Routing with react-router-dom from React.js
π Fast development with Vite
π SSR/SSG support with Vite
π PWA support with Vite
npx create-reactplate-app blog-starter
cd blog-starter
npm install
# run server (development mode)
npm run dev
# run server (production mode)
npm run serve
# run debugger
npm run debug
# build the client side & the server side project
npm run build
# build the client side project
npm run build:client
# build the server side project
npm run build:server
# static site generate
npm run generate
# unit test
npm run test
For further development and contributions, please follow the installation instructions below.
git clone https://github.com/fauzan121002/reactplate.git
# Reactplate CRA cli scope
cd reactplate
#----------------------------------
# Reactplate app scope
cd reactplate/examples
npm install
# run server (development mode)
npm run dev
# run server (production mode)
npm run serve
# run debugger
npm run debug
# build the client side & the server side project
npm run build
# build the client side project
npm run build:client
# build the server side project
npm run build:server
# static site generate
npm run generate
# unit test
npm run test
@
equals to_ROOT_/src
#
equals to_ROOT_/src/components
%
equals to_ROOT_/src/assets
ESBuild already injects import React from 'react';
for any .jsx files so you don't need to import it again.
Reactplate Dynamic Pages Routing folder structure works like Next.js.
pages
β Home.jsx
β About.jsx
β
ββββRank
β β [rank].jsx
β ββββsubfolder1
β β [others].jsx
β β ...
Using the params example
// Rank/[rank].jsx
import { useParams } from "react-router-dom";
export default function rank() {
const { rank } = useParams();
return <div>Reactplate will be number {rank}</div>;
}
Note : Index page will refer to Home.jsx
Reactplate will convert any jsx files filename with PascalCase or camelCase to kebab-case.
Example :
pages
β Home.jsx
β AboutMe.jsx
β
ββββmyRank
β β [rank].jsx
β ββββsubfolder1
β β [others].jsx
β β ...
will be converted to :
/home
/about-me
/my-rank/:rank
/my-rank/:rank/subfolder1/:others
...
Reactplate using the MIT License
Credits to React.js and Vite teams for their awesome open source and resources!