Used by 4Geeks.com and 4Geeks Academy students, this template helps to bootstrap your first multi-page web applications by integrating with React latest version, vercel deployments and Vite for bundling.
📦 Make sure you are using at least node version 18.
-
Install the node package dependencies by typing:
$ npm install -
Create a .env file by typing
$ cp .env.example .env -
Start coding! and the vite dev server with live reload by typing:
$ npm run start
You can update the ./index.css or create new .css files and import them into your current css or js files depending on your needs.
Add more files into your ./src/components or styles folder as you need them and import them into your current files as needed.
💡Note: There is an example using the Context API inside pages/demo.js;
Add more files into your ./js/pages and import them in ./routes.jsx.
Each page must match at least one route inside routes.jsx
This template comes with a centralized & general state that's shared with all pages and compoentes, we call it "the store".
The file ./src/store.js has a default structure for the store, we encourage you to change it and adapt it to your data needs (for example, if you are doing a Todo list you will probably have a array of todos here).
- Learn how the useReducer works.
- Read more about implementing a global state with Context API
- Read more about react hooks
The store Provider for this context is already set on ./src/main.jsx. You can access the store from any component using the useGlobalReducer hook to get the store and dispatcher. Check /views/demo.js to see a demo. Here is a smaller sample:
import useGlobalReducer from "./src/hooks/useGlobalReducer";
const MyComponentSuper = () => {
//here you use the hook to get dispatcher and store
import { dispatch, store } = useGlobalReducer();
return <div>{/* you can use your actions or store inside the html */}</div>
}This template was built as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, Data Science Bootcamp and CyberSecurity Bootcamp.