[Interview] React Interview Questions
===

###### tags: `React`, `interview`

Answer will be provided later.

### Q1: Everything in React is a ?

A. Module
B. Component
C. Package
D. Class

#### Answer:

---

### Q2: What is Babel?

A. A transpiler
B. An interpreter
C. A Compiler
D. Both Compiler and Transpilar

#### Answer

---

### Q3: How many elements does a react component return?

A. 1 Element
B. 2 Element
C. Multiple Elements
D. None of the above

#### Answer

---

### Q4: What does the "webpack" command do?

A. A module bundler
B. Runs react local development server
C. Transpiles all the Javascript down into one file
D. None of the above

#### Answer

---

### Q5: What are the limitations of ReactJS?

A. React is only for view layer of the app so we still need the help of other technologies to get a complete tooling set for development
B. React is using inline templating and JSX. This can seem awkward to some developers
C. The library of react is too large
D. All of these

#### Answer

---

### Q6: Props are __________ into other components.

A. Injected
B. Methods
C. Both A and B
D. All of these

#### Answer

---
### Q7: Which of the following API is a MUST for every ReactJS component?

A. getInitialState
B. render
C. renderComponent
D. None of the Above

#### Answer

---

### Q8: Which is the right way of accessing a function fetch() from an h1 element in JSX?

A. ``<h1>{fetch()}</h1>``
B. ``<h1>${fetch()}</h1>``
C. ``<h1>{fetch}</h1>``
D. ``<h1>${fetch}</h1>``

#### Answer

---

### Q9: What is used to pass data to a component from outside?

A. setState
B. render with arguments
C. PropTypes
D. props

#### Answer

---

### Q10: Which of the following is the correct syntax for a button click event handler foo?

A. ``<button onclick={this.foo()}>``
B. ``<button onclick={this.foo}>``
C. ``<button onClick={this.foo()}>``
D. ``<button onClick={this.foo}>``

#### Answer

---
### Q11: Which of the following is the correct syntax for a styled element?

A. ``<div class=”header”>``
B. ``<div class={{ backgroundColor: “red” }}>``
C. ``<div style=”header”>``
D. ``<div style={{ backgroundColor: “red” }}>``

#### Answer

---
### Q12: Which of the following is the correct syntax for exporting an object?

A. `export const object = {}`
B. `export object = {}`
C. `export default const object = {}`
D. `export default …object`

#### Answer

---

### Q13: Which of the following is the correct syntax for declaring a function?

A. `function = () => {}`
B. `const toggle = () => {}`
C. `function toggle = () => {}`
D. `const function toggle() => {}`

#### Answer

---

### Q14: What is the correct syntax for rendering the page?

A. `return (<></>)`
B. `return (<div>HELLO</div><div>WORLD</div>)`
C. `return “HELLO WORLD”`
D. `return ([componentA, component].map(component => component))`

#### Answer

---

### Q15: What is the right way to use react state?
Ex: `const [userProfile, setUserProfile] = useState({});`

A. `userProfile.name = peter`
B. `setUserProfile(“peter”)`
C. `return userProfile.name`
D. `someUserData.forEach(userData => setUserProfile(userData))`

#### Answer

---
### Q16: What is the correct syntax for using react prop?

A. `<Component propA=data />`
B. `<Component propA={1} />`
C. `<Component propA={functionA(“inputA”)} />`
D. `<Component propA=1 />`

#### Answer

---
### Q17: What is the correct syntax for using DOM event in React?

A. `<button onclick=”functionA(this)” />`
B. `<button onClick=”functionA(this)” />`
C. `<button onclick={functionA} />`
D. `<button onClick={functionA} />`

#### Answer

---
### Q18: What is the most suitable way to structure the below layout?

|     Header       |
| xx    |          |
| Left  |  content |
| Menu  |          |
| xx    |          |

A. `<Header /><LeftMenu /><Content />`
B. `<LeftMenu /><Header /><Content />`
C. `<LeftMenu /><Section><Header /><Content /></Section>`
D. `<LeftMenu /><Content />`

#### Answer

---

### Q19: What will happen if the following render() method executes?

render(){
const langs = ["Ruby","ES6","Scala"]
return <div> {lang.map(it => <p>{it}</p>)} </div>
}

---
### Q20: What is the different between “export default” and “export const”? Any props and cons ?

---
### Q21: What will happen after the component used?

const [count, setCount] = useState(0);

useEffect(() => {
	const interval = setInterval(() => {
		setCount(count + 1);
}, 1000);
return () =>  clearInterval(interval)
}, [count]);

render() {
	return <div> Counting: {count} </div>
}