React Starter Kit ?‍?


A react starter template configured with Webpack, Typescript, Redux, and React Router.

Features ?

⚡️ Configured with typescript for safer development
⚡️ Configured to use sass modules for a better styling experience
⚡️ Configured with Redux for easy and organized state managment
⚡️ Comprehensive and well written code
⚡️ Well organized project structure

Technologies ?️

Project Structure ?️

┌ src
├─ assets – Static and Public assets
├── font – Contains the static font files
├── public – Contains all the publicly available assests
├── template.html – The react HTML mounting point template
├─ elements – The Ui Components
├── blocks – Independent simple components
├── structures – Complex components built with blocks
├── router.tsx – Main app router
├─ hooks – React custom hooks
├─ store – Redux configuration
├─ styles – Scss configuration files
├─ utility – Custom utility functions
├─ configs.ts – Envirement variables and constants
├─ index.tsx – Main entry point
├─ types.ts – App’s shared types
├ webpack
├─ plugins User defined custom webpack plugins
├─ paths Project structure paths for webpack
└─ webpack.config.js Webpack configuration

Usage ?

These instructions will get you a copy of the project up and running on your local machine

Prerequisites ?

You’ll need Node.js, NPM and Git installed on your computer

[email protected] or higher
[email protected] or higher
[email protected] or higher

You can also use Yarn instead of NPM

[email protected] or higher

How To Use ?

From your command line, first clone the repository into your local machine:

# Clone this repository
$ git clone https://github.com/mounirhnf/react-starter-kit

# Then go into the repository
$ cd react-starter-kit

# Then remove current remote repository
$ git remote remove origin

Install the dependencies:

# Install with NPM
$ npm install

# Install with YARN
$ yarn install

Specify your target port:

# In the .env file
port=3000

Lastly launch the Project:

# Launch with NPM
$ npm start

# Launch with YARN
$ yarn start

Once you complete these steps, you should find you app running on this url http://localhost:<your specified port or 8080>/

Redux usage and configuration ?‍?

All the redux configuration is defined in the src/store folder

Subscriptions ?:

To subscribe a component to the store, you use the useSelector hook that is provided by the react-redux package as shown in the example below

import React from 'react';
import {Store} from 'types';
import {useSelector} from 'react-redux';

export const Subscriber: React.FC = () => {
  const user = useSelector((store: Store.State) => store.user);
  // This component in now subscribed to the user state in the store

  return <h1>{user.name}</h1>;
};

Actions ?:

In this redux configuration the app comunicates with redux via middlewares that by turn call the redux actions wich are defined in the src/store/actions.ts as follows

import {Store} from 'types';

export const actions: Store.Actions {
  changeUserName: 'CHANGE_USER_NAME',
};

// This is the specific payload structure for this middleware method
interface UserNameActionPayload {
  readonly userName: string;
}

// This is the specific Action structure for this middleware method
interface UserNameAction extends Store.Action<UserNameActionPayload> {};

// This is the exampleAction middleware that is used by components to emit
// an action
export function changeUserName(userName: string): UserNameAction {
  return {
    type: actions.changeUserName,
    payload: {
      userName,
    },
  };
}

Action emitions ?️:

To emit an action you use the useDispatch hook provided by react-redux and you use it as follows

import React from 'react';
import {useDispatch} from 'react-redux';
import {changeUserName} from 'store/actions';

export const Emmitter: React.FC = () => {
  const dispatch = useDispatch();
  // This component is not subscribed the store and it only emits an action

  return (
    <button onClick={() => dispatch(changeUserName('new username'))}>
      Change user's name
    </button>
  );
};

Author ✍️


profile

Licence ?

This project is licensed under the MIT License – see the LICENSE.md file for details

Acknowledgments ?

I was motivated to create this project because I wanted to contribute with something useful for the dev community ?

GitHub

View Github