React (software): Difference between revisions

Revision as of 01:26, 20 February 2022

Revision as of 09:14, 21 February 2022

Line 55:

===Components===

React code is made of entities called [[Component-based software engineering|components]]. These components are reusable and must be formed in the SRC folder following the Pascal Case as its naming conversion (capitalize camelCase). Components can be rendered to a particular element in the [[Document Object Model|DOM]] using the React DOM library. When rendering a component, one can pass inthe values thatbetween arecomponents known asthrough "[https://tekolio.com/what-are-props-in-react-and-how-to-use-them/ props]":<ref>{{cite web|url=https://reactjs.org/docs/components-and-props.html#props-are-read-only|website=React|title=Components and Props|publisher=Facebook|access-date=7 April 2018}}</ref>

<syntaxhighlight lang="jsjavascript">

import React from "react";

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

import Tool from "./Tool";

const Example = () => {

return (

<>

<div className="app">

<Tool name="Ateev" />

</div>

</>

);

};

export default Example;

</syntaxhighlight>

In the above example, the name prop with the value "Ateev" has been passed from the '''Example''' component to the '''Tool''' Component.

The two primary ways of declaring components in React is via function components and class-based components.

The two primary ways of declaring components in React isare viathrough function components and class-based components.

=== Functional components ===

Line 67 ⟶ 81:

<syntaxhighlight lang="js">

const Greeter = (props) => return <div>Hello, {props.name}!World</div>;

</syntaxhighlight>

Line 81 ⟶ 95:

}

}

</syntaxhighlight>Where class components are all about the use of classes and the lifecycle methods, functional components have hooks to deal with the state managements and other problems which we have face while writing code in React.

</syntaxhighlight>

Its not about which language to prefer over which, its about the ease of writing and understanding it which will make us a better developer

===Virtual DOM===

Another notable feature is the use of a virtual [[Document Object Model]], or [https://tekolio.com/react-virtual-dom-explained-in-simple-words/ virtual DOM]. React creates an [[In-memory processing|in-memory]] data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.<ref name=workingwiththebrowser>{{cite web |url=https://reactjs.org/docs/refs-and-the-dom.html |title=Refs and the DOM |website=React Blog}}</ref> This process is called '''reconciliation'''. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render subcomponents that actually change. This selective rendering provides a major performance boost.<ref name=":0">{{Cite web|title=React: The Virtual DOM|url=https://www.codecademy.com/articles/react-virtual-dom|access-date=2021-10-14|website=Codecademy|language=en}}</ref> It saves the effort of recalculating the CSS style, layout for the page and rendering for the entire page.<ref name=":0" />

=== Lifecycle methods ===

Line 117 ⟶ 133:

=== React hooks ===

[https://tekolio.com/what-are-hooks-in-react/ Hooks] are functions that let developers "hook into" React state and lifecycle features from function components.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-overview.html|title=Hooks at a Glance – React|website=reactjs.org|language=en|access-date=2019-08-08}}</ref> Hooks do not work inside classes — they let you use React without classes.<ref>{{Cite web|url=https://blog.soshace.com/what-the-heck-is-react-hooks/|title=What the Heck is React Hooks?|date=2020-01-16|website=Soshace|language=en|access-date=2020-01-24}}</ref>

React provides a few built-in hooks like <code>useState</code>,<ref>{{Cite web|url=https://reactjs.org/docs/hooks-state.html|title=Using the State Hook – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> <code>useContext</code>, <code>useReducer</code> , <code>useMemo</code> and <code>useEffect</code>.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-effect.html|title=Using the Effect Hook – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> Others are documented in the Hooks API Reference.<ref>{{Cite web|url=https://reactjs.org/docs/hooks-reference.html|title=Hooks API Reference – React|website=reactjs.org|language=en|access-date=2020-01-24}}</ref> <code>useState</code> , <code>useReducer</code> and <code>useEffect</code>, which are the most used, are for controlling state and side effects respectively.