Repository files navigation

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 andVite for bundling.

📦 Make sure you are using at least node version 20.

1. Install the node package dependencies by typing:$ npm install

2. Create a .env file by typing$ cp .env.example .env

3. 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 insidepages/demo.js;

Add more files into your./js/pages and import them in./routes.jsx.Each page must match at least one route insideroutes.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 aTodo list you will probably have a array of todos here).

• Learnhow the useReducer works.
• Read more aboutimplementing a global state with Context API
• Read more aboutreact hooks

The storeProvider for this context is already set on./src/main.jsx. You can access the store from any component using theuseGlobalReducer hook to get thestore anddispatcher. Check/views/demo.js to see a demo. Here is a smaller sample:

importuseGlobalReducerfrom"./src/hooks/useGlobalReducer";constMyComponentSuper=()=>{//here you use the hook to get dispatcher and storeimport{dispatch,store}=useGlobalReducer();return<div>{/* you can use your actions or store inside the html */}</div>}

1. Vercel: The FREE recomended hosting provider isvercel.com, you can deploy in 1 minutes by typing the following 2 commands:

Login (you need to have an account):

$ npm i vercel -g&& vercel login

Deploy:

$ vercel --prod

✎ Note: If you don't have an account just go to vercel.com, create a account and come back here.

This template was built as part of the 4Geeks AcademyCoding Bootcamp byAlejandro Sanchez and many other contributors. Find out more about ourFull Stack Developer Course,Data Science Bootcamp andCyberSecurity Bootcamp.