Untitled Deck Flashcards
What is Single Page Applications (SPA)?
Single Page Applications (SPA) are web applications that load a single HTML page and dynamically update content as the user interacts with the app.
What are the phases of a React component lifecycle?
The phases of a React component lifecycle are Mounting, Updating, and Unmounting.
What are important CSS properties while creating animations?
Important CSS properties for animations include ‘transition’, ‘animation’, ‘keyframes’, and ‘transform’.
Give an example of passing parameters to event handlers in React.
An example is: <button onClick={(e) => this.handleClick(e, param)}>Click Me</button>.
How do state and props differ in React?
State is managed within the component, while props are passed from parent to child components.
How does JSX render elements differently than traditional JavaScript?
JSX allows you to write HTML-like syntax directly in JavaScript, which is then transformed into React elements.
Name a few React Bootstrap components.
React Bootstrap components include Button, Modal, Alert, and Navbar.
What are transitions in CSS, and how are they implemented in React?
Transitions in CSS allow property changes in CSS values to occur smoothly over a specified duration. In React, they can be implemented using CSS classes or libraries like React Transition Group.
What is inline styling in React, and what are its limitations?
Inline styling in React is done using the ‘style’ attribute with a JavaScript object. Limitations include lack of pseudo-classes and media queries.
Why is the Context API preferred over prop drilling in React?
The Context API is preferred because it allows for easier state management and avoids the need to pass props through many layers of components.
Explain template literals in ES6.
Template literals are string literals that allow embedded expressions, using backticks (``) and ${expression} syntax.
Explain destructuring in JS.
Destructuring is a syntax that allows unpacking values from arrays or properties from objects into distinct variables.
How do arrow functions differ from traditional functions in JavaScript?
Arrow functions do not have their own ‘this’ context and are syntactically shorter.
Explain the purpose of CSS grid in building React layouts.
CSS grid provides a two-dimensional layout system that allows for complex responsive designs in React applications.
How does let differ from var in JavaScript?
The ‘let’ keyword has block scope, while ‘var’ has function scope.
How do arrow functions improve code readability in React?
Arrow functions provide a concise syntax and maintain the context of ‘this’, enhancing readability.
How is async/await implemented in JavaScript?
Async/await is implemented using the ‘async’ keyword before a function and ‘await’ before a promise, allowing for asynchronous code to be written in a synchronous style.
How is CSS flexbox used in React layouts?
CSS flexbox is used to create flexible and responsive layouts by defining the direction and alignment of items in a container.
What are ES6 features that improve React code?
ES6 features that improve React code include arrow functions, destructuring, template literals, and modules.
List the types of input elements in HTML5 used for better user experience.
Types include text, email, password, date, number, range, and checkbox.
What are the benefits of using promises over callbacks?
Promises provide a cleaner syntax, better error handling, and avoid callback hell.
What are CSS modules, and how do they prevent naming conflicts in React?
CSS modules are a way to scope CSS by automatically generating unique class names, preventing naming conflicts.
What is destructuring, and how is it applied in React?
Destructuring allows extracting values from arrays or properties from objects, commonly used in React for props and state.
What are the differences between React Bootstrap and traditional Bootstrap?
React Bootstrap is built specifically for React, using components instead of jQuery, while traditional Bootstrap relies on jQuery.
What is the role of const in React development?
The ‘const’ keyword is used to declare variables that should not be reassigned, promoting immutability.
What is the role of CSS media queries in responsive design?
CSS media queries allow styles to be applied based on the viewport size, enabling responsive design.
What is the significance of promises in JavaScript?
Promises represent the eventual completion (or failure) of an asynchronous operation and its resulting value.
What is the use of async/await in React?
Async/await is used in React for handling asynchronous operations, such as data fetching, in a more readable way.
Why is ES6 important for React development?
ES6 introduces features that enhance code readability, maintainability, and efficiency in React development.
Describe the significance of package.json in a React app.
The package.json file manages project dependencies, scripts, and metadata for a React application.
How do flexbox layouts differ from grid layouts in React?
Flexbox is one-dimensional, focusing on either rows or columns, while grid is two-dimensional, allowing for complex layouts.
How is a React app file structure organized?
A typical React app file structure includes folders for components, assets, styles, and tests.
How is data fetched asynchronously using async/await?
Data is fetched by defining an async function, using ‘await’ before the fetch call to wait for the response.
What are caching strategies for better performance in PWAs?
Caching strategies include cache-first, network-first, and stale-while-revalidate.
What are common use cases for Context API in React?
Common use cases include theme management, user authentication, and global state management.
What are the benefits of using Redux for state management?
Redux provides a predictable state container, centralized state management, and easier debugging.
What is the purpose of the public folder in React?
The public folder contains static assets that can be served directly, such as index.html and images.
What is the role of media queries in responsive web design?
Media queries allow developers to apply different styles based on device characteristics, enhancing responsiveness.
What is the role of the src folder in a React project?
The src folder contains the source code for the React application, including components and styles.
Compare functional components to class components in React.
Functional components are simpler and often use hooks, while class components have lifecycle methods and state management.
Explain how useEffect can manage side effects in React.
The useEffect hook allows you to perform side effects in function components, such as data fetching and subscriptions.
How are click events handled in React?
Click events are handled using the onClick prop, which takes a function to execute on click.
How are hooks used to manage state in functional components?
Hooks like useState allow functional components to manage state without converting to class components.
What is the difference between HTTP and HTTPS?
HTTPS is the secure version of HTTP, using encryption to protect data during transmission.
Name Redux’s core principles for state management.
Core principles include a single source of truth, state is read-only, and changes are made with pure functions.
Provide an example of useEffect for fetching data in React.
Example: useEffect(() => { fetch(url).then(response => response.json()).then(data => setData(data)); }, [url]);
What are the benefits of using functional components in React?
Benefits include simpler syntax, easier testing, and the ability to use hooks for state and lifecycle management.
What is the purpose of Redux in React?
Redux is used for state management, providing a predictable state container for React applications.
What is the useState hook in React?
The useState hook is a function that allows you to add state to functional components.
When would you use Context API in React?
Use Context API when you need to pass data through many layers of components without prop drilling.
Compare PWA installation with traditional mobile apps.
PWAs can be installed directly from the browser without an app store, while traditional apps require installation from app stores.
How can a PWA be installed on a user’s device?
A PWA can be installed by visiting the website and selecting ‘Add to Home Screen’ in the browser.
How can caching strategies enhance PWAs?
Caching strategies enhance PWAs by allowing offline access and faster load times.
How do service workers enable offline functionality?
Service workers intercept network requests and serve cached resources when the network is unavailable.
Provide an example of caching strategies in a PWA.
An example is using a cache-first strategy to serve cached content before attempting to fetch from the network.
What are the key characteristics of a PWA?
Key characteristics include being reliable, fast, and engaging, with offline capabilities and responsive design.
What is a web app manifest?
A web app manifest is a JSON file that provides metadata about the web application, such as name, icons, and start URL.
What is the role of service workers in PWAs?
Service workers act as a proxy between the web app and the network, enabling offline capabilities and caching.
What technologies enable offline capabilities in PWAs?
Technologies include service workers, caching, and the web app manifest.
Why is a web app manifest important for PWAs?
The web app manifest allows users to install the PWA on their devices and provides a native app-like experience.
How are PWAs different from traditional web applications?
PWAs offer offline functionality, can be installed on devices, and provide a more app-like user experience.
What is the purpose of a service worker?
A service worker acts as a script that runs in the background and manages caching and network requests.
How can you secure React apps using SSL certificates?
You can secure React apps by obtaining and installing SSL certificates to enable HTTPS.
Explain the architecture of push notifications in React.
Push notifications in React involve a service worker, a push service, and the client application to receive messages.
How do CDNs mitigate DDoS attacks in React apps?
CDNs distribute traffic across multiple servers, reducing the load on the origin server and mitigating DDoS attacks.
How do JWTs work in web applications?
JWTs (JSON Web Tokens) are used for securely transmitting information between parties as a JSON object.
How does React impact SEO compared to server-rendered websites?
React can impact SEO negatively if not server-rendered, as search engines may struggle to index client-rendered content.
Name protocols that ensure secure communication in React apps.
Protocols include HTTPS, SSL/TLS, and WebSocket Secure (WSS).
What are the client-side and server-side roles in push notifications?
The client-side registers for notifications and displays them, while the server-side sends the notifications.
What is OAuth 2.0, and how does it support user authentication?
OAuth 2.0 is an authorization framework that allows third-party services to exchange information without sharing credentials.
What is the importance of HTTPS in a React application?
HTTPS ensures secure communication, protecting user data and improving trust in the application.
What is the process of obtaining an SSL certificate for production apps?
The process involves generating a CSR, submitting it to a certificate authority, and installing the certificate on the server.
Why is it necessary to redirect HTTP traffic to HTTPS?
Redirecting HTTP to HTTPS ensures all traffic is secure and protects user data from interception.
What is the importance of APIs in modern web development?
APIs enable communication between different software systems, allowing for integration and data exchange.
Describe Web Speech API and its use in web applications.
Web Speech API provides speech recognition and synthesis capabilities, allowing for voice interactions in web applications.
How are 360-degree videos relevant to VR?
360-degree videos provide immersive experiences in virtual reality, allowing users to explore environments.
How do ARIA roles improve accessibility in React apps?
ARIA roles provide additional semantic information to assistive technologies, improving accessibility for users with disabilities.
How does Virtual Reality (VR) differ from Augmented Reality (AR)?
VR immerses users in a completely virtual environment, while AR overlays digital content onto the real world.
Name four WCAG principles for accessibility in React.
The four principles are Perceivable, Operable, Understandable, and Robust.
Name libraries used for 3D graphics in React.
Libraries include Three.js, React Three Fiber, and Babylon.js.
What are the differences between marker-based and markerless AR?
Marker-based AR uses physical markers to trigger digital content, while markerless AR uses GPS and sensors for placement.
What is the benefit of WebXR for immersive web experiences?
WebXR provides APIs for creating immersive experiences in virtual and augmented reality directly in web browsers.
What is the significance of voice-based interactions for accessibility?
Voice-based interactions enhance accessibility by allowing users with disabilities to navigate and interact with applications.
Why are APIs important in AR/VR development?
APIs facilitate integration with hardware and software, enabling the development of immersive AR/VR experiences.
Explain how machine learning is used in React for recommendation systems.
Machine learning algorithms analyze user behavior to provide personalized recommendations within React applications.
How are WebSockets used in AR/VR for real-time communication?
WebSockets enable real-time, bidirectional communication between clients and servers, essential for interactive AR/VR experiences.
How does Semantic Web differ from the Traditional Web?
The Semantic Web aims to make data machine-readable, allowing for better data integration and interoperability.
How does WebXR improve VR experiences on the web?
WebXR provides standardized APIs for creating immersive VR experiences that work across different devices and platforms.
How is WebGL related to creating 3D graphics?
WebGL is a JavaScript API that allows rendering 3D graphics in web browsers without the use of plugins.
Provide an example of CSS code to create a 3D cube.
Example:
```css
.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
~~~
What are the advantages of using ARIA roles in React?
ARIA roles enhance accessibility by providing semantic meaning to elements, improving navigation for assistive technologies.
What are the steps to integrate a machine learning model in React?
Steps include training the model, exporting it, and using a library like TensorFlow.js to integrate it into the React app.
What is a ‘meta-framework,’ and how does it benefit modern web development?
A meta-framework is a framework built on top of other frameworks, providing additional features and simplifying development.
What is the role of 3D elements in enhancing web user experience?
3D elements create immersive and engaging experiences, making web applications more interactive and visually appealing.
How do DDoS attacks affect JavaScript-based applications?
DDoS attacks overwhelm the server with traffic, causing slowdowns or outages for JavaScript-based applications.
Name strategies for mitigating DDoS attacks on React apps.
Strategies include rate limiting, using CDNs, and implementing Web Application Firewalls (WAFs).
What is marker based AR?
Marker-based AR uses physical markers to trigger the display of digital content when viewed through a device.
What is VR? Tell any two applications.
Virtual Reality (VR) is an immersive experience that simulates a real or imagined environment. Applications include gaming and training simulations.
Which is better native mobile app or PWA with respect to speed?
Native mobile apps generally offer better speed and performance due to direct access to device hardware compared to PWAs.
