show line numbers in conde snippets

docs/languages/javascript/react/react-router.md

@@ -16,7 +16,7 @@ Router Types:
 - *BrowserRouter*: `/route`, uses HTML5 history API to provide clean URLs
 - *MemoryRouter*: no URL
 
-```js
+```js linenums="1"
 // index.js
 
 //other imports ...
@@ -31,7 +31,7 @@ React.render(
 )
 ```
 
-```js
+```js linenums="1"
 // Component.js
 import { Route, Route } from "react-router-dom";
 
@@ -52,7 +52,7 @@ import { Route, Route } from "react-router-dom";
 
 ### URL Parameters & Query String
 
-```js
+```js linenums="1"
 // Given
 <Route path="/route/:placeholder" element={<Component props={props} />} />
 // URL: app.com/route/sub-route?param=value
@@ -66,7 +66,7 @@ function Component(props) {
 
 ### Redirecting
 
-```js
+```js linenums="1"
 import { Navigate } from "react-router-dom";
 
 // redirects to another URL on render, shouldn't be rendered on component mount but after an action
@@ -80,7 +80,7 @@ props.history.push("/new-route");
 
 ### Prompts
 
-```js
+```js linenums="1"
 import { Prompt } from "react-router-dom";
 
 // displays a prompt when the condition is true
@@ -91,7 +91,7 @@ import { Prompt } from "react-router-dom";
 
 Clicks on a link created with React-Router will be captured by react an all the routing will happen client side.
 
-```js
+```js linenums="1"
 import { Link } from "react-router-dom";
 
 // TARGET: <Route path="/route/:itemId" />

docs/languages/javascript/react/react-tests.md

@@ -4,7 +4,7 @@
 
 ### Jest Configuration
 
-```js
+```js linenums="1"
 // jest.config.js
 module.exports = {
   testEnvironment: 'jsdom',
@@ -18,7 +18,7 @@ module.exports = {
 
 [Expect docs](https://jestjs.io/docs/expect)
 
-```js
+```js linenums="1"
 // .spec.js or .test.js
 it("test description", () => {
     // test body
@@ -36,7 +36,7 @@ describe("test group name", () => {
 
 In `Component.Snapshots.js`:
 
-```js
+```js linenums="1"
 import React from "react";
 import renderer from "react-test-renderer";
 
@@ -60,7 +60,7 @@ it("test description", () => {
 
 ### Enzyme Configuration
 
-```js
+```js linenums="1"
 // testSetup.js
 import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-<version>";
@@ -72,7 +72,7 @@ configure({ adapter: new Adapter() });
 
 In `Component.test.js`:
 
-```js
+```js linenums="1"
 import React from "react";
 import { shallow, mount } from "enzyme";
 // eventual wrapper components (react-router, react-redux's provider, ...) for mount render
@@ -125,7 +125,7 @@ Encourages to write test based on what the user sees. So components are always *
 
 In `Components.test.js`:
 
-```js
+```js linenums="1"
 import React from "react";
 import { cleanup, render } from "@testing-library/react";
 

docs/languages/javascript/react/react.md

@@ -9,7 +9,7 @@ There are two types of react components:
 
 Both types can be stateful and have side effects or be purely presentational.
 
-```jsx
+```jsx linenums="1"
 // functional component
 const Component = (props) => {
     return (
@@ -33,7 +33,7 @@ Within the component state can be changed while the props object represent fixed
 
 JSX syntax can represent HTML but gets converted to pure JavaScript before being sent to the browser:
 
-```js
+```js linenums="1"
 // JSX
 const element = (
   <h1 className="greeting">Hello, world!</h1>
@@ -49,7 +49,7 @@ const element = React.createElement(
 
 ### App Entry-point
 
-```js
+```js linenums="1"
 const container = document.getElementById('root')!;
 const root = createRoot(container);
 
@@ -59,7 +59,7 @@ root.render(element)
 
 ### Dynamic Expressions
 
-```js
+```js linenums="1"
 <tag>{expression}</tag>  // expression is evaluated an it's result is displayed
 <tag onEvent={funcReference}>{expression}</tag>
 <tag onEvent={() => func(args)}>{expression}</tag>
@@ -67,7 +67,7 @@ root.render(element)
 
 ### Props
 
-```js
+```js linenums="1"
 <Component propName={value} />  // pass a value the component
 <Component propName={funcReference} />  // pass a function to the component
 
@@ -83,7 +83,7 @@ class Component extends React.Component{
 
 ### Simple Function Component
 
-```js
+```js linenums="1"
 // Button.js
 import { useState } from "react";
 
@@ -105,7 +105,7 @@ export default Button;
 
 ### Simple Class Component
 
-```js
+```js linenums="1"
 class Button extends React.Component {
 
     state = {count: 0};
@@ -137,7 +137,7 @@ class Button extends React.Component {
 
 ### Nesting Components
 
-```js
+```js linenums="1"
 import { useState } from "react";
 
 function Button(props) {
@@ -173,7 +173,7 @@ export default App;
 
 ### User Input (Forms)
 
-```js
+```js linenums="1"
 function Form() {
     const [userName, setUserName] = useState("");
 
@@ -198,7 +198,7 @@ function Form() {
 
 ### Lists of Components
 
-```js
+```js linenums="1"
 // ...
     <div>
         {array.map(item => <Component key={uniqueID}>)}
@@ -219,7 +219,7 @@ Hook used to create a state object.
 - state object (getter)
 - updater function (setter)
 
-```js
+```js linenums="1"
 const [state, setState] = useState(default);
 ```
 
@@ -227,7 +227,7 @@ const [state, setState] = useState(default);
 
 Hook used to trigger an action on each render of the component or when one of the watched items changes.
 
-```js
+```js linenums="1"
 
 useEffect(() => {
     // "side effects" operations
@@ -238,7 +238,7 @@ useEffect(() => {
 
 ### Custom Hooks
 
-```js
+```js linenums="1"
 // hook definitions
 const useCustomHook = () => {
     // eventual state definitions

docs/languages/javascript/react/redux-tests.md

@@ -9,7 +9,7 @@ Connected components are wrapped in a call to `connect`. Way of solving the prob
 
 In `Component.js`:
 
-```js
+```js linenums="1"
 export function Component(props) { /* ... */ }  // export unconnected component
 
 export default connect(mapStateToProps, mapDispatchToProps)(Component)  // default export of connected component
@@ -17,7 +17,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(Component)  // defau
 
 In `Component.test.js`:
 
-```js
+```js linenums="1"
 import React from "react";
 // import enzyme or react testing library
 
@@ -48,7 +48,7 @@ it("test description", () => {
 
 ## Tests for Action Creators
 
-```js
+```js linenums="1"
 import * as actions from "path/to/actionCreators";
 // import eventual action types constants
 // import mock data
@@ -65,7 +65,7 @@ it("test description", () => {
 
 ## Tests for Reducers
 
-```js
+```js linenums="1"
 import reducer from "path/to/reducer";
 import * as actions from "path/to/actionCreators";
 
@@ -83,7 +83,7 @@ it("test description", () => {
 
 ## Tests for the Store
 
-```js
+```js linenums="1"
 import { createStore } from "redux";
 
 import rootReducer from "path/to/rootReducer";
@@ -111,7 +111,7 @@ Thunk testing requires the mocking of:
 - store (using `redux-mock-store`)
 - HTTP calls (using `fetch-mock`)
 
-```js
+```js linenums="1"
 import thunk from "redux-thunk";
 import fetchMock from "fetch-mock";
 import configureMockStore from "redux-mock-store";

docs/languages/javascript/react/redux.md

@@ -11,7 +11,7 @@ By convention, that information is stored in a field called `payload`.
 
 **Action Creators** are functions that create and return action objects.
 
-```js
+```js linenums="1"
 function actionCreator(data)
 {
     return { type: ACTION_TYPE, payload: data };  // action obj
@@ -30,7 +30,7 @@ The store will run its reducer function and save the new state value inside.
 
 In `initialState.js`;
 
-```js
+```js linenums="1"
 export default {
     // initial state here
 }
@@ -38,7 +38,7 @@ export default {
 
 In `configStore.js`:
 
-```js
+```js linenums="1"
 // configStore.js
 import { createStore, applyMiddleware, compose } from "redux";
 
@@ -71,7 +71,7 @@ Reducers must **always** follow some specific rules:
   Instead, they must make *immutable updates*, by copying the existing `state` and making changes to the copied values.
 - They must not do any asynchronous logic, calculate random values, or cause other "side effects"
 
-```js
+```js linenums="1"
 import initialState from "path/to/initialState";
 
 function reducer(state = initialState, action) {
@@ -118,7 +118,7 @@ Presentational Components:
 
 Used at the root component and wraps all the application.
 
-```js
+```js linenums="1"
 // index.js
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -139,7 +139,7 @@ ReactDOM.render(
 );
 ```
 
-```js
+```js linenums="1"
 // Component.js
 import { connect } from 'react-redux';
 import { increment, decrement, reset } from './actionCreators';
@@ -183,7 +183,7 @@ A "thunk" is a function that wraps an expression to delay it's evaluation.
 
 In `configStore.js`:
 
-```js
+```js linenums="1"
 import { createStore, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 
@@ -199,7 +199,7 @@ function configStore(initialState) {
 }
 ```
 
-```js
+```js linenums="1"
 // usually action on async func success
 function actionCreator(arg) {
     return { type: TYPE, data: arg };
@@ -241,7 +241,7 @@ Using Create React App​
 
 The recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components.
 
-```sh
+```sh linenums="1"
 # Redux + Plain JS template
 npx create-react-app my-app --template redux
 
@@ -286,7 +286,7 @@ Included Default Middleware​:
 
 Currently, the return value of `getDefaultMiddleware()` is:
 
-```js
+```js linenums="1"
 // development
 const middleware = [thunk, immutableStateInvariant, serializableStateInvariant]
 
@@ -294,7 +294,7 @@ const middleware = [thunk, immutableStateInvariant, serializableStateInvariant]
 const middleware = [thunk]
 ```
 
-```js
+```js linenums="1"
 
 import { combineReducers } from 'redux'
 import { configureStore } from '@reduxjs/toolkit'
@@ -320,7 +320,7 @@ export default store
 
 ### [`createAction`](https://redux-toolkit.js.org/api/createAction)
 
-```js
+```js linenums="1"
 import { createAction } from '@reduxjs/toolkit';
 
 const increment = createAction<number | undefined>('counter/increment');
@@ -333,7 +333,7 @@ increment.toString();  // 'counter/increment'
 
 ### [`createReducer`](https://redux-toolkit.js.org/api/createReducer)
 
-```js
+```js linenums="1"
 import { createAction, createReducer } from '@reduxjs/toolkit'
 
 interface CounterState {
@@ -368,7 +368,7 @@ Internally, it uses `createAction` and `createReducer`, so it's possible to use
 
 **Note**: action types will have the `<slice-name>/<reducer-name>` shape.
 
-```js
+```js linenums="1"
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 interface CounterState {
@@ -415,7 +415,7 @@ The `payloadCreator` function will be called with two arguments:
 
 The logic in the `payloadCreator` function may use any of these values as needed to calculate the result.
 
-```js
+```js linenums="1"
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 
 const payloadCreator = async (arg, ThunkAPI): Promise<T> => { /* ... */ };
@@ -444,7 +444,7 @@ It is intended to simplify common cases for loading data in a web application, e
 
 RTK Query is included within the installation of the core Redux Toolkit package. It is available via either of the two entry points below:
 
-```cs
+```cs linenums="1"
 import { createApi } from '@reduxjs/toolkit/query'
 
 /* React-specific entry point that automatically generates hooks corresponding to the defined endpoints */