React Js Introduction

Hi everyone!

Today, I’m going to share what I’ve learned in React.js so far .This is the first blog of introduction about react.

What is React?

React is a javascript library used to create a frontend . It is mostly used to create a dynamic and interactive web pages. It was developed by facebook. It helps the developers to write the code much way simplier than normal js instead of writing 1000 lines of code the react uses the simple resuable funtions called components. React is a component based library.

Basics of react

what is mean by component?

Component is a fucntions that returns a react elements . it is recommened to keep the component nams as a pascal case and each component about likely less than 100 lines . component is fucntion so it will execute whenever it is called.

React element -> a piece of ui that created by the compoenent (jsx) . It is bascially an immutable object in js.

React Fragments ->If you want to return multiple child elements without adding an extra parent DOM element, you can use a React Fragment.

return
<>
<h1>Hello</h1>
</>

//you can also write like this 
import Fragment from 'react'

return
<Fragement>
<h1>Hello</h1>
</Fragment>

why react called as spa?

Get selvanivas’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

spa means single page application . It is basically a website containing only one base html file and render on the browser. Once the webpage loaded on the website any change in the content without rerendering the entire website.

MPA-> multipage application . it has a multiple pages in a single site . If we move from one page to another need rerendering the entire component.

How React Works ?

React Works Based on the Reconcilation Mechanishm . Reconcilation is the process of comparing the virtual dom with real dom.

virtual dom -> it is copy of the real dom carried by the react . Whatever we make the changes in the code it changes in this virtual dom.

the react comapres the both of them and updates the neccessary changes only . after changes the react copy it the updated real dom then do the same prcocess whenever the changes made.

Dynamic rendering

it means rendering the diffrent contents on the ui whenver the data changes in the application dynamcially.

Conditional rendering

it mean rendering the elements based on the conditions.

export const Rendering = () => {
 const isLoggedIn = true;
  return (
    <>
      {isLoggedIn ? <h1>Welcome</h1> : <h1>Please Login</h1>}
    </>
  )
}

it shows the content as welcome because the condition is true if it false the content on the ui i changed to please Login.