`, React renders it as harmless text, preventing the browser from executing it."},{"@type":"Answer","text":"It encrypts the Virtual DOM."},{"@type":"Answer","text":"It uses Redux to sanitize data."}]},{"@type":"Question","name":"When is it absolutely necessary to use `dangerouslySetInnerHTML` in React, and what architectural precaution MUST you take?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"To render SVGs. No precautions needed."},{"@type":"Answer","text":"When rendering HTML authored from a Rich Text Editor (CMS). You MUST run the raw HTML string through a robust sanitization library (like `DOMPurify`) BEFORE passing it to React to strip out malicious script tags."},{"@type":"Answer","text":"To render CSS. Use Redux to sanitize it."},{"@type":"Answer","text":"Never use it. It is deprecated."}]},{"@type":"Question","name":"What is CSRF (Cross-Site Request Forgery), and how does a modern React SPA architecture typically prevent it?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"A CSS styling attack. Prevented by CSS Modules."},{"@type":"Answer","text":"An attack where a malicious site tricks the user's browser into sending a forged request (using their valid session cookies) to your bank API. SPAs prevent this by using Authorization Headers (Bearer Tokens) instead of relying solely on implicit Cookies, or by requiring a CSRF Token."},{"@type":"Answer","text":"A database injection attack. Prevented by GraphQL."},{"@type":"Answer","text":"A DDoS attack. Prevented by CDNs."}]},{"@type":"Question","name":"What is Content Security Policy (CSP) in frontend architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"A privacy policy displayed to the user."},{"@type":"Answer","text":"A strict HTTP header set by the server that tells the browser EXACTLY which domains are allowed to load resources (scripts, images, fonts). If an attacker injects a script tag pointing to `evil-hacker.com/steal.js`, the browser's CSP will block it from executing."},{"@type":"Answer","text":"A React routing component."},{"@type":"Answer","text":"A method of compressing content."}]},{"@type":"Question","name":"In a Continuous Integration (CI) pipeline for a React application, what steps should execute automatically when a developer opens a Pull Request?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Deploy immediately to production."},{"@type":"Answer","text":"Linting (ESLint), Type Checking (TypeScript), Unit Tests (Jest), and ideally an automated Build step to ensure the Webpack/Vite compilation doesn't crash."},{"@type":"Answer","text":"Format the hard drive."},{"@type":"Answer","text":"Run Lighthouse on the developer's localhost."}]},{"@type":"Question","name":"What is 'Continuous Deployment' (CD) in frontend architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Continuously writing code without breaks."},{"@type":"Answer","text":"An automated process where, once code is merged into the `main` branch (and passes all CI tests), it is automatically built, optimized, and pushed to the live production server (or CDN) without human intervention."},{"@type":"Answer","text":"Continuously downloading NPM packages."},{"@type":"Answer","text":"A Redux state syncing tool."}]},{"@type":"Question","name":"What is a 'Preview Environment' (or Ephemeral Environment) in frontend CI/CD?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"A feature that lets users preview new CSS themes."},{"@type":"Answer","text":"When a Pull Request is opened, the CI/CD pipeline automatically deploys that specific branch to a unique, temporary URL (e.g., `pr-123.myapp.com`). This allows designers and QA to physically click through the changes before they are merged."},{"@type":"Answer","text":"A mock database used in Jest."},{"@type":"Answer","text":"A local development server."}]},{"@type":"Question","name":"How does React Router (Client-Side Routing) technically work without reloading the browser page?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"It uses hidden iframes for every page."},{"@type":"Answer","text":"It uses the browser's HTML5 History API (`window.history.pushState`). It intercepts `` clicks, prevents the default browser HTTP request, manually updates the URL bar, and tells React to render the component matching the new path."},{"@type":"Answer","text":"It uses WebSockets to fetch HTML."},{"@type":"Answer","text":"It reloads the page extremely quickly."}]},{"@type":"Question","name":"In a Single Page Application (SPA), what architectural configuration MUST be made on the web server (e.g., Nginx or AWS S3)?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"The server must have Node.js installed."},{"@type":"Answer","text":"A Catch-All Routing rule. The server must be configured to return the `index.html` file for ALL requested URL paths. If a user refreshes `/dashboard`, the server must return `index.html` so React can boot up and read the URL."},{"@type":"Answer","text":"The server must block all POST requests."},{"@type":"Answer","text":"No configuration is needed."}]},{"@type":"Question","name":"What is 'Route Guards' or 'Protected Routes' architecture in React?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Encrypting the URL string."},{"@type":"Answer","text":"A Higher Order Component (HOC) or wrapper component that intercepts rendering. It checks if a user is authenticated (or has proper roles). If yes, it renders the child route. If no, it redirects them to the `/login` page."},{"@type":"Answer","text":"Preventing users from using the browser 'Back' button."},{"@type":"Answer","text":"A Webpack security plugin."}]},{"@type":"Question","name":"Why must Authorization (checking if a user is allowed to access data) ultimately be enforced on the Backend, not the Frontend?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Because frontend code is slower."},{"@type":"Answer","text":"Because frontend Javascript is completely in the user's control. A malicious user can simply open Chrome DevTools, modify the React state to `isAdmin: true`, and bypass any Frontend Route Guard."},{"@type":"Answer","text":"Because React doesn't support cryptography."},{"@type":"Answer","text":"Because the Virtual DOM cannot read cookies."}]},{"@type":"Question","name":"What is 'BFF' (Backend for Frontend) specifically useful for regarding Frontend Security?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Writing CSS securely."},{"@type":"Answer","text":"A BFF can hold highly sensitive API keys (like a Stripe Secret Key) or manage secure HTTP-Only cookies. The React app talks to the BFF, and the BFF talks to the third-party services, ensuring secrets never touch the user's browser."},{"@type":"Answer","text":"Encrypting React components."},{"@type":"Answer","text":"Preventing SQL injection in the browser."}]},{"@type":"Question","name":"What is 'Layout Architecture' in modern React Router or Next.js?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Using CSS Grid instead of Flexbox."},{"@type":"Answer","text":"Defining nested Layout components that persist across route changes. E.g., a `` contains the Sidebar. When navigating from `/dashboard/analytics` to `/dashboard/users`, only the inner content re-renders; the Sidebar maintains its state and doesn't unmount."},{"@type":"Answer","text":"Designing the database schema."},{"@type":"Answer","text":"Organizing files into folders."}]},{"@type":"Question","name":"In an enterprise architecture, why might you use an 'API Gateway' between your React app and your Microservices?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"To compile React code."},{"@type":"Answer","text":"The Gateway acts as a single entry point. It handles global concerns like SSL termination, Rate Limiting, CORS, and routing requests to the correct internal microservice, vastly simplifying the React app's network logic."},{"@type":"Answer","text":"To store Redux state."},{"@type":"Answer","text":"To serve static HTML files."}]},{"@type":"Question","name":"What is 'Dependency Injection' (DI) and how is it achieved in React architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Injecting SQL into a database."},{"@type":"Answer","text":"A design pattern where components receive their dependencies (like an API client or a logger) from the outside, rather than importing them directly. In React, this is elegantly achieved using the Context API."},{"@type":"Answer","text":"Injecting CSS into the DOM."},{"@type":"Answer","text":"Downloading NPM packages."}]},{"@type":"Question","name":"What is 'Accessibility' (a11y) Architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Making the codebase accessible to junior devs."},{"@type":"Answer","text":"Designing the component library and DOM structure from the ground up to support screen readers, keyboard navigation (tabbing), ARIA attributes, and color contrast, ensuring the app is usable by people with disabilities."},{"@type":"Answer","text":"Allowing the app to run offline."},{"@type":"Answer","text":"Making the database public."}]},{"@type":"Question","name":"What is 'Internationalization' (i18n) Architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Deploying servers to multiple countries."},{"@type":"Answer","text":"Extracting all hardcoded text strings from React components into external dictionary files (JSON). The app dynamically loads the correct language dictionary based on the user's locale preference at runtime."},{"@type":"Answer","text":"Converting code to different programming languages."},{"@type":"Answer","text":"Supporting international credit cards."}]},{"@type":"Question","name":"In an i18n architecture, why is it problematic to concatenate translated strings (e.g., `t('hello') + ' ' + userName`)?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"It causes React to crash."},{"@type":"Answer","text":"Because grammar and word order change drastically across languages. Concatenation hardcodes English grammar. You must use Interpolation (e.g., `t('hello_user', { name: userName })`) so translators can move the variable around."},{"@type":"Answer","text":"It prevents Server-Side Rendering."},{"@type":"Answer","text":"It bloats the bundle size."}]},{"@type":"Question","name":"What is the architectural purpose of a 'Design Document' or 'RFC' (Request for Comments) before writing code?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"To satisfy HR requirements."},{"@type":"Answer","text":"To propose a technical solution (e.g., 'Migrating from Redux to Zustand'), outline the trade-offs, and gather feedback from other senior engineers BEFORE spending weeks writing code that might be fundamentally flawed."},{"@type":"Answer","text":"To write CSS styles."},{"@type":"Answer","text":"To request time off."}]},{"@type":"Question","name":"What is 'White-labeling' (or Multi-Tenancy) in a React architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"Removing all CSS from the app."},{"@type":"Answer","text":"Building a single React codebase that can be deployed for dozens of different corporate clients. The app dynamically swaps out logos, brand colors (via CSS variables), and feature flags based on which client's domain is being accessed."},{"@type":"Answer","text":"Printing the code on white paper."},{"@type":"Answer","text":"Banning certain users."}]},{"@type":"Question","name":"How does 'Strict Mode' in TypeScript affect frontend architecture?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"It forces the use of Classes."},{"@type":"Answer","text":"It forces developers to explicitly handle all `null` and `undefined` possibilities, and explicitly define data shapes. It acts as an architectural safety net, preventing entire categories of runtime crashes before the code is even compiled."},{"@type":"Answer","text":"It prevents the use of React hooks."},{"@type":"Answer","text":"It makes the app run faster in the browser."}]},{"@type":"Question","name":"What is the 'Container / Presentational' (or Smart / Dumb) component pattern?","acceptedAnswer":{"@type":"Answer","text":"Correct Answer"},"suggestedAnswer":[{"@type":"Answer","text":"A Docker architecture."},{"@type":"Answer","text":"An architectural pattern where logic (fetching data, Redux state) is placed in a 'Container' component, which passes raw data via props to a pure, stateless 'Presentational' component that only handles the UI layout and CSS."},{"@type":"Answer","text":"A way to write CSS."},{"@type":"Answer","text":"A database pattern."}]},{"@type":"Question","name":"Why is tightly coupling a generic UI component (like a `
