Intro
Trivia Quiz Challenge
Getting Started
First install libraries from package.json:
git clone <repo-url>
npm install
Once it's installed, you can run npm start
, to run the react application and it will run the development server on your local machine, and give you a URL to browse.
Dev Tools
Edit, build and debug with ease
VS Code Extension
- Eclipse key map
- MDX Extension
- Git lens
Chrome Extension
- React dev tools
Best Practices
ATOMIC
- To design component- Styling -
styled-components
- Images -
SVGR (Scalable Vector Graphics React)
kebab-Case
for constants variables
Development scripts
Note: Run the following commands in the \root\ folder to see the results.
npm start
it will run the development server on your local machine
npm test
boolean check if unit tests all pass - uses jest and enzyme
npm run storybook
it will run the development server on your local machine, and give you a URL to browse some sample stories.
Code-splitting
Code-splitting
with React. It's a process of taking one large bundle containing your entire app and splitting them up into multiple smaller bundles that contain separate parts of your app.
Packages
Packages | |
---|---|
[a11y] | Test components for user accessibility in Storybook |
[actions] | Log actions as users interact with components in the Storybook UI |
[docs] | Add high quality documentation to your components |
[knobs] | Interactively edit component prop data in the Storybook UI |
[jest] | Testing framework created by facebook |
[enzyme] | Testing utility for React created by Airbnb |
[axios] | A promise-based HTTP client that works in both client and server |
[lodash] | JS library which provides utility func for common programming tasks |
[node-sass] | CSS preprocessor |
[react-router-dom] | Client side navigation |
[react-intl] | JS library for translation |
[prop-types] | Props type check |