React
1. What is React and why would you use it?
2. Can you explain the virtual DOM and how React uses it to render components?
3. What are props in React? How do they differ from state?
4. What is the difference between a class component and a functional component?
5. How do you manage state in a functional component?
6. What are React hooks? Can you explain the useState and useEffect hooks?
7. Can you explain the lifecycle methods of a React component?
8. How do you handle side effects in React components?
9. How do you implement routing in a React application?
10. What is the purpose of the BrowserRouter component in React Router?
11. How would you manage global state in a React application?
12. In redux , what is action , reducer ,store? And what is the use of dispatch?
JavaScript
13. What are the different data types in JavaScript?
14. Can you explain the difference between let, const, and var?
15. What are arrow functions and how do they differ from regular functions?
16. Can you explain the concept of closures in JavaScript?
17. How do you handle asynchronous operations in JavaScript?
18. What are promises and how do they work?
19. How do you select an element in the DOM using JavaScript?
20. Can you explain event delegation and why it’s useful?
21. Explain hoisting in JavaScript with examples.
22. How do you create array in javascript?
23. What are anonymous function?
24. What is spread operator?
25. What is destructuring?
26. What are the different type of comparison operators? And difference between == and
===?
Problem-Solving:
27. Write a function that takes a one-dimensional array of numbers and returns the sum of
all even numbers in the array. If there are no even numbers, the function should
return 0.
28. Reverse a number
Soft Skills and Experience
1. Experience:
o Can you describe a challenging project you worked on and how you
approached it?
o How do you stay updated with the latest developments in web development?
Task: Create a React component that allows users to add and remove items from a list. Style
the list items and the input form using CSS.
Requirements:
1. Create a React component called ItemList that displays a list of items.
2. Implement functionality to add items to the list using an input field and a button.
3. Implement functionality to remove items from the list.
4. Style the list items and the input form with basic CSS.
Here are some simpler interview questions and answers related to the
technologies mentioned:
### 1. **React & API Integration**
- **Question:** How would you fetch data from a FastAPI backend in a
React component?
- **Answer:** I would use the `useEffect` hook to fetch data when the
component mounts. The fetch operation would be performed using `fetch`
or `axios`, and the data would be stored in the component's state using
`useState`. Here's a basic example:
```javascript
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
{data ? <p>{data.message}</p> : <p>Loading...</p>}
</div>
);
}
```
### 2. **State Management**
- **Question:** How would you manage form data in a React
component?
- **Answer:** I would use the `useState` hook to manage form data.
Each input field's value would be stored in a state variable, and I'd update
the state using event handlers. Here's a simple example:
```javascript
import React, { useState } from 'react';
function BookingForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', { name, email });
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
}
```
### 3. **Authentication**
- **Question:** How would you add basic user authentication using
Firebase in a React app?
- **Answer:** I would use Firebase Authentication to manage user sign-
in and sign-up. In React, I would create a login form where users enter
their email and password, and then use Firebase's
`signInWithEmailAndPassword` or `createUserWithEmailAndPassword`
functions to handle authentication. Here’s a basic example:
```javascript
import React, { useState } from 'react';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const auth = getAuth();
const handleLogin = () => {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
console.log('User signed in:', userCredential.user);
})
.catch((error) => {
console.error('Error signing in:', error);
});
};
return (
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
<button onClick={handleLogin}>Login</button>
</div>
);
}
```
### 4. **Docker & Environment Setup**
- **Question:** Why would you use Docker in a development
environment?
- **Answer:** Docker helps ensure that the development environment is
consistent across different machines by packaging the application and its
dependencies into containers. This means that if it works on my machine,
it should work on any machine running the same Docker container. Docker
also simplifies setup, reduces compatibility issues, and makes it easy to
share the development environment with other team members.
### 5. **Error Handling**
- **Question:** How would you handle a failed API request in React?
- **Answer:** I would handle a failed API request by catching errors in
the `fetch` or `axios` call and displaying an error message to the user.
Here's a basic example:
```javascript
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => setError('Failed to fetch data'));
}, []);
return (
<div>
{error ? <p>{error}</p> : data ? <p>{data.message}</p> :
<p>Loading...</p>}
</div>
);
}
```
These questions and answers are simpler while still touching on key
concepts related to React, API integration, authentication, Docker, and
error handling.
