A react starter template configured with Webpack, Typescript, Redux, and React Router.
⚡️ 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
- Webpack - Module bundler
- TypeScript - Javascript on steroids
- ReactJs - Javascript UI Library
- React Router - Router for react SPAs
- Redux - State manager for Javascript apps
- React Icons - Component based icons for ReactJs
- SCSS - CSS with superpowers
┌ 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
These instructions will get you a copy of the project up and running on your local machine
You'll need Node.js, NPM and Git installed on your computer
node@v12.13.0 or higher
npm@7.16.0 or higher
git@2.24.0 or higher
You can also use Yarn instead of NPM
yarn@v1.22.10 or higher
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>/
All the redux configuration is defined in the src/store
folder
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>;
};
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,
},
};
}
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>
);
};
This project is licensed under the MIT License - see the LICENSE.md file for details
I was motivated to create this project because I wanted to contribute with something useful for the dev community 💚