React

features

• react-router-dom
• tailwind-css
• cookie
• redux
• styled-components
• axios with repository-pattern
• form with validation
• graphql
• context
• google-login
• auth

react-router-dom

yarn add react-router-dom

./src/app.js

import{BrowserRouter,Route,Link}from"react-router-dom";

tailwind-css

yarn add tailwindcss postcss-cli autoprefixer
npx tailwind init --full
touch postcss.config.js

postcss.config.js

module.exports={plugins: [require("tailwindcss"),require("autoprefixer")],};

package.json

"scripts": {
"build:tailwind": "postcss src/tailwind.css -o src/App.css"
},

Cookie

• wip

Redux

# create app
npx create-react-app my-app --template redux
# existing app
yarn add redux react-redux redux-logger @reduxjs/toolkit

styled-components

yarn add styled-components

axios with repository-pattern

yarn add axios

form with validation

yarn add react-hook-form @hookform/resolvers @hapi/joi classnames

graphql

• wip

google-login

yarn add react-google-login

json-server

npm install -g json-server

json-graphql-server

npm install @apollo/client graphql
npm install -g json-graphql-server