React Js In Depth Analysis Part-1
Published: 2021-12-22 17:17:54

       

React is a frontend JavaScript library that is used to build UI components. React is sometimes referred to as a JavaScript framework as well. React creates a virtual DOM in the memory where you can do DOM manipulations instead of manipulating DOM directly. It’s faster since virtual DOM isn’t displayed on the web page.

JSX
JSX is a short form of JavaScript XML. JSX is basically a way to write HTML code inside JavaScript. JSX provides an HTML structure which is then combined with JavaScript codes and run in the JavaScript machine. JSX converts HTML tags into react elements. JSX is a syntax extension of React. 

Events
React events are just like DOM events. Just like HTML DOM, React has events like onClick, mouseOver, onChange etc. Events in react allows to change the layout based on the action and render the component. These actions are activated by handlers. In the event handler in order to pass an argument you should use an arrow function.

Hooks
Hooks in React are one of the most important parts. Hooks basically as the name suggests hook into React features and lifecycle methods. Hooks need to be imported first to use them. There are hooks that are built in the react library and there are hooks that are custom. Built-in hooks such as useState, useEffect, useRef, useContext, useReducer, useCallback, useMemo have their different functionalities. Custom hooks are created based on usage of the developers. They have custom names and functionalities that are based on where they need to be used. 
UseState is responsible for state changes of a component. State refers to data that needs to be changed. It’s written like this;  const [road, setRoad] = useState({})/ useState([]).  So, as you can see useState takes an initial state and returns two values and it can be as elements of an array or properties of an object. A state can also be an empty string. Then useState will return values based on the state it was initially given.
UseEffect  is a hook that performs the side effect of a component. Inside useEffect two arguments can be passed but the second one is optional. A basic structure of a useEffect hook is  useEffect(() => { { }, [ ] }). So, the first argument that is passed should be a function and the second argument in the third bracket is a dependency. useEffect hooks are used to change something after the component is rendered.
UseContext is used for managing a state globally. By using useContext you can share state between nested components easily. UseContext can be used together with useState hook and it should be in the top parent component in the stack that requires access to the state. To create a useContext hook you need to create a parent component where you will import createContext and initialize it. Then you wrap the child components in the context provider and share the state value.To use the context in a child component  you need to access it with useContext hook by importing useContext.
UseRef hook is used to keep values between renders. They can also be used for storing a mutable value which doesn’t cause any re-rendering after it’s updated. useRef only returns an object.

Props
Props are passed as arguments into react components. Props creates a connection between components and can send custom variables. It's a short form of properties so components take props as arguments that are objects. 

React Router
React Router is a library for navigating through different pages or routes. React Router creates multiple web pages of a website where different information is displayed. For using Router you need first put all the contents inside <BrowserRouter>. Then define routes with <Routes>. They are nested using <Route>. Inside <Routes> path names are defined. That’s how different routes are made.