Repository files navigation

• Make sure you are using node version 10

1. Install the packages:

$ npm install

2. Create a .env file:

$ cp .env.example .env

3. Start coding! and the webpack dev server with live reload, for windows, mac, linux or Gitpod:

$ npm run start

You can update thestyles/index.css or create new.css files insidestyles/ and import them into your current scss or js files depending on your needs.

Add more files into your./src/js/components or styles folder as you need them and import them into your current files as needed.

Note (New changes): Components have been converted into functions to support the use of hooks:

• Instead of a class component, we're using aconst function.
• Classconstructor andstate have been replaced byuseState() hooks.
• componentDidMount() was replaced byuseEffect({}, []) - It runs at mount thanks to the second parameter ([]).
• Actions andStore still work the same way.

// Previous "Class Oriented"exportclassDemoextendsReact.Component{constructor(props){super(props);this.state=getState('code here');}}// New "Functional Oriented"exportconstDemo=()=>(const[state,setState]=getState('code here');//using the state (if needed)const{ store, actions}=useContext(Context);// using the context (if needed));

💡Note: There is an example using the Context API insideviews/demo.js;

Add more files into your./src/js/views and import them in./src/js/layout.jsx.

This boilerplate comes with a centralized general Context API. The file./src/js/store/flux.js has a base structure for the store, we encourage you to change it and adapt it to your needs.

React ContextdocsBreathCode Lessonview

TheProvider is already set. You can consume from any component using the useContext hook to get thestore andactions from the Context. Check/views/demo.js to see a demo.

import{Context}from"../store/appContext";constMyComponentSuper=()=>{//here you use useContext to get store and actionsconst{ store, actions}=useContext(Context);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.

2. Github Pages: This boilerplate is 100% compatible with the free github pages hosting.To publish your website you need to push your code to your github repository and run the following command after:

$ npm run deploy

Note: You will need toconfigure github pages for the branch gh-pages

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, andData Science Bootcamp.