brijoyj / react-ts

React.js + Koa.js with TypeScript

React.js with TypeScript

Contents

Koa + React

1. Start with Yarn: Javascript package manager.
   • node, npm, git
2. Koa.js with TypeScript: Web Framework for Node.js.
   • koa, typescript, gulp
3. React.js with TypeScript: Web Application Javascript library.
   • create-react-app
4. koa-static: Send static files to client.
5. koa-router: Router middleware. Connect the koa server to the react app in development environment using proxy settings.
   • server: dotenv, ts-node
   • client: axios
6. concurrently: Development environment automation.

Lint

1. ESLint: Linter for the Javascript/TypeScript language.
2. Prettier: Code Formatter.

Test-driven development

1. React test: Jest.
   • axios-mock-adapter
2. Node test: Mocha, Chai, Supertest.

Database

1. Database: MariaDB with Docker.
2. Sequelize: Promise-based Node.js ORM
   • mariadb

OAuth2

1. GitHub OAuth Apps: Register a new GitHub OAuth application.
2. Passport: Get a GitHub user profile.
   • passport-github2, koa-passport, koa-bodyparser, koa-session
3. Sign up: Save a user profile in the database.
4. Sign in/out: Koa.js authentication.

React.js

Home

1. Favicon: Web app manifests.
2. Font: Web fonts.
3. Home page
   • node-sass, react-bootstrap, react-router
4. Sign in page

Login

1. Redux: store: Setting up the redux store.
   • @reduxjs/toolkit, react-redux
2. Redux: reducer: Creating the initial state slices.
3. Redux: sign in/out: Fetch a user data. Store in the redux store.
4. Web storage: Keep data in local.
   • redux-persist

Writings

1. Write diary: Save and erase a diary to database.
   • react-helmet, react-js-pagination

Deployment

1. AWS RDS
2. AWS Beanstalk
3. AWS Route 53

---

ECMA

• ES2019: ES10.
• ES2018: ES9. ...identifier
• ES2017: ES8.
• ES2016: ES7. await, async
• ES2015: ES6. import, export
• ES2009: ES5