Intro

Interview quiz - React application.

Getting Started

First install libraries from package.json:

git clone <repo-url>
npm install (in both the \WEB_NODEJS\ folder and the \WEB_REACTJS\ folders)

Once it's installed, you can run npm start in WEB_REACTJS 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

• Application builds on - feature based pattern
• ATOMIC - To design component
• Styling - SCSS CSS pre-processor
• Images - SVGR (Scalable Vector Graphics React)
• kebab-Case for contants variables

Development scripts

Note: Run the following commands in the \WEB_REACTJS\ 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.

To Start Backend

Note: Run the following command in the \WEB_NODEJS\ folder to see the results.

npm start

it will run the development server on your local machine

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

😃 Happy Coding 😃