Introduction to React

React: React is a JavaScript framework. In react, we use components that are reusable, composable, and stateful .we derive small components and put them together and make bigger components.

Create component: we can create a component using the function or using class

Here we will introduce both two method

Functional Components: Functional components are just JavaScript functions they can optionally receive an object of properties which is referred to as props and return HTML which describes the UI.now the HTML is actually called JSX.

Class Components: Class components are basically ES6 classes similar to functional component a class component also optionally receive props as input and return HTML apart from the props a class component can also maintain a private internal state in simpler words it can maintain some information which is private to that component and use that information to describe the user interface.

Virtual Dom: Virtual Dom is an object identical to the JavaScript Object. In simple words if I want to describe virtual Dom then I would say virtual dome is simply a representation of a JavaScript dome object like a lightweight copy .virtual Dom object has the same power and has properties and methods like Dom object but the virtual dome can not decide what’s on the screen, the virtual dome is just like a blueprint where you can decide to move but actually don’t move. So manipulating virtual Dom is faster than actual Dom.

JSX: JSX stands for JavaScript XML. It allows us to write HTML in React.The mechanism behind that is JSX convert HTML tags into React elements. The rule for writing JSX element is when an element type starts with a lowercase letter it denotes build-in-components and starts with a Capital letter defined as important in your JavaScript file. This task is passed to the React.craeteElement

Props in JSX: You can specify props in different way in JSX

1)you can pass any JavaScript expression as a props within curly braces

Ex:<MyComponent exp

{5–3 }/>

2) you can pass any string lateral as a props

Ex:<MyComponent mass

{‘hello’ }/>

3)you can pass true as a props

Ex:<MyComponent mass

{true }/>

React Hooks: React hooks are introduced in React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the function which “hook into” React state and lifecycle features from function components. It does not work inside classes and it should be used at the top level of react functions

Props vs State: props get passed to the component function parameter, and state is managed within the component variable declared in the function body. props are immutable and the state can be changed.

Context: React hooks provides a concept call Context. React Context API allows you to easily access data at different levels of the components tree, without passing props to every level.