10 New Things I learned about React

Document Object Model, in short DOM. It represents kind of a tree structure. So, as it changes, whatever things it has in its under, also changes. But, that makes the app slow. That is where the Virtual DOM comes in. When we call a function in a react component, it makes the whole component messy. Here the virtual DOM works out and then push it to the actual DOM. Thus it helps the app to not be slow as well as work efficiently.

JSX in react is makes a developer’s life quite easier. In the back days, we have to write react.component and whatever name of the component is. But at present, we just write the JSX tag and the rest is done on its own.
JSX has some rules of its own. like a normal tag, it also has an opening & closing tag. The tag name must start with a capital letter. JSX tags ignore the boolean, null and undefined things. We can also pass props through it.

We can use defaultprops in an Html tag or JSX tag when there are no props. like if I set a component default colour as blue, that is the default props for this component.

prop-types is a kind of react packages created by Facebook. They are used to document the intended types of properties passed in components. React will check props passed to components.

If we create a website with react, it certainly has some issue related to optimizing. At first, we have to use the build file for optimization. We can build production file in many ways, like, single-file builds, brunch, browserify, rollup. For optimization performance, build is an essential issue. we often create mess building the production file. For that, we should avoid reconciliation.

React is not a framework, it’s just a library. It’s usually helping a developer to build something using components. A framework is a thing that provides server communication, routing etc. But in react, we take all decisions by ourselves. Also, it’s extremely easy to mix it up with third-party libraries.

React is all about Components. We just separate the codes by creating components. It’s easier so that if we make a mistake in any part of the website, we just go to that component and fix it. We can also create components by functions.

Hooks is a react component used in many cases. These are only used in function components. They are very powerful like you can do any kind of function work by them.

We always create react elements attributes by using camelcase. We do not pass a string to the components, we pass JS references as the event handler.

It is a fun fact that React always reacts to state changes. That’s why its name is React. It also keeps records of the rendering and whenever it sees a difference from the previous one, it updates. Then it sends and works in the DOM Operations.