TobiasRosskopf / react_frontend_template

Template for React frontend projetcs.

React Frontend Template

This project was bootstrapped with Create React App.

Available Scripts

npm start

Runs the app in the development mode. Open http://0.0.0.0:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner (Jest) in the interactive watch mode.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!

npm run serve

Serves the build folder in an production environment on http://0.0.0.0:5000.

npm run lint

Checks the codebase with ESLint.

npm run format

Format the coebase with Prettier.

Links

Node.js & NPM

https://docs.npmjs.com/cli/v6/configuring-npm/package-json

TypeScript

https://www.typescriptlang.org/docs/handbook/intro.html

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

React

https://reactjs.org/tutorial/tutorial.html

https://create-react-app.dev/docs/getting-started/

https://reactjs.org/docs/introducing-jsx.html

https://reactjs.de/artikel/react-typescript/

https://create-react-app.dev/docs/deployment/

React-Redux

https://levelup.gitconnected.com/react-redux-hooks-useselector-and-usedispatch-f7d8c7f75cdd

https://dev.to/markusclaus/fetching-data-from-an-api-using-reactredux-55ao

Bootstrap

https://getbootstrap.com/docs/5.0/getting-started/introduction/

https://react-bootstrap.github.io/getting-started/introduction/

Sass

https://sass-lang.com/guide

https://www.npmjs.com/package/node-sass

Axios

https://www.npmjs.com/package/axios

https://www.npmjs.com/package/axios-jwt

Jest (Test Suite)

https://jestjs.io/docs/en/getting-started

https://create-react-app.dev/docs/running-tests/

ESLint (Linter)

https://eslint.org/docs/user-guide/getting-started

https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

Prettier (Formater)

https://prettier.io/docs/en/index.html

https://prettier.io/docs/en/options.html

GitHub Actions (CI/CD)

https://docs.github.com/en/actions

Tutorials

https://medium.com/@dakota.lillie/django-react-jwt-authentication-5015ee00ef9a

https://medium.com/@brygrill/create-react-app-with-typescript-eslint-prettier-and-github-actions-f3ce6a571c97

https://medium.com/@bretcameron/a-quick-guide-to-react-with-typescript-313fccd9ad89

https://bezkoder.com/react-redux-jwt-auth/

https://www.digitalocean.com/community/tutorials/react-axios-react-de