Job Interview Questions Senior React.JS Developer
This Article is for people, who need to prepare for a technical interview as a React.JS Senior developer position. Also the article is for managers or tech leaders, who need to prepare interview questions.
What is JSX?
-Stands for JavaScript XML
-magic syntax which we can use to talk to React, which then complies via Babel into the structure of for example React.creatElement and this again into HTML and CSS code.
What is Babel?
Babel is a JS to JS compiler. Our users of a web app can have different supported browsers. Those browsers have different JS versions like ES5 or ES6. The JS have a different supported functions.
What does TSX stands for?
TypeScript XML, which allows us to use type formats to easily and more performant code.
-Different why to compile: TS -> JavaScript -> ES5 JavaScript
Describe Data Flow in React?
In react data flows from the Top to the bottom. I think it is also called uni-directional.
That Means From the parent Component to the child component. Here we can use props or states for example. The basic way to pass data via props.
But we can also use Redux to manage the state.
What is the virtual Dom?
It is a concept used by React to provide faster or more performant updates to the actual DOM(Document Object Model). React keeps a copy of your actual DOM in memory. If there is a change of state like a click event or something similar then the virtual DOM will be updated. React then Synchronises the change to the DOM tree.
What is a State?
State could be explained as a JavaScript variable. And this variable is connected to triggers which then render automatically the update of the variable as HTML code. This means you don’t actually have to modify the DOM to show the results of the changed variable. It will automatically show.
Explain or List the Hooks in React?
useState := mostly for variables
useEffect := if we want to trigger something at a specific
useConcept
useRef
What Design Patterns do you know?
MVC: Model View Control. You divide your Product into different types.
What are the features of React.JS ?
-Break it down to different component
-Increased Performance(Only parts have to be rendered instead of the whole page)
-Live compiling you don’t need to reload the page. It detected the changes automaticaly
Can JSX directly be directly read by a browser ?
no because it is not ES5 or ES6 object. Browser only understand normal JS. Babel needs to do this translation.
What is the difference between ES5 and ES6 Standart ?
In ES6 we can use class and extends.
How do you create a React App?
We can use the CLI to creat a react app.
$ creat-react-app my-app-name
How do you comment a line in React?
/* this here is a comment section
and you can write anything here what should be commented.
The commend can be multi lined.
*/
What are components in React?
Components are like building blocks for a bigger UI puzzle. This means we mostly break down into independent reusable small pieces. In other word a component is mostly a pease of the user interface.
How can you do State management in react?
Redux:= It provides Reducers and Listeners.
Why is Class, Classname in React?
-Class is a reserved name or keyword in Javascript and therefore we can not define a name like that in React.
-Because it would cause an error in the compiler.
How would you delay a API Call until a component has mounted?
use function componentDidMout() and then do the API call with what ever you want AXIOS etc.
Should you use Ternaries or && Operators to conditionally render react components?
Ternaries are operations like contacts.length ? printContact() : null
What are the two hooks you use most often?
1.UseState
2.UseEffect
Why would someone use the useEffect hook?
The useEffect Hook allows you to perform side effects in your components.
What are LifeCycleMethods:
-componentDidMount:= directly after the component rendered
-componentDidUpdate:= Something when the state for example changes for example on a click or something
-componentWillUnMount:= when the Component gets destroyed or unmounted from the DOM
What comes to your mind if you’re using .map to render something within your JSX and I say the word “index”?
-Mapping over an array in react it is important to use an Index. Because React needs to know the element key to use.
What is Webpack?
Webpack is a bundler. That means we can bundle files together and create a model system. Soo we have importable variables and models. That means we don’t need global variables any more, which could be risky.
React Example App:
What is the difference between null, undefined and 0?
Conclusion
thank you for reading until here. I hope the questions helped you. If you want a PDF containing all the questions you can access it here:
