Fundamentals of React JS

React is a javascript library, not a complete framework and you may need the help of other libraries with React.

Framework:

The framework is a complete solution and serves a great purpose and has much built-in design decision which gives anyone to focus on writing good application-level logic. It has also many disadvantages. A framework is not flexible and you need to code in a certain way. A framework has also many large and full features. If you need small features you need to include the whole things.

React:

React is a javascript library used for building user interfaces. React focus on one thing and doing those things extremely well (follows the Unix philosophy). A user interface is anything we put in front of the user and a user use them to interact with a machine. A browser understands JavaScript and uses React to describe User Interfaces.

Dom:

DOM is known as a document object model and it is browsers programming interfaces for HTML and XML documents. DOM treat them as a tree structure and its use for changes a document’s structure style and content.

Virtual Dom:

After releasing React it comes with a smart idea of Virtual DOM. React generates a common language between developers and browsers which allows developers to declaratively describe the user interfaces and manage actions on their state instead of action on their dom elements. When expensive operation conducted on the DOM means a slow and janky experience for the users. React has a unique concept to get rid of these problems. During the render of a tree element React generates a virtual representation of that tree and store it in the memory for later use. Then it will proceed with the DOM operation that will make the tree show up in the browser.

React has two versions of the tree. When it needs to update a rendered tree, it generates a virtual representation of the updated tree then compared it with the previous tree and compute the difference between them and figure out the subtree which needs to be updated and only update those subtrees. It is known as the tree reconciliation algorithm.

Component:

React component is a javascript function that returns a react element.

In React component used to describe UI and it is reusable, composable and stateful. We generated many small components and put them into a bigger one. Its main benefits are components are reusable. In components, input is a set of props and the output is a description of a UI. A component can have a private state to hold data that can be changed over the life cycle of the components.

JSX:

JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

JSX is a javascript extension that allows us to write function calls in an HTML like syntax. O compiler that translates one form of syntax to another form is known as a transpiler. React has this type of transpiler known as TypeScript or Babel to translate JSX. When JSX is used the <tag></tag> syntax become a call to React.createElement(“tag”). The first letter of the component name is capital. A JSX compiler considers all name start with the lower case later as the name of HTML elements.

Props:

A react elements received a list of attributes when it gets rendered. This attribute is known as props. A function component receives this list as its first argument as an object with keys. receiving props is optional. Components must return a value. It cannot return undefined but null to cause the renderer to ignore its output.

Expressions in JSX:

You need to use a pair of curly brackets to write a javascript expression. You don’t use if condition but you can use a ternary expression. Anything that returns a value writes into {}.

Components vs Elements:

A react component is a template, a blueprint, a global definition. It can be either function or a class.

A react element is what gets returned from components. It’s an object that virtually describes the DOM nodes that components represent. In a function component, this object is returned by the function and in a class component, this object is returned by the components render method.

Benefits of components:

components make code readable, and easier to work with. It can be reused in the same application across multiple applications. We can also reuse it by using a different set of props.

Hooks:

Hooks is a special type of react function that can add extra features and declare states. All Hooks functions start with use. Some of them used to provide a stateful element like useState and others managed the side effects. React Hooks are so much powerful. It can only be used in function components, not in-class components.

UseState

UseState functions return an array with two items. One is used to keep initial data and store data over time and the other is using to set the data when needed.