ch1nux / final-project-4geeks

Final Project Boilerplate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

WebApp boilerplate with React JS

Open in Gitpod

Requirements:

  • Make sure you are using node version 10
  1. Install the packages:
$ npm install
  1. Create a .env file:
$ cp .env.example .env
  1. Start coding! and the webpack dev server with live reload, for windows, mac, linux or Gitpod:
$ npm run start

Styles

You can update the styles/index.scss or create new .scss files inside styles/ and import them into your current scss or js files depending on your needs.

Components

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 a const function.
  • Class constructor and state have been replaced by useState() hooks.
  • componentDidMount() was replaced by useEffect({}, []) - It runs at mount thanks to the second parameter ([]).
  • Actions and Store still work the same way.
// Previous "Class Oriented"
export class Demo extends React.Component {
	constructor(props) {
		super(props);

		this.state = getState('code here');
	}
}

// New "Functional Oriented"
export const Demo = () => (
	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 inside views/demo.js;

Views (Components)

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

Context

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 Context docs BreathCode Lesson view

The Provider is already set. You can consume from any component using the useContext hook to get the store and actions from the Context. Check /views/demo.js to see a demo.

import { Context } from "../store/appContext";
const MyComponentSuper = () => {
  //here you use useContext to get store and actions
  const { store, actions } = useContext(Context);
  return <div>{/* you can use your actions or store inside the html */}</div>
}

Publish your website!

This boilerplate it's 100% integrate with Herkou, just by pushing your changes to the heroku repository it will deploy: $ git push heroku main

About

Final Project Boilerplate


Languages

Language:JavaScript 48.4%Language:Python 40.2%Language:Dockerfile 5.0%Language:HTML 2.1%Language:Mako 2.1%Language:Shell 2.0%Language:SCSS 0.1%