React CRA Testing Practice

React CRA Testing Practice
Learn to test in a CRA app with Typescript using Jest
🐞 Report a bug or 🙋‍♂️ request a feature

• React CRA Testing Practice
  • The Project
    • Features
    • Built With
  • Using the App
  • How to run this project
    • Prerequisites
    • Run it (Quickstart with docker)
    • Installing the project
    • Available Scripts
      • npm start
      • npm run build
    • Learn More
  • Potential Features
  • Author
  • Contributing
  • Show your support and acknowledges
  • License

The Project

This project is for updating knowledge on testing

Features

• Basic create-react-app structure
• Sets eslint rules
• Linters
• React
• React-DOM
• React-Create-App
• Typescript
• ES6 syntax
• Export/import ES6+ notation

Built With

• create-react-app
• ESLint
• npm
• vscode with ESLint extension
• Linux/GNU
• Love and Passion for code

Using the App

• Open it

How to run this project

Prerequisites

• npm 6.14 +
• node 14.17 +
• docker and docker-compose (optional)
• A Text Editor like VSCode
• A browser like Firefox or Chrome

Run it (Quickstart with docker)

• Be sure to setup docker-compose and have git and npm working.
• Run this:

> git clone https://github.com/Israel-Laguan/react-cra-ts-testing-practice.git
> cd react-cra-ts-testing-practice
> npm i
> docker-compose build
> docker-compose up frontend

• Enter localhost:3000 in a browser for the frontend.

You can also test using docker, run docker-compose up test or docker-compose run --rm test

Not a fan of Docker or need more information? Continue for instructions to learn more about how to setup your PC for run the frontend!

We used create-react-app to initialize this project, so it is configurated to be easy to run. Just follow the following instructions.

Installing the project

Now that you are set up, open a terminal and:

git clone https://github.com/Israel-Laguan/react-cra-ts-testing-practice.git
cd react-cra-ts-testing-practice
npm i && npm start

Then open http://localhost:3000 to see the app.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost: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 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!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Potential Features

• Create a landing page.
• <Insert your great idea here!>.

Author

Israel Laguan	Email me to contact@israellaguan.com / Connect to my Linkedin

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

Show your support and acknowledges

🤗 Give a ⭐️ if you like this project!

This project is possible with help from:

• Lint configuration from Camilo Martinez
• Icons from Icons8
• Banner from canva.com
• Favicon from favicon.io

License

📝 This project is licensed under the Apache 2
Feel free to fork this project and improve it!