- 📖 About the Project
- 🚀 Live Demo
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- ❓ FAQ
- 📝 License
[Bookstore_App] "Bookstore App" is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to:
- Make simple calculations.
- Read a random math-related quote. By building this application, you will learn how to use React. It also follows Gitflow.
- [React_JS]
- [Gitflow]
- [Desktop-Version]
- [Dynamic-Design]
Creating your first "Bookstore App" project
To get a local copy up and running, follow these steps.
In order to run this project you need:
-A Git hub account -Git bash -Node JS -React JS -Visual Studio Code as your code editor
Clone this repository to your desired folder:
cd my-folder
git clone[(https://github.com/joyapisi/to-do-app-with-react.git)]Since this code is using webpack, you will run npm start in your terminal to run it instead of using the live server.
React JS is a front-end library introduced by Facebook in 2013 and it has become one of the most popular ways to build modern user interfaces today.
A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).
- Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.
- Achieving a more readable and consistent style, through the enforcement of its rules.
- Having more secure and performant code.
- Having an objective and measurable assessment of code quality.
- Having fewer discussions about code style and aesthetic choices during code reviews.
- Follow the instructions here to set up react JS.
- In the link above, go through these topics in order:
In your project directory terminal, you can run these commands:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
Linters for various programming languages are available for use, e.g. Rubocop for Ruby or ESLint for JavaScript.
There are many ways you can integrate a linter in your workflow:
-text editor plugin -GitHub Actions -GitHub apps
Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:
node_modules/
NOTE: If you are using Windows, make sure you initialize npm to create package.json file.
npm init -y
how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
- Run
npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x @babel/plugin-syntax-jsx@7.x @babel/preset-react@7.x @babel/preset-react@7.x
- Copy .hintrc and .babelrcto the root directory of your project.
- Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- Run
npx eslint "**/*.{js,jsx}"
on the root of your directory of your project to fix linter errors.
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- Run
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
-
Copy .stylelintrc.json to the root directory of your project.
-
Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.
-
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!
👤 Joy Phoebe
- GitHub: (https://github.com/joyapisi)
- Twitter: (https://twitter.com/joyapisi)
- LinkedIn: (https://http://www.linkedin.com/in/joy-phoebe-00b80a13a)
- GitHub: (https://github.com/Shaheryar0054)
- Add more styling (aesthetics)
- Add mobile version
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!
I'm thankful to Microverse for providing a study platform which guided me through this project.
-
[Question_1] An easier and quicker way to understand webpack?
- This YouTubevideo will help you understand webpack better and in details
-
[Question_2] Where can I download node JS for installation?
- Node Js can be downloaded here-
This project is MIT licensed.