Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rinminase/react-typescript

📦✨ A lightweight React + TypeScript + SCSS + Material-UI template deployed to Netlify
https://github.com/rinminase/react-typescript

material-ui netlify react redux scss typescript webpack

Last synced: about 13 hours ago
JSON representation

📦✨ A lightweight React + TypeScript + SCSS + Material-UI template deployed to Netlify

Host: GitHub
URL: https://github.com/rinminase/react-typescript
Owner: RinMinase
Created: 2019-09-21T17:29:02.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T09:56:39.000Z (about 2 years ago)
Last Synced: 2024-12-27T18:31:11.925Z (about 2 months ago)
Topics: material-ui, netlify, react, redux, scss, typescript, webpack
Language: TypeScript
Homepage: http://react-ts-app.netlify.app
Size: 1.54 MB
Stars: 0
Watchers: 2
Forks: 1
Open Issues: 11
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

ReactJS Test Application

## Introduction
A lightweight `React` + `Redux` + `TypeScript` + `SCSS` + `Material-UI` application created without using `create-react-app` deployed using `Netlify`.

### Why TypeScript?
- TypeScript simplifies JavaScript code, making it easier to read and understand
- Better code structuring and object-oriented programming techniques
- Better development through compile-time checking
- React compiled with Babel can be written in ES6+, so why not go for a step higher and use TypeScript
- It has static type checking or type annotations, which reduces chances of undesired results from invalid types being passed or used
- It improves the capabilites of some IDEs, improving autocomplete and code navigation features
- It supports API documentation which may be of help on development

## Getting Started

### Running the project
1. [Download](https://nodejs.org/en/) the latest Node version. This is marked as ` Current`. Install it on your machine.

2. _(Optional)_ [Download](https://yarnpkg.com/latest.msi) Yarn. This is a faster package manager than the default `npm` one.

3. Clone the project

```
git clone https://github.com/RinMinase/react-typescript.git
cd react-typescript
```

4. Install the dependencies then run the project

```
npm install
npm start
```

**Note:** If you have installed Yarn, run these instead:

```
yarn install
yarn start
```

5. Fire up your browser and go to `localhost:3000`

### Project Structure
.
├── assets/ # Project assets
├── src/ # Project source code
│ ├── core/ # Core components
│ ├── / # Project component
│ ├── global.d.ts # Project type definitions
│ ├── global.scss # Main stylesheet
│ ├── index.html # Main template file
│ ├── index.tsx # Main scripts
│ ├── reducers.ts # Root reducer file
│ └── routes.tsx # Route definitions
├── tsconfig.json # TypeScript configuration file
└── webpack.config.ts # Webpack configuration file

#### Component Structure
/
│ └── components/ # Sub-components folder
│ └── .tsx # Sub-component
├── actions.tsx # Component actions and types
├── index.scss # Component stylesheet
├── index.tsx # Component entry file
└── reducers.tsx # Component reducers

#### Display Structure
___________________
| _______________ |
| |_______________| | ├─
| _______________ | │
| | | | └─
| | | | └─
| |_______________| |
|___________________|

### Building the project
Installations Required:
- Node
- _(Optional)_ Yarn

1. Fire up your terminal inside the project folder.

2. Build the project by running:

```
npm run build
```

**Note:** If you have installed Yarn, run these instead:

```
yarn build
```

3. This should generate a `/dist` folder inside the project folder.

### Project tasks

Task automation is based on [Yarn scripts](https://yarnpkg.com/lang/en/docs/cli/run/) or [NPM scripts](https://docs.npmjs.com/misc/scripts).

| Task | Description |
| ------------------- | -------------------------------------------------------------------------------------- |
| `yarn start` | Run **development server** on `http://localhost:3000/` with file watching on changes |
| `yarn build` | Build production code |
| `yarn deploy` | Build netlify deployment code |

## Built with
* [React 17](https://reactjs.org/) - Web Framework
* [Redux](https://reactjs.org/) - State Container Management
* [TypeScript](https://www.typescriptlang.org/) - Language syntax and compiler
* [Material-UI](https://material-ui.com/) - Web Layouting
* [Sassy CSS (SCSS)](https://sass-lang.com/) - CSS pre-processor
* [Webpack 5](https://webpack.js.org/) - Project bundler
* [Netlify](https://www.netlify.com/) - Continuous Deployment (CD) service
* [Terser](https://terser.org/) - ES6+ (JavaScript) mangler and compression toolkit
* [Yarn](https://yarnpkg.com/) - Package Manager