Things about React

Not A Framework

First thing you must know unlike Angular an Embe react is it is not a framework. Its just a library of javaScript. While working in a company you might always need to work with a framework, react might not help you there. But there are some limitations while working with a whole framework whereas, react will assemble other third party tools to getdesired output, which is in a way very interesting.

React is more flexible to work with rather then frameworks. As all the framework have their own way of doing a thing which might conflict your client’s requirements.

JSX

One of the collest thing of react. Basically react allows you to use javascript code inside a html code and html code inside a javascript code. Well, if you are familar with html framework. It wont allow you to declare any variable inside it, you have to make another script file for it. But react allows us to use both in a single component.

JavaScript

In runtime all the react code is converted into plain javascript code.Some browser don’t support react, so its converted older version of ES5 for the browser to read properly.

DOM Manipulation

Dom refers to Document Object Model. It’s basically whatever you can see in the browser in a whole is called Document. In our web app we as user perform many tasks like clicking to any link or updating a form. What react does is react creates a virtual DOM . Virtual DOM is just the copy of the DOM you see in the web page. When the user does any task it is updated in the virtual DOM. There is a diff algorithm which compares the virtual DOM with the actual one and if change detected, it simply updates it to the actual DOM.

Components

Everything in react is a part of components. Suppose while writing an html code whatever you want to show in the home page has to be written in index.html file. React allows you divide thing a little, it’s not required to put everything on a single component. You can create multiple components and assemble them into one component. Like, I have a home component where I have assembled Navbar, Article and Footer component

return Home (){
      <Navbar/>
      <Article/>
      <Footer/>
}
export default Home

Props

Everything in react is based on components. Here, a parent-child relationship is maintained if you see the previous example, here Home is the parent component and Navbar , Article and Footer are the child components. Suppose you have a variable named email and you want to show it to the navbar. React has a beautiful thing called props. By using props you can pass values from parent component to child component.

<Navbar email={user.email}/>

From the child component you can access email or even pass it to its child component.

return Navbar(props)
{ console.log(props.email) }

State

React can keep state of a component. Suppose you are at a shopping website, and adding stuffs to your cart. So when you add a new stuff you payable amount will increase. Basically what happens here is react keeps you initial amount in a state. Whenever you add a product it updates the state and re-renders. It keep your old amount and adds the new value to it. States come handy when you have to update something based on the previous action of the user.

const [amount,setAmount] = useState(0)

here, the initial amount is 0 whenever , you add a new product setAmount method will update it inside the component.

Pass Data To Parent

If want to pass some data from child component to parent, you can’t do it using props. Here, what you can do is declare a function to update certain value and pass it to the child component using props and update it from child component.

Declarative

What declarative means is that you are not exactly telling or writing code to update anything in the DOM rather you are just updating the state. When the state updates it will eventually re-render or update the DOM. Like, if you take our previoys example,like you have added stuff to your cart and clicked for payment. In the code this change will be passed to a state. The virtual dom will be updated with change and eventually appear it on browser.

If react wasn’t declarative yo would have to create a listener to that button to check each time if payment has been updated. If not then do another task.

Optimization

React keeps a build version, which is mainly generated when you run the command npm run build. The build folder keep the packages with minified version.