Sign in

some important things to know as a react developer.

  1. Why is React named “React” ?

Answer: When the state of a React component (which is part of its input) changes, the UI it represents (its output) changes as well. This change in the description of the UI has to be reflected in the device we are working with. In a browser, we need to update the DOM tree. In a React application we don’t do that manually. React will simply react to the state changes and automatically (and efficiently) update the DOM when needed.

2. write the advantages of using reactJS.


  • It boosts productivity and facilitates further maintenance.
  • It ensures faster rendering.
  • It guarantees stable code.
  • It is SEO friendly.
  • It comes with a helpful developer toolset.
  • There is React Native for mobile app development.
  • It facilitates the overall process of writing components.

3. what is the virtual DOM (VDOM) and how does React use it to render to the DOM?

answer: The VDOM is a programming concept, providing a critical part of the React architecture. Rather than interacting directly with the DOM, changes are instead first rendered to the VDOM — a lightweight representation of the target state of the DOM. Changes made to the VDOM are batched together to avoid unnecessary frequent changes to the DOM. Each time these batched changes are persisted to the DOM, React creates a diff between the current representation and the previous representation persisted to the DOM, then applies the diff to the DOM. This abstraction layer for the DOM provides a simple interface for developers while allowing React to update the DOM in an efficient and performant manner.

4. Can web browsers read JSX directly?

answer: Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object. For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel to read JSX indirectly.

5. what is defaultProps?

answer: defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed. for example:

class CustomButton extends React.Component {
// ...

CustomButton.defaultProps = {
color: 'blue'

If props.color is not provided, it will be set by default to 'blue':

render() {
return <CustomButton /> ; // props.color will be set to blue

If props.color is set to null, it will remain null:

render() {
return <CustomButton color={null} /> ; // props.color will remain null

6. describe propTypes shortly.

answer: A React.js application is created by lots of components. These components get many specific attributes, just like a HTML tag does.
These attributes are called ”props” in React and can be of any type. It can be a string, function or an Array, as long as its valid javascript you can use it as a prop.

This flexibility is awesome but could also cause some problems. If I’m using a component written by another developer I have to figure out what props that component want, what’s required and also the correct type. React has a solution for this and its called propTypes. PropTypes defines type and which props are required. This benefits the future you and other developer using your component in two ways:

  1. You can easily open up a component and check which props are required and what type they should be.
    2. When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.

7. What is conditional rendering in React?

In React, conditional rendering refers to the process of delivering elements and components based on certain conditions.

There’s more than one way to use conditional rendering in React. As with most things in programming, some are better suited than others depending on the problem you’re trying to solve.

This tutorial covers the most popular ways to implement conditional rendering in React:

  1. How to write if...else in React
  2. Prevent rendering with null
  3. React element variables
  4. The ternary operator in React
  5. Short-circuit AND operator (&&)
  6. Immediately invoked function expressions (IIFEs)
  7. React subcomponents
  8. Enum objects
  9. Higher-order components (HOCs) in React

8. Write the limitations of React?

answer: Limitations of React are listed below:

  2. Its library is very large and takes time to understand
  4. Coding gets complex as it uses inline templating and JSX

9. What are the differences between a class component and functional component?


Class Components

  • Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
  • Class components extend from React.Component.
  • In here you have to use this keyword to access the props and functions that you declare inside the class components.

Functional Components

  • Functional Components are simpler comparing to class-based functions.
  • Functional Components mainly focuses on the UI of the application, not on the behavior.
  • To be more precise these are basically render function in the class component.
  • Functional Components can have state and mimic lifecycle events using Reach Hooks

10. What are React Hooks?

Answer: Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community. The main advantage of react hooks is the re-usability of stateful logic. It can be done with the help of custom hooks. Without changing component hierarchy, you can reuse stateful logic and it is easy to share custom hooks with other components.

junior frontend developer, ability to do hard work and honest