# React Course Quiz

## 1. HTML, CSS & JavaScript

### Question 1

What does "HTML" stand for?

- [ ] Hyper Text Machine Language
- [x] Hyper Text Markup Language
- [ ] High Text Markup Language
- [ ] Hyperlink and Text Markup Language

### Question 2

What is CSS used for?

- [ ] Creating the structure of the web page
- [ ] Adding dynamic behavior to the HTML page
- [x] Formatting the layout and UI of the web page
- [ ] Creating HTML elements

### Question 3

Which of the following is not an HTML attribute?

- [ ] href
- [ ] src
- [ ] style
- [x] click

### Question 4

How many basic data types does JavaScript have?

- [ ] 5
- [ ] 6
- [ ] 7
- [x] 8

### Question 5

Which of the following is a popular CSS framework?

- [ ] React
- [ ] Angular
- [x] Tailwind
- [ ] Vue

### Question 6

What is the purpose of a web browser?

- [ ] To edit HTML documents
- [ ] To compile JavaScript code
- [x] To read and display HTML documents correctly
- [ ] To style web pages using CSS

### Question 7

What does the "alt" attribute in an `<img>` tag specify?

- [ ] The source of the image
- [ ] The width of the image
- [x] The alternate text for the image
- [ ] The height of the image

### Question 8

Which JavaScript method can be used to find an element in an array?

- [x] .find()
- [ ] .search()
- [ ] .locate()
- [ ] .lookup()

### Question 9

What is a key benefit of using an external stylesheet (CSS) file?

- [ ] It makes the web page load faster
- [x] It allows changing the look of an entire website by changing just one file
- [ ] It enables dynamic behavior on the web page
- [ ] It improves the security of the web page

## 2. JSX, TypeScript

### Question 1

What does JSX stand for?

- [ ] JavaScript Xtreme
- [ ] Java Syntax Extension
- [x] JavaScript XML
- [ ] JavaScript XHTML

### Question 2

What is the main purpose of TypeScript?

- [ ] To make JavaScript faster
- [x] To add static typing to JavaScript
- [ ] To compile JavaScript code
- [ ] To create new JavaScript syntax

### Question 3

Which of the following is not a benefit of using TypeScript?

- [ ] More restrict code interface
- [ ] Easier to debug and maintain
- [x] Faster execution time
- [ ] Find errors earlier

### Question 4

What does the "any" type in TypeScript signify?

- [ ] A number type
- [ ] A string type
- [ ] An object type
- [x] Any type of value

### Question 5

What is a key feature of JSX in React?

- [x] Allows writing HTML in React
- [ ] Compiles JavaScript code
- [ ] Optimizes code performance
- [ ] Enhances security by default

### Question 6

Which practice should be avoided in TypeScript?

- [ ] Using static types
- [ ] Using TypeScript with ESLint
- [x] Overusing the "any" type
- [ ] Following TypeScript best practices

### Question 7

What should you use along with TypeScript to enforce rules better?

- [ ] Babel
- [x] ESLint
- [ ] Webpack
- [ ] Grunt

## 3. React & Frameworks

### Question 1

What is the main purpose of using React?

- [ ] To build server-side applications
- [ ] To create mobile applications
- [x] To build user interfaces
- [ ] To manage databases

### Question 2

What are React components?

- [ ] Variables in JavaScript
- [ ] CSS styles
- [x] Individual pieces of UI written in JavaScript
- [ ] Backend services

### Question 3

What are props in React?

- [ ] Built-in functions
- [ ] Custom CSS properties
- [x] Arguments passed into components
- [ ] Database queries

### Question 4

What is state in React?

- [ ] External data source
- [ ] Static properties
- [x] Built-in object to store property values
- [ ] Style definitions

### Question 5

What is the main benefit of using hooks in React?

- [ ] Compile faster
- [x] Manage state and lifecycle without classes
- [ ] Better performance
- [ ] Easier CSS integration

### Question 6

Which of the following is a common React hook?

- [ ] useHTML
- [x] useState
- [ ] useCSS
- [ ] useDB

### Question 7

What does the useEffect hook do?

- [ ] Create new HTML elements
- [x] Perform side effects in function components
- [ ] Compile JavaScript code
- [ ] Manage database connections

### Question 8

What is the purpose of the React Router?

- [ ] To manage state
- [ ] To handle CSS styles
- [x] To handle page routing
- [ ] To fetch data from APIs

## 4. UI Libraries

### Question 1

What is the main purpose of using a UI library in frontend development?

- [ ] To create backend services
- [x] To quickly build UI and screens for the app
- [ ] To manage databases
- [ ] To improve SEO

### Question 2

Which UI library is highly recommended in the document?

- [ ] Bootstrap
- [ ] Foundation
- [ ] Semantic UI
- [x] Ant Design

### Question 3

