Core Concepts of React -Part 1
What Is React?
React JS is the most popular JavaScript library for front-end development. React is thin and it’s extremely easy use. One can easily mix it with other 3rd party libraries.
Frame-work Or Library?
There are two types of third party resources or helping hands for you; Frame-works and Library. In frame-works, some decisions are already made for you. On the other hand, in library, you need to make all decisions by yourself. React is just a library where you need to make all decisions by yourself.
Dom
If you visit inspect option, you will notice that all codes are showing you in HTML format. But you wrote them in JS, React, or something else. But why its happened? When a web page is loaded, the browser convert the website into dynamic HTML and shows you the output. This program works with the help of DOM. When you open a web page, the browser creates a Document Object Model of the page. The DOM is a W3C (World Wide Web Consortium) standard.It defines a standard for accessing documents.
The HTML DOM is an Object Model for HTML. It defines:
> HTML elements as objects.
> Properties for all HTML elements.
> Methods for all HTML elements.
> Events for all HTML elements.
The HTML DOM is an API (Programming Interface) for JavaScript:
> JavaScript can add/change/remove HTML elements
> JavaScript can add/change/remove HTML attributes
> JavaScript can add/change/remove CSS styles
> JavaScript can react to HTML events.
> JavaScript can add/change/remove HTML events.
React Components
Components are independent and reusable parts of code. They can be used in any parts of your codes/website. In a react component, input is the set of ‘props’ and output is the description of a UI. The structure of a component is just a plain JS function.
Components come in two types; Class components and Function components.
React Hocks
Hooks are a new addition in React 16.8. With the help of hooks, you can use state and other React features without writing a class. All hooks functions begin with the word “use” and they can only be used in function components.
