React (JavaScript library): Difference between revisions

(2 intermediate revisions by the same user not shown)

Line 1:

==Components==

React has two types of components: class components (those which extend React.Component) and function components.

Components are reusable pieces of jsx which depend on some input properties and get rerendered whenever those properties change.

~~Function components are lighter weight than class~~ components and should be preferred for new code.

React has two types of components: function components and class components (those which extend React.Component).

Historically, class components were used for components with state and function components were stateless.

Today, function components can also have state using hooks and should be preferred for new code.

===Function components===

Line 9:

Line 12:

https://beta.reactjs.org/learn/managing-state

State can be managed in several ways:

* <code>useState</code> allows you to define a state variable, similar to a class property, which will trigger a rerender.

* [https://beta.reactjs.org/reference/react/useState <code>useState</code>] allows you to define a state variable, similar to a class property, which will trigger a rerender.

* <code>useReducer</code> allows you to refractor state manipulation to a separate ''reducer'' function outside of your component.

* [https://beta.reactjs.org/reference/react/useReducer <code>useReducer</code>] allows you to refractor state manipulation to a separate ''reducer'' function outside of your component.

* <code>useEffect</code> allows you to setup and remove listeners. These always run on the client in SSR variants of React.

* [https://beta.reactjs.org/reference/react/useEffect <code>useEffect</code>] allows you to setup and remove listeners. These always run on the client in SSR variants of React.

* Contexts

* [https://beta.reactjs.org/reference/react/useRef#useref <code>useRef</code>] returns a reference to an object with a <code>current</code> parameter which allows you to have state without rerendering.

Line 21:

Line 24:

Note that the state of the function is tied to their position in the React virtual dom.

A single component rendered multiple times will have different state.

==Frameworks==

@@ Line 1: / Line 1: @@
 ==Components==
-React has two types of components: class components (those which extend React.Component) and function components.
+Components are reusable pieces of jsx which depend on some input properties and get rerendered whenever those properties change.
-Function components are lighter weight than class components and should be preferred for new code.
+React has two types of components: function components and class components (those which extend React.Component).
+Historically, class components were used for components with state and function components were stateless.
+Today, function components can also have state using hooks and should be preferred for new code.
 ===Function components===
@@ Line 9: / Line 12: @@
 https://beta.reactjs.org/learn/managing-state
 State can be managed in several ways:
-* <code>useState</code> allows you to define a state variable, similar to a class property, which will trigger a rerender.
+* [https://beta.reactjs.org/reference/react/useState <code>useState</code>] allows you to define a state variable, similar to a class property, which will trigger a rerender.
-* <code>useReducer</code> allows you to refractor state manipulation to a separate ''reducer'' function outside of your component.
+* [https://beta.reactjs.org/reference/react/useReducer <code>useReducer</code>] allows you to refractor state manipulation to a separate ''reducer'' function outside of your component.
-* <code>useEffect</code> allows you to setup and remove listeners. These always run on the client in SSR variants of React.
+* [https://beta.reactjs.org/reference/react/useEffect <code>useEffect</code>] allows you to setup and remove listeners. These always run on the client in SSR variants of React.
 * Contexts
 * [https://beta.reactjs.org/reference/react/useRef#useref <code>useRef</code>] returns a reference to an object with a <code>current</code> parameter which allows you to have state without rerendering.
@@ Line 21: / Line 24: @@
 Note that the state of the function is tied to their position in the React virtual dom.
 A single component rendered multiple times will have different state.
 ==Frameworks==