Which feature is NOT mentioned as part of Ant Design?

- [ ] Internationalization support
- [ ] Theme customization
- [ ] Integration with React frameworks
- [x] Backend services

### Question 4

Which feature is NOT mentioned as part of Ant Design?

- [ ] Internationalization support
- [ ] Theme customization
- [ ] Integration with React frameworks
- [x] Backend services

### Question 5

Which command is used to install Ant Design using npm?

- [ ] npm install ant-design --save
- [x] npm install antd --save
- [ ] npm install ant-design-react --save
- [ ] npm install design-ant --save

## 5. Build Tools

### Question 1

What is the purpose of using JavaScript modules?

- [ ] Merge multiple JavaScript files into a single one
- [x] Break code into separate files for easier codebase maintain
- [ ] Remove dead code
- [ ] Manage and download the packages

### Question 2

How can you link dependencies in JavaScript modules?

- [x] Use `import` and `export`
- [ ] Use inline scripts
- [ ] Install packages via npm
- [ ] Use source maps

### Question 3

What is npm?

- [ ] A JavaScript package
- [ ] A JavaScript module
- [x] A package manager
- [ ] A testing tool

### Question 4

What is correct about Code Splitting and Tree Shaking?

- [ ] Code Splitting removes unused code, Tree Shaking divides code into smaller chunks loaded on demand
- [x] Tree Shaking removes unused code, Code Splitting divides code into smaller chunks loaded on demand
- [ ] Both Code Splitting and Tree Shaking divide code into smaller chunks loaded on demand
- [ ] Both Code Splitting and Tree Shaking remove unused code

### Question 5

Which one is NOT a JavaScript build tool?

- [ ] Vite
- [ ] webpack
- [ ] esbuild
- [x] Redux

## 6. Testing

### Question 1

Which testing type is at the highest level in the test pyramid?

- [ ] Unit test
- [ ] Integration test
- [ ] Static test
- [x] E2E test

### Question 2

Where does ESLint live in the test trophy?

- [x] Static test
- [ ] Unit test
- [ ] Integration test
- [ ] E2E test

### Question 3

What is the recommended toolchain for unit & integration testing in React?

- [ ] Enzyme
- [x] Jest, React Testing Library
- [ ] ESLint, TypeScript
- [ ] Cypress

### Question 4

What is NOT a good practice in writing tests?

- [x] Use generic query selectors
- [ ] Write deterministic tests
- [ ] Avoid unnecessary assertions
- [ ] Mock modules for complicated UI components

### Question 5

What is correct about code coverage?

- [ ] Code coverage has no effect on the code quality
- [ ] Always strive for 100% code coverage
- [x] In Jest, you can generate code coverage by adding the flag `--coverage` to the test script
- [ ] Code coverage is calculated by the total number of code lines only

## 7. CI/CD & Deployment

### Question 1

What does "CI" stand for?

- [ ] Continuous Intelligent
- [x] Continuous Integration
- [ ] Continuous Interaction
- [ ] Continuous Innovation

### Question 2

Which is NOT a benefit of using CI/CD?

- [ ] Catch bugs early in the development cycle
- [ ] Reduce downtime & improve software quality
- [x] Better manual software development process
- [ ] Better align product with user expectation

### Question 3

Which one can be used to host a static website?

- [x] GitLab Pages
- [ ] GitLab CI/CD
- [ ] GitHub Actions
- [ ] Vite

### Question 4

What is Docker?

- [ ] A server that controls how web users access hosted files
- [ ] A platform for running and managing containers from many container runtimes
- [x] A platform for developing, shipping, and running container applications
- [ ] A process to monitor iterative code changes

### Question 5

What is the responsibility of NGINX?

- [x] Load balancer, reversed proxy, content caching
- [ ] Run container applications
- [ ] Catch bugs on production
- [ ] Automate the development process

## 8. What's Next?

### Question 1

Which of the following can be used to improve code quality?

- [ ] Storybook
- [x] ESLint, Prettier
- [ ] React Styleguidist
- [ ] Google Lighthouse

### Question 2

What can Storybook help you?

- [ ] Better code quality with strict rules
- [ ] Optimize website performance
- [x] Develop UI components in isolation
- [ ] Enhance SEO for your website

### Question 3

What does "SEO" stand for?

- [ ] Software Engineering Operation
- [ ] Search Engine Observability
- [ ] Search Engine Operation
- [x] Search Engine Optimization

### Question 4

Which metric can be used to measure interactivity?

- [x] INP (Interaction to Next Paint)
- [ ] LCP (Largest Contenful Paint)
- [ ] FCP (First Contentful Paint)
- [ ] CLS (Cummulative Layout Shift)

### Question 5

Which tool can be used to measure website performance?

- [ ] Google Chrome
- [x] Google PageSpeed Insights
- [ ] Storybook
- [ ] ESLint