10 fundamental things about React

Before start, I want to let you know this is just an introductory concept of reactjs.

1. What is React?

React is a javascript library for building fast and interactive user interfaces. It was developed at Facebook in 2011 and currently, it’s the most popular javascript library for building user interfaces. If you want to expand your job opportunities as a front-end developer you should have react on your resume. At the heart of all react application is components. A component is essentially a piece of the user interface. So when building an application with react we build a bunch of independent reusable components and then components compose them to build the complex user interface.

2. What is JSX?

JSX is an extension to javascript which means that it can process thing that normally is not part of JavaScript run thing behind the scenes. JSX allows us to write function calls in an HTML-Like syntax. It may look like HTML but it isn’t. Using JSX you can modify your code easily if you are familiar with HTML language. With the React library, it’s an extension to write XML -like code for components. But JSX is not necessary to write React applications we can write react application without JSX. JSX creates you react code cleaner and simpler. JSX finally transpiles to pure javascript which is known by the browsers.

3. How javascript work in React?

Consider that we have an array of objects with id, and email. We can use the javascript map function to render the array object into the DOM.

const Users = () => {
  const data = [
    { id: 1, email: 'john@Smith.com' },
    { id: 2, email: 'william@smith.com' },
    { id: 3, email: 'richard@smith.com' },
  ]

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.email}</li>
      ))}
    </ul>
  )
}

4. Virtual DOM

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. It is not invented by React but it uses it and provides it to free. React elements lives in the virtual DOM. They make the basic nodes here.

5. How virtual DOM works in React?

React creates a virtual DOM. When state changes in a component it firstly runs a ‘diffing’ algorithm. Which identifies what was changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the result of difference. Whenever a React component is changing the state, a diff algorithm in React runs and identifies what has changed. And then it updates the DOM with a result of diff. The point is — it’s done faster than it would be in the real DOM.

6. React is declarative

React is declarative meaning that you can be building a user interface without touching the DOM directly. We just tell React what we want the DOM to look like and just let React handle it from there.

7. React component is reusable

Components are building blocks of any React app and a typical React app will have many of these. For example navbar, footer, dropdown list, etc. A component consists of two parts: how it looks (UI) and how it works(UX). It's simple like javascript functions, when we need it, we can call it. React components can be stateful or stateless. A class component in react is stateful where functional components are stateless.

8. React Hooks

React 16.8 introduces new feature react hooks into the framework which allow you to state and other features without having to use class-based components. React hooks are actually a special type of function that allows us to store state data like useState hook or some side effect of the components like useEffect hook. Before hooks, react used the component life cycle method to implement side effects.

useState: It a function that we get from react. Once we invoked the function we need to pass the initial value. It returns a pair of values: the current state and a function that updates it.

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

useEffect: By default runs after every re-render. It is used when we want to set up side effects and that is some work outside of the component, think data fetching, listening from an event, way to work we pass a callback function.

useEffect(()=>{

//do something here

}, [])

If [] is blank its only runs the initial render.

Each and every time we run, when value changes [value].

9. Data Flow

React uses a unidirectional data flow pattern that sends data from parent component to child component. React props are used to receive data from the parent component as a parameter.

10. Conditional Rendering

Conditional rendering refers to us to shows the component based on certain condition

If- else

{isLoggedIn ? (

<LogoutButton onClick={this.handleLogoutClick} />

) : (

<LoginButton onClick={this.handleLoginClick} />

)}

Prevent rendering with null

{isExist ? <div>Yes</div> : null}

Short-circuit AND operator (&&)

const [showWelcome, setShowWelcome] = useState(true)

return (

<div>

{showWelcome &&<Welcome /> }

</div>

)

OR operator

Const [text,setText]=useState(‘ ’);

Return <>

<h1> {text || ‘Hello OR’} </h1>

</>

Happy Coding!!!! 😐😐😐😐😐😐😐😐