This ebook covers the best practices to follow in React.

React Best Practices



## Making a case for Axios

In many applications we are using low level fetch methods and making custom adjustments as we need.
It works but Axios can abstract away most of the stuff that's done manually there.
If we use Axios, we can handle these cases much more cleanly.

For example, Axios interceptors are much easier to set up.
Also, when we import Axios, we receive a singleton.
So, whatever change we make will be reflected anywhere we use Axios. T
his is useful while handling headers.
When logging in, we can set auth tokens in Axios headers so that we won't have to specify it for every requests.
When logging out, we can reset the Axios headers.


## Why use Axios?

Axios helps to keep things D.R.Y with **instances**, **interceptors**, and **defaults**. This can help with complex applications that are frequently making API requests.

* __Interceptors:__ Access the request or response configuration (headers, data, etc) as they're outgoing or incoming. These functions can act as gateways to see configuration or add/modify data.
* __Instances:__ Create reusable instances with baseUrl, headers, and other configuration already set up.
* __Defaults:__ Set default values for common headers (like Authorization) on outgoing requests. this will be useful if you're authenticating to a server on every request.

> Separate instances are often created for various APIs, interceptors are set up for global error handling, and defaults are often set, or unset, for things like common headers.

Axios’s library has a few other useful features.

1. Handling timeout
2. Intercept and/or Cancel requests
3. Protection against XSRF
4. Automatic transforms for JSON data
5. Wide support for browsers

### Install
```bash
$ yarn add axios
```

### Usage
```javascript
axios.get('/users/12345')
  .then(response => {
    // handle success
    console.log(response);
  })
  .catch(error => {
    // handle error
    console.log(error);
  })
  .then(() => {
    // always executed
  });
```

## Setup
It is suggested to add following configurations in `componentDidMount` of `App.jsx` so that the axios instance is prepared to be used throughout the app.

### 1. Default config

```javascript
import axios from 'axios';
import { getCSRFToken } from 'components/utils';

axios.defaults.baseURL = 'https://example.com/api/v1/';
axios.defaults.timeout = 1000;
axios.defaults.headers.common['X-CSRF-Token'] = getCSRFToken();

axios.get('/users/12345')
  .then(response => {
    console.log(response);
  });
```

### 2. Create an instance with default config
This could be useful for making different API calls which may not be done from the default instance. For example: External services etc.

```javascript
import axios from 'axios';
import { getCSRFToken } from 'components/utils';

const API = axios.create({
  baseURL: 'https://example.com/api/v1/',
  timeout: 1000,
  headers: {
    'X-CSRF-Token': getCSRFToken()
  }
});

API.get('/users/12345')
  .then(response => {
    console.log(response);
  });
```

### 3. Intercept `requests` to add auth headers
```javascript
const requestHandler = request => {
  request.headers['Authorization'] = getAuthHeader();

  return request;
}

axios.interceptors.request.use(request => requestHandler(request));
```

### 4. Intercept `responses` to log errors
```javascript
// Provide only response json part
// => Chuk other metadata provided by axios
const responseSuccessHandler = response => {
  return response.data;
};

// Log & Sanitize errors response
// => The errors given by server will not be always consistent so we
//    could sanitize the response and return proper error to the client.
const responseErrorHandler = error => {
  var errors = ["Something went wrong, please try again!"];

  if (error.response) {
    if (error.response.data.errors)
      errors = error.response.data.errors;
    if (error.response.data.error)
      errors = [error.response.data.error];

    if (error.response.status === 401)
      forceLogoutUser();
  } else if (error.request) {
    console.log(error.request);
  } else {
    console.log('Error', error.message);
  }

  return Promise.reject({
    status: error.response.status,
    errors: errors
  });
}

axios.interceptors.response.use(
  response => responseSuccessHandler(response),
  error => responseErrorHandler(error)
);
```

## Little things that matter

Axios simplifies and abstracts away a lot of code for us. Here are some useful abstractions that axios provides to us.

### 1. Track upload progress

Axios is based on XMLHttpRequest and consequently all the events, properties and methods that come along with it are available in Axios. A well known fact(nitpick) about fetch() is that it doesn't provide
a method to track **upload progress**. Axios provides very easy ways to track upload progress on the other hand.

Here is an example from the [axios repo](https://github.com/axios/axios/blob/master/examples/upload/index.html) itself:

```javascript
const [uploadProgress, setUploadProgress] = useState(0); // display uploadProgress value in a loader
// other lines of code
// .......

const config = {
   onUploadProgress: progressEvent => {
     const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
     setUploadProgress(percentCompleted);
   }
 };

 try {
   const updatedBlog = axios.put('/upload/server', data, config);
   return updatedBlog.response.data;
 } cactch(err) {
   if(!err.response) {
     throw err;
   }
   throw err.response.data;
 }
```

### 2. Set timeout

As shown earlier setting timeout is as easy as adding a `timeoout: 3000` key-value pair to the axios config object.
fetch() provides the [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) interface for timeouts, but it is not as simple to implement as in axios.
You can also implement your own higher-order function and make the fetch call inside the returned function.

## References

- Kent C. Dodds' [opinion](https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper) on when to prefer which among axios and fetch.


<h2>Making a case for Axios</h2>
<p>In many applications we are using low level fetch methods and making custom adjustments as we need.
It works but Axios can abstract away most of the stuff that's done manually there.
If we use Axios, we can handle these cases much more cleanly.</p>
<p>For example, Axios interceptors are much easier to set up.
Also, when we import Axios, we receive a singleton.
So, whatever change we make will be reflected anywhere we use Axios. T
his is useful while handling headers.
When logging in, we can set auth tokens in Axios headers so that we won't have to specify it for every requests.
When logging out, we can reset the Axios headers.</p>
<h2>Why use Axios?</h2>
<p>Axios helps to keep things D.R.Y with <strong>instances</strong>, <strong>interceptors</strong>, and <strong>defaults</strong>. This can help with complex applications that are frequently making API requests.</p>
<ul>
<li><strong>Interceptors:</strong> Access the request or response configuration (headers, data, etc) as they're outgoing or incoming. These functions can act as gateways to see configuration or add/modify data.</li>
<li><strong>Instances:</strong> Create reusable instances with baseUrl, headers, and other configuration already set up.</li>
<li><strong>Defaults:</strong> Set default values for common headers (like Authorization) on outgoing requests. this will be useful if you're authenticating to a server on every request.</li>
</ul>
<blockquote>
<p>Separate instances are often created for various APIs, interceptors are set up for global error handling, and defaults are often set, or unset, for things like common headers.</p>
</blockquote>
<p>Axios’s library has a few other useful features.</p>
<ol>
<li>Handling timeout</li>
<li>Intercept and/or Cancel requests</li>
<li>Protection against XSRF</li>
<li>Automatic transforms for JSON data</li>
<li>Wide support for browsers</li>
</ol>
<h3>Install</h3>
<pre><code class="language-bash">$ yarn add axios
</code></pre>
<h3>Usage</h3>
<pre><code class="language-javascript">axios.get('/users/12345')
  .then(response =&gt; {
    // handle success
    console.log(response);
  })
  .catch(error =&gt; {
    // handle error
    console.log(error);
  })
  .then(() =&gt; {
    // always executed
  });
</code></pre>
<h2>Setup</h2>
<p>It is suggested to add following configurations in <code>componentDidMount</code> of <code>App.jsx</code> so that the axios instance is prepared to be used throughout the app.</p>
<h3>1. Default config</h3>
<pre><code class="language-javascript">import axios from 'axios';
import { getCSRFToken } from 'components/utils';

axios.defaults.baseURL = 'https://example.com/api/v1/';
axios.defaults.timeout = 1000;
axios.defaults.headers.common['X-CSRF-Token'] = getCSRFToken();

axios.get('/users/12345')
  .then(response =&gt; {
    console.log(response);
  });
</code></pre>
<h3>2. Create an instance with default config</h3>
<p>This could be useful for making different API calls which may not be done from the default instance. For example: External services etc.</p>
<pre><code class="language-javascript">import axios from 'axios';
import { getCSRFToken } from 'components/utils';

const API = axios.create({
  baseURL: 'https://example.com/api/v1/',
  timeout: 1000,
  headers: {
    'X-CSRF-Token': getCSRFToken()
  }
});

API.get('/users/12345')
  .then(response =&gt; {
    console.log(response);
  });
</code></pre>
<h3>3. Intercept <code>requests</code> to add auth headers</h3>
<pre><code class="language-javascript">const requestHandler = request =&gt; {
  request.headers['Authorization'] = getAuthHeader();

  return request;
}

axios.interceptors.request.use(request =&gt; requestHandler(request));
</code></pre>
<h3>4. Intercept <code>responses</code> to log errors</h3>
<pre><code class="language-javascript">// Provide only response json part
// =&gt; Chuk other metadata provided by axios
const responseSuccessHandler = response =&gt; {
  return response.data;
};

// Log &amp; Sanitize errors response
// =&gt; The errors given by server will not be always consistent so we
//    could sanitize the response and return proper error to the client.
const responseErrorHandler = error =&gt; {
  var errors = [&quot;Something went wrong, please try again!&quot;];

  if (error.response) {
    if (error.response.data.errors)
      errors = error.response.data.errors;
    if (error.response.data.error)
      errors = [error.response.data.error];

    if (error.response.status === 401)
      forceLogoutUser();
  } else if (error.request) {
    console.log(error.request);
  } else {
    console.log('Error', error.message);
  }

  return Promise.reject({
    status: error.response.status,
    errors: errors
  });
}

axios.interceptors.response.use(
  response =&gt; responseSuccessHandler(response),
  error =&gt; responseErrorHandler(error)
);
</code></pre>
<h2>Little things that matter</h2>
<p>Axios simplifies and abstracts away a lot of code for us. Here are some useful abstractions that axios provides to us.</p>
<h3>1. Track upload progress</h3>
<p>Axios is based on XMLHttpRequest and consequently all the events, properties and methods that come along with it are available in Axios. A well known fact(nitpick) about fetch() is that it doesn't provide
a method to track <strong>upload progress</strong>. Axios provides very easy ways to track upload progress on the other hand.</p>
<p>Here is an example from the <a href="https://github.com/axios/axios/blob/master/examples/upload/index.html">axios repo</a> itself:</p>
<pre><code class="language-javascript">const [uploadProgress, setUploadProgress] = useState(0); // display uploadProgress value in a loader
// other lines of code
// .......

const config = {
   onUploadProgress: progressEvent =&gt; {
     const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
     setUploadProgress(percentCompleted);
   }
 };

 try {
   const updatedBlog = axios.put('/upload/server', data, config);
   return updatedBlog.response.data;
 } cactch(err) {
   if(!err.response) {
     throw err;
   }
   throw err.response.data;
 }
</code></pre>
<h3>2. Set timeout</h3>
<p>As shown earlier setting timeout is as easy as adding a <code>timeoout: 3000</code> key-value pair to the axios config object.
fetch() provides the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController">AbortController</a> interface for timeouts, but it is not as simple to implement as in axios.
You can also implement your own higher-order function and make the fetch call inside the returned function.</p>
<h2>References</h2>
<ul>
<li>Kent C. Dodds' <a href="https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper">opinion</a> on when to prefer which among axios and fetch.</li>
</ul>


Prefer Axios over fetch



## Use Axios interceptors

Axios lets us intercept `request` and `response`, former is used when we want to add additional configuration (headers, data etc) while the latter is used when we want to perform some action or modify the response (log errors, logout on 401 etc).

## Intercept all requests

Here, we will intercept and add auth headers to all `requests` that will be made using Axios instance.

```javascript
const requestHandler = request => {
  request.headers['Authorization'] = getAuthHeader();

  return request;
}

axios.interceptors.request.use(request => requestHandler(request));
```


## Listen to all responses
The request will be resolved by default when the status code is between `200` -  `300`, otherwise the request will be rejected.
This could be changed using [validateStatus](https://github.com/axios/axios#handling-errors) in the request config.

### 1. Log all errors

```javascript
const responseSuccessHandler = response => {
  return response;
};

const responseErrorHandler = error => {
  if (error.response) {
    console.error(error.response.data);
    console.error(error.response.status);
    console.error(error.response.headers);
  } else if (error.request) {
    console.error(error.request);
  } else {
    console.error('Error', error.message);
  }
  console.error(error.config);

  return Promise.reject(error);
}

axios.interceptors.response.use(
  response => responseSuccessHandler(response),
  error => responseErrorHandler(error)
);
```

### 2. Logout on 401

If status code is 401, redirect user to Login route. If we keep client side authentication states, reset them.

```javascript
const responseSuccessHandler = response => {
  return response;
};

const responseErrorHandler = error => {
  if (error.response.status === 401) {
    // Add your logic to
    //  1. Redirect user to LOGIN
    //  2. Reset authentication from localstorage/sessionstorage
  }

  return Promise.reject(error);
}

axios.interceptors.response.use(
  response => responseSuccessHandler(response),
  error => responseErrorHandler(error)
);
```



<h2>Use Axios interceptors</h2>
<p>Axios lets us intercept <code>request</code> and <code>response</code>, former is used when we want to add additional configuration (headers, data etc) while the latter is used when we want to perform some action or modify the response (log errors, logout on 401 etc).</p>
<h2>Intercept all requests</h2>
<p>Here, we will intercept and add auth headers to all <code>requests</code> that will be made using Axios instance.</p>
<pre><code class="language-javascript">const requestHandler = request =&gt; {
  request.headers['Authorization'] = getAuthHeader();

  return request;
}

axios.interceptors.request.use(request =&gt; requestHandler(request));
</code></pre>
<h2>Listen to all responses</h2>
<p>The request will be resolved by default when the status code is between <code>200</code> -  <code>300</code>, otherwise the request will be rejected.
This could be changed using <a href="https://github.com/axios/axios#handling-errors">validateStatus</a> in the request config.</p>
<h3>1. Log all errors</h3>
<pre><code class="language-javascript">const responseSuccessHandler = response =&gt; {
  return response;
};

const responseErrorHandler = error =&gt; {
  if (error.response) {
    console.error(error.response.data);
    console.error(error.response.status);
    console.error(error.response.headers);
  } else if (error.request) {
    console.error(error.request);
  } else {
    console.error('Error', error.message);
  }
  console.error(error.config);

  return Promise.reject(error);
}

axios.interceptors.response.use(
  response =&gt; responseSuccessHandler(response),
  error =&gt; responseErrorHandler(error)
);
</code></pre>
<h3>2. Logout on 401</h3>
<p>If status code is 401, redirect user to Login route. If we keep client side authentication states, reset them.</p>
<pre><code class="language-javascript">const responseSuccessHandler = response =&gt; {
  return response;
};

const responseErrorHandler = error =&gt; {
  if (error.response.status === 401) {
    // Add your logic to
    //  1. Redirect user to LOGIN
    //  2. Reset authentication from localstorage/sessionstorage
  }

  return Promise.reject(error);
}

axios.interceptors.response.use(
  response =&gt; responseSuccessHandler(response),
  error =&gt; responseErrorHandler(error)
);
</code></pre>


Logout on 401 Response



## Sorting import statements

It is suggested to keep relative imports at the bottom and aliased/library imports at the top.

For example, this:
```js
import React, { Component } from "react";
import Toolbar from "../Toolbar";
import SqlOutput from "./SqlOutput";
import Fade from "react-reveal/Fade";
import debounce from "lodash/debounce";
import Editor from "../Editor";
import sqljs from "sql.js";
```

Should be arranged like this:
```js
import React, { Component } from "react";
import Fade from "react-reveal/Fade";
import debounce from "lodash/debounce";
import sqljs from "sql.js";

import SqlOutput from "./SqlOutput";
import Toolbar from "../Toolbar";
import Editor from "../Editor";

```


<h2>Sorting import statements</h2>
<p>It is suggested to keep relative imports at the bottom and aliased/library imports at the top.</p>
<p>For example, this:</p>
<pre><code class="language-js">import React, { Component } from &quot;react&quot;;
import Toolbar from &quot;../Toolbar&quot;;
import SqlOutput from &quot;./SqlOutput&quot;;
import Fade from &quot;react-reveal/Fade&quot;;
import debounce from &quot;lodash/debounce&quot;;
import Editor from &quot;../Editor&quot;;
import sqljs from &quot;sql.js&quot;;
</code></pre>
<p>Should be arranged like this:</p>
<pre><code class="language-js">import React, { Component } from &quot;react&quot;;
import Fade from &quot;react-reveal/Fade&quot;;
import debounce from &quot;lodash/debounce&quot;;
import sqljs from &quot;sql.js&quot;;

import SqlOutput from &quot;./SqlOutput&quot;;
import Toolbar from &quot;../Toolbar&quot;;
import Editor from &quot;../Editor&quot;;

</code></pre>


Sorting import statements



## Using class properties instead of declaring state in constructor

In react we use state variables
in class components
and
we set the initial state values
using constructor function.

```js
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: this.props.name,
    }
  }
}
```

We can then access the state
variables using `this.state`
and
update the state variables
using `this.setState`.

```js
// Access the state variable
this.state.name;

// Update state variable
this.setState({ name: 'John Wick'});
```

When using
[Babel plugin](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
that enables
class properties we can skip the
use of a class constructor. We
can rewrite the `App` class
component without using constructor
as:

```js
class App extends Component {
  state = {
    name: this.props.name,
  };
}
```

We can access
or
update the state variables as before.

```js
// Access the state variable
this.state.name;

// Update state variable
this.setState({ name: 'John Wick'});
```


<h2>Using class properties instead of declaring state in constructor</h2>
<p>In react we use state variables
in class components
and
we set the initial state values
using constructor function.</p>
<pre><code class="language-js">class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: this.props.name,
    }
  }
}
</code></pre>
<p>We can then access the state
variables using <code>this.state</code>
and
update the state variables
using <code>this.setState</code>.</p>
<pre><code class="language-js">// Access the state variable
this.state.name;

// Update state variable
this.setState({ name: 'John Wick'});
</code></pre>
<p>When using
<a href="https://babeljs.io/docs/en/babel-plugin-proposal-class-properties">Babel plugin</a>
that enables
class properties we can skip the
use of a class constructor. We
can rewrite the <code>App</code> class
component without using constructor
as:</p>
<pre><code class="language-js">class App extends Component {
  state = {
    name: this.props.name,
  };
}
</code></pre>
<p>We can access
or
update the state variables as before.</p>
<pre><code class="language-js">// Access the state variable
this.state.name;

// Update state variable
this.setState({ name: 'John Wick'});
</code></pre>


Use Class properties instead of declaring state in constructor



## Always use async/await instead of promise chains

When writing an asynchronous function, resort to the async/await syntax rather than promise chains or callbacks.

Instead of this:
```js
loadProfile(id) {
  return API.fetchProfileData(id).then(profile => {
    this.setState({ profile })
    this.props.navigate(`settings/profile/${id}`)
  })
}
```

It should be written like this:
```js
async loadProfile(id) {
  try {
    const profile = await API.fetchProfileData(id)
    this.setState({ profile })
    this.props.navigate(`settings/profile/${id}`)
  } catch (err){
    console.log(err)
  }
}
```

## Always use try/catch blocks with Async functions

When writing an async function, wrap everything in a try/catch block.

Instead of this:
```js
async initializeSQLjs() {
  const existingCode = localStorage.getItem(this.editorInputKey);
  const SQL = await sqljs({
    locateFile: () =>
      `https://cdn.jsdelivr.net/npm/sql.js@1.3.0/dist/sql-wasm.wasm`,
  });
}
```

It should be written like this:
```js
async initializeSQLjs() {
  try {
    const SQL = await sqljs({
      locateFile: () =>
        `https://cdn.jsdelivr.net/npm/sql.js@1.3.0/dist/sql-wasm.wasm`,
    });
  }
  catch (error) {
    console.log(error);
  }
}
```

<h2>Always use async/await instead of promise chains</h2>
<p>When writing an asynchronous function, resort to the async/await syntax rather than promise chains or callbacks.</p>
<p>Instead of this:</p>
<pre><code class="language-js">loadProfile(id) {
  return API.fetchProfileData(id).then(profile =&gt; {
    this.setState({ profile })
    this.props.navigate(`settings/profile/${id}`)
  })
}
</code></pre>
<p>It should be written like this:</p>
<pre><code class="language-js">async loadProfile(id) {
  try {
    const profile = await API.fetchProfileData(id)
    this.setState({ profile })
    this.props.navigate(`settings/profile/${id}`)
  } catch (err){
    console.log(err)
  }
}
</code></pre>
<h2>Always use try/catch blocks with Async functions</h2>
<p>When writing an async function, wrap everything in a try/catch block.</p>
<p>Instead of this:</p>
<pre><code class="language-js">async initializeSQLjs() {
  const existingCode = localStorage.getItem(this.editorInputKey);
  const SQL = await sqljs({
    locateFile: () =&gt;
      `https://cdn.jsdelivr.net/npm/sql.js@1.3.0/dist/sql-wasm.wasm`,
  });
}
</code></pre>
<p>It should be written like this:</p>
<pre><code class="language-js">async initializeSQLjs() {
  try {
    const SQL = await sqljs({
      locateFile: () =&gt;
        `https://cdn.jsdelivr.net/npm/sql.js@1.3.0/dist/sql-wasm.wasm`,
    });
  }
  catch (error) {
    console.log(error);
  }
}
</code></pre>


Handling asynchronous code



## Using React Children for composition

React provides a special prop that you can use to denote content between the start and ending tags.

This is usually seen in HTML elements as:

```html
<p>Children of p</p>

<div>
  <p>This is children content of div and p tags</p>
</div>
```

In React, you can achieve the same using `props.children`:

```javascript
<Button>
  <i>icon</i>
  <span>Content</span>
</Button>
```
Inside `Button` component, you can access children as:

```javascript
function Button({ children }) {
  return <button>{children}</button>
}
```
Note that `children` as a prop does not need to be passed explicitly. React passes whatever content you have passed inside special `children` prop. Children is fit for passing in large values which can be substituted with any React element, React also provides a dedicated API for dealing with `children`.

### Advantages

* Allows for more composition to avoid [prop drilling](https://kentcdodds.com/blog/prop-drilling).

```javascript
const currentUser = {};

return (
  <Permissions>
    <Navbar>
      <Left />
      <Right>
        <Profile>
          {/* By using children prop we have avoided passing currentUser to components in multiple levels */}
          <img src={currentUser.image} alt="">
        </Profile>
      </Right>
    </Navbar>
  </Permissions>
)
```
* Children opens up more patterns like Compound Components.

### Compound Components

1. Too many props, you end up with a 100 props and more that are appended daily.
2. When you have a component that deals with multiple HTML elements, how do you differentiate what a prop is for: Case in point: `isHovered`: What is being hovered here? When should someone use this?
2. Easier stacking order, looks like HTML

```javascript
<Accordion onClose={}>
   <Accordion.Header showCloseButton>Heading</Accordion.Header>
   <Accordion.Body size="">Body</Accordion.Body>
</Accordion>
```


### References

* [Children in JSX - React docs](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx)
* [Children API - React docs](https://reactjs.org/docs/react-api.html#reactchildren)
* [Compound Components - Kent C Dodds](https://kentcdodds.com/blog/compound-components-with-react-hooks/)
* [Using composition to avoid prop drilling - React Training](https://www.youtube.com/watch?v=3XaXKiXtNjw)


<h2>Using React Children for composition</h2>
<p>React provides a special prop that you can use to denote content between the start and ending tags.</p>
<p>This is usually seen in HTML elements as:</p>
<pre><code class="language-html">&lt;p&gt;Children of p&lt;/p&gt;

&lt;div&gt;
  &lt;p&gt;This is children content of div and p tags&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>In React, you can achieve the same using <code>props.children</code>:</p>
<pre><code class="language-javascript">&lt;Button&gt;
  &lt;i&gt;icon&lt;/i&gt;
  &lt;span&gt;Content&lt;/span&gt;
&lt;/Button&gt;
</code></pre>
<p>Inside <code>Button</code> component, you can access children as:</p>
<pre><code class="language-javascript">function Button({ children }) {
  return &lt;button&gt;{children}&lt;/button&gt;
}
</code></pre>
<p>Note that <code>children</code> as a prop does not need to be passed explicitly. React passes whatever content you have passed inside special <code>children</code> prop. Children is fit for passing in large values which can be substituted with any React element, React also provides a dedicated API for dealing with <code>children</code>.</p>
<h3>Advantages</h3>
<ul>
<li>Allows for more composition to avoid <a href="https://kentcdodds.com/blog/prop-drilling">prop drilling</a>.</li>
</ul>
<pre><code class="language-javascript">const currentUser = {};

return (
  &lt;Permissions&gt;
    &lt;Navbar&gt;
      &lt;Left /&gt;
      &lt;Right&gt;
        &lt;Profile&gt;
          {/* By using children prop we have avoided passing currentUser to components in multiple levels */}
          &lt;img src={currentUser.image} alt=&quot;&quot;&gt;
        &lt;/Profile&gt;
      &lt;/Right&gt;
    &lt;/Navbar&gt;
  &lt;/Permissions&gt;
)
</code></pre>
<ul>
<li>Children opens up more patterns like Compound Components.</li>
</ul>
<h3>Compound Components</h3>
<ol>
<li>Too many props, you end up with a 100 props and more that are appended daily.</li>
<li>When you have a component that deals with multiple HTML elements, how do you differentiate what a prop is for: Case in point: <code>isHovered</code>: What is being hovered here? When should someone use this?</li>
<li>Easier stacking order, looks like HTML</li>
</ol>
<pre><code class="language-javascript">&lt;Accordion onClose={}&gt;
   &lt;Accordion.Header showCloseButton&gt;Heading&lt;/Accordion.Header&gt;
   &lt;Accordion.Body size=&quot;&quot;&gt;Body&lt;/Accordion.Body&gt;
&lt;/Accordion&gt;
</code></pre>
<h3>References</h3>
<ul>
<li><a href="https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx">Children in JSX - React docs</a></li>
<li><a href="https://reactjs.org/docs/react-api.html#reactchildren">Children API - React docs</a></li>
<li><a href="https://kentcdodds.com/blog/compound-components-with-react-hooks/">Compound Components - Kent C Dodds</a></li>
<li><a href="https://www.youtube.com/watch?v=3XaXKiXtNjw">Using composition to avoid prop drilling - React Training</a></li>
</ul>


Using React Children for composition



## Lens and over methods
https://medium.com/javascript-inside/an-introduction-into-lenses-in-javascript-e494948d1ea5
https://egghead.io/lessons/react-update-component-state-in-react-with-ramda-lenses

## Evolve method
Creates a new object by recursively evolving a shallow copy of object, according to the transformation functions. All non-primitive properties are copied by reference.

https://egghead.io/lessons/react-update-state-in-react-with-ramda-s-evolve


<h2>Lens and over methods</h2>
<p>https://medium.com/javascript-inside/an-introduction-into-lenses-in-javascript-e494948d1ea5
https://egghead.io/lessons/react-update-component-state-in-react-with-ramda-lenses</p>
<h2>Evolve method</h2>
<p>Creates a new object by recursively evolving a shallow copy of object, according to the transformation functions. All non-primitive properties are copied by reference.</p>
<p>https://egghead.io/lessons/react-update-state-in-react-with-ramda-s-evolve</p>


Quick Ramda tips



## Use Classnames package while adding conditional classes

In react, when writing conditional
classnames instead of using `conditional`
if-else
or
ternary operator
or
switch
statement we can use
[classnames](https://www.npmjs.com/package/classnames)
package.

Instead of:

```js
var buttonClass;
if(this.state.status === "success") {
  buttonClass = "btn btn-success";
} else if(this.state.status === "warning") {
  buttonClass = "btn btn-warning";
} else if(this.state.status === "info") {
  buttonClass = "btn btn-info"
}

return <button className={buttonClass}>{this.state.status}</button>;
```

It can be written as:

```js
var buttonClass = classNames('btn',
  { 'btn-success': this.state.status === 'success' },
  { 'btn-warning': this.state.status === 'warning' },
  { 'btn-info': this.state.status === 'info' }
);

return <button className={buttonClass}>{this.state.status}</button>;
```

`classNames` is a function which accepts
any number of arguments which are either
string
or
object
or
array of strings/objects.

If the argument is a string, the
string is included. A string
argument is same as a truthy
key-value pair.
```js
classNames('active');  // 'active'
// Is short for
classNames({ 'active': true });   // 'active'
```

If the arguments are an object,
only truthy keys are included
and
falsy keys are ignored.

```js
classNames({
  'green': true,
  'red'  : false,
  'large': true,
  'small': false
});  // 'green large'
```

If the arguments are an array of
strings/objects, arrays are flattened
recursively and only strings
and
truthy keys are included.

```js
var classes = [
  'active',
  { 'green': true, 'red': false },
  'enabled'
];

classNames('small', classes);   // 'small active green enabled'
```

<h2>Use Classnames package while adding conditional classes</h2>
<p>In react, when writing conditional
classnames instead of using <code>conditional</code>
if-else
or
ternary operator
or
switch
statement we can use
<a href="https://www.npmjs.com/package/classnames">classnames</a>
package.</p>
<p>Instead of:</p>
<pre><code class="language-js">var buttonClass;
if(this.state.status === &quot;success&quot;) {
  buttonClass = &quot;btn btn-success&quot;;
} else if(this.state.status === &quot;warning&quot;) {
  buttonClass = &quot;btn btn-warning&quot;;
} else if(this.state.status === &quot;info&quot;) {
  buttonClass = &quot;btn btn-info&quot;
}

return &lt;button className={buttonClass}&gt;{this.state.status}&lt;/button&gt;;
</code></pre>
<p>It can be written as:</p>
<pre><code class="language-js">var buttonClass = classNames('btn',
  { 'btn-success': this.state.status === 'success' },
  { 'btn-warning': this.state.status === 'warning' },
  { 'btn-info': this.state.status === 'info' }
);

return &lt;button className={buttonClass}&gt;{this.state.status}&lt;/button&gt;;
</code></pre>
<p><code>classNames</code> is a function which accepts
any number of arguments which are either
string
or
object
or
array of strings/objects.</p>
<p>If the argument is a string, the
string is included. A string
argument is same as a truthy
key-value pair.</p>
<pre><code class="language-js">classNames('active');  // 'active'
// Is short for
classNames({ 'active': true });   // 'active'
</code></pre>
<p>If the arguments are an object,
only truthy keys are included
and
falsy keys are ignored.</p>
<pre><code class="language-js">classNames({
  'green': true,
  'red'  : false,
  'large': true,
  'small': false
});  // 'green large'
</code></pre>
<p>If the arguments are an array of
strings/objects, arrays are flattened
recursively and only strings
and
truthy keys are included.</p>
<pre><code class="language-js">var classes = [
  'active',
  { 'green': true, 'red': false },
  'enabled'
];

classNames('small', classes);   // 'small active green enabled'
</code></pre>


Use Classnames Package while adding conditional classes



## Project Structure

The react code structure starts from the **src** folder. The first file we encounter is **App.jsx**. It is the root of all the files. Then we logically divide components in the components folder. Each folder can have an **index.jsx** file. The index file is considered as the starting of the folder even though it's not mandatory to always have an index file. 

From the root we have folders
1. **apis** - All the backends calls are to be made from the apis folder. We can have multiple files specific to each component.
2. **common** - All the commonly used helpers can be written in the common folder.
3. **utils** - All the utilities which are reused across the project can be written here.
4. **components** - This folder contains all the react components.
5. **contexts** - The data which is globally required across the components can stored here. It will be useful in case of storing the user details after authentication. 

- *All these folders should be of lower case.*
- *There could be more folders depending on the requirement.*

Example **src** folder
```js
├── App.jsx
├── apis
│   ├── authentication.js
│   ├── axios.js
│   └── notes.js
├── common
│   └── logger.js
├── utils
│   ├── string.js
│   └── storage.js
├── components
│   ├── Authentication
│   │   ├── Login.jsx
│   │   ├── ResetPassword.jsx
│   │   └── Signup.jsx
│   ├── Common
│   │   ├── EmptyState.jsx
│   │   ├── Navbar.jsx
│   │   └── PrivateRoute.jsx
│   ├── Dashboard
│   │   ├── Account
│   │   │   ├── Password
│   │   │   │   ├── Create.jsx
│   │   │   │   └── Edit.jsx
│   │   │   └── Profile.jsx
│   │   ├── Notes
│   │   │   ├── NewPane.jsx
│   │   │   ├── Table.jsx
│   │   │   ├── SubHeading.jsx
│   │   │   └── index.jsx
│   │   └── index.jsx
│   └── Main.jsx
└── contexts
    ├── auth.js
    └── user.js
 
```
## Component Structure

All the components should be inside the **components** folder. We should logically group the components into folders according to the requirement. 

- *All the folder name should start with upper case.*
- *All the React files should start with upper case except for index file.*

Example **Customer** folder

```js
├── ActionSidebar
│   ├── Activities.jsx
│   ├── Detail.jsx
│   ├── Tag.jsx
│   └── index.jsx
├── Form
│   ├── Email.jsx
│   ├── Link.jsx
│   ├── Phone.jsx
│   ├── index.jsx
│   └── validator.jsx
├── Pane
│   ├── Create.jsx
│   ├── Edit.jsx
│   └── Password.jsx
├── Table.jsx
├── Details.jsx
├── constants.js
└── index.jsx
```

- Code starts from index file
- If there are multiple panes, it can be grouped into a folder.
- If there multiple forms, it can be grouped into a folder.
- Constants file can be used to store initial values, default values, etc.

### Common mistakes done

Instead of this:
```js
└── Form
    ├── CreateForm.jsx
    └── EditForm.jsx
```

It should be written like this:
```js
└── Form
    ├── Create.jsx
    └── Edit.jsx
```

It is understood from the folder name that the Create and Edit are Form components and we don't have append it in the name. This can be taken as example in all the cases.  


<h2>Project Structure</h2>
<p>The react code structure starts from the <strong>src</strong> folder. The first file we encounter is <strong>App.jsx</strong>. It is the root of all the files. Then we logically divide components in the components folder. Each folder can have an <strong>index.jsx</strong> file. The index file is considered as the starting of the folder even though it's not mandatory to always have an index file.</p>
<p>From the root we have folders</p>
<ol>
<li><strong>apis</strong> - All the backends calls are to be made from the apis folder. We can have multiple files specific to each component.</li>
<li><strong>common</strong> - All the commonly used helpers can be written in the common folder.</li>
<li><strong>utils</strong> - All the utilities which are reused across the project can be written here.</li>
<li><strong>components</strong> - This folder contains all the react components.</li>
<li><strong>contexts</strong> - The data which is globally required across the components can stored here. It will be useful in case of storing the user details after authentication.</li>
</ol>
<ul>
<li><em>All these folders should be of lower case.</em></li>
<li><em>There could be more folders depending on the requirement.</em></li>
</ul>
<p>Example <strong>src</strong> folder</p>
<pre><code class="language-js">├── App.jsx
├── apis
│   ├── authentication.js
│   ├── axios.js
│   └── notes.js
├── common
│   └── logger.js
├── utils
│   ├── string.js
│   └── storage.js
├── components
│   ├── Authentication
│   │   ├── Login.jsx
│   │   ├── ResetPassword.jsx
│   │   └── Signup.jsx
│   ├── Common
│   │   ├── EmptyState.jsx
│   │   ├── Navbar.jsx
│   │   └── PrivateRoute.jsx
│   ├── Dashboard
│   │   ├── Account
│   │   │   ├── Password
│   │   │   │   ├── Create.jsx
│   │   │   │   └── Edit.jsx
│   │   │   └── Profile.jsx
│   │   ├── Notes
│   │   │   ├── NewPane.jsx
│   │   │   ├── Table.jsx
│   │   │   ├── SubHeading.jsx
│   │   │   └── index.jsx
│   │   └── index.jsx
│   └── Main.jsx
└── contexts
    ├── auth.js
    └── user.js
 
</code></pre>
<h2>Component Structure</h2>
<p>All the components should be inside the <strong>components</strong> folder. We should logically group the components into folders according to the requirement.</p>
<ul>
<li><em>All the folder name should start with upper case.</em></li>
<li><em>All the React files should start with upper case except for index file.</em></li>
</ul>
<p>Example <strong>Customer</strong> folder</p>
<pre><code class="language-js">├── ActionSidebar
│   ├── Activities.jsx
│   ├── Detail.jsx
│   ├── Tag.jsx
│   └── index.jsx
├── Form
│   ├── Email.jsx
│   ├── Link.jsx
│   ├── Phone.jsx
│   ├── index.jsx
│   └── validator.jsx
├── Pane
│   ├── Create.jsx
│   ├── Edit.jsx
│   └── Password.jsx
├── Table.jsx
├── Details.jsx
├── constants.js
└── index.jsx
</code></pre>
<ul>
<li>Code starts from index file</li>
<li>If there are multiple panes, it can be grouped into a folder.</li>
<li>If there multiple forms, it can be grouped into a folder.</li>
<li>Constants file can be used to store initial values, default values, etc.</li>
</ul>
<h3>Common mistakes done</h3>
<p>Instead of this:</p>
<pre><code class="language-js">└── Form
    ├── CreateForm.jsx
    └── EditForm.jsx
</code></pre>
<p>It should be written like this:</p>
<pre><code class="language-js">└── Form
    ├── Create.jsx
    └── Edit.jsx
</code></pre>
<p>It is understood from the folder name that the Create and Edit are Form components and we don't have append it in the name. This can be taken as example in all the cases.</p>


Structuring code



## What is webpack alias?

Define aliases for specific directories in order to simplify import statements.
## Why webpack alias?

Initially, when you start off a project, you don’t mind writing long relative paths and ignore all the troubles that come with it. But as your project starts to scale past a certain point of complexity, you’ll find traversing up and down your file system is **time-consuming** and **error-prone**.

If you are changing the directory structure of a module in your project. This will break all the module references and you will be forced to change all occurrences of the module throughout your project. It will be a daunting task!

More on aliasing https://medium.com/groww-engineering/module-aliasing-in-webpack-f02fe1b91f94.


## Creating alias

Webpack allows you to create aliases to import or require certain modules through the **resolve.alias** property in your config without any additional plugins.

Changes to webpack config
```js
  resolve: {
    alias: {
      apis: path.resolve(__dirname,"apis" ),
      components: path.resolve(__dirname,"components" ),
      common: path.resolve(__dirname,"components/Common" ),
      images: path.resolve(__dirname, "..", "..", "app/assets/images"),
      constants: path.resolve(__dirname,"components/constants" ),
    },
  },
```

Webpack resolve https://webpack.js.org/configuration/resolve/

## Updating import statements

Instead of this:
```js
import { createUser } from "../../../apis/user";
import { Header } from "../../common";
```

It should be written like this:
```js
import { createUser } from "apis/user";
import { Header } from "common";
```

*Import statements become cleaner after aliasing.*


<h2>What is webpack alias?</h2>
<p>Define aliases for specific directories in order to simplify import statements.</p>
<h2>Why webpack alias?</h2>
<p>Initially, when you start off a project, you don’t mind writing long relative paths and ignore all the troubles that come with it. But as your project starts to scale past a certain point of complexity, you’ll find traversing up and down your file system is <strong>time-consuming</strong> and <strong>error-prone</strong>.</p>
<p>If you are changing the directory structure of a module in your project. This will break all the module references and you will be forced to change all occurrences of the module throughout your project. It will be a daunting task!</p>
<p>More on aliasing https://medium.com/groww-engineering/module-aliasing-in-webpack-f02fe1b91f94.</p>
<h2>Creating alias</h2>
<p>Webpack allows you to create aliases to import or require certain modules through the <strong>resolve.alias</strong> property in your config without any additional plugins.</p>
<p>Changes to webpack config</p>
<pre><code class="language-js">  resolve: {
    alias: {
      apis: path.resolve(__dirname,&quot;apis&quot; ),
      components: path.resolve(__dirname,&quot;components&quot; ),
      common: path.resolve(__dirname,&quot;components/Common&quot; ),
      images: path.resolve(__dirname, &quot;..&quot;, &quot;..&quot;, &quot;app/assets/images&quot;),
      constants: path.resolve(__dirname,&quot;components/constants&quot; ),
    },
  },
</code></pre>
<p>Webpack resolve https://webpack.js.org/configuration/resolve/</p>
<h2>Updating import statements</h2>
<p>Instead of this:</p>
<pre><code class="language-js">import { createUser } from &quot;../../../apis/user&quot;;
import { Header } from &quot;../../common&quot;;
</code></pre>
<p>It should be written like this:</p>
<pre><code class="language-js">import { createUser } from &quot;apis/user&quot;;
import { Header } from &quot;common&quot;;
</code></pre>
<p><em>Import statements become cleaner after aliasing.</em></p>


Create alias for commonly used directories



## Elegant Javascript patterns

RORO: https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-roro-be01e7669cbd

Ice Factory: https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-ice-factory-4161859a0eee

## A primer on Javascript naming

https://www.robinwieruch.de/javascript-naming-conventions

## Debounce and throttling

**Debouncing** enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called.”

**Throttling** enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds.”

Read more: https://css-tricks.com/the-difference-between-throttling-and-debouncing/

## const vs let
https://overreacted.io/on-let-vs-const/

## Short React code snippets from the 30 seconds of code team
https://www.30secondsofcode.org/react/p/1


<h2>Elegant Javascript patterns</h2>
<p>RORO: https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-roro-be01e7669cbd</p>
<p>Ice Factory: https://medium.com/free-code-camp/elegant-patterns-in-modern-javascript-ice-factory-4161859a0eee</p>
<h2>A primer on Javascript naming</h2>
<p>https://www.robinwieruch.de/javascript-naming-conventions</p>
<h2>Debounce and throttling</h2>
<p><strong>Debouncing</strong> enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called.”</p>
<p><strong>Throttling</strong> enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds.”</p>
<p>Read more: https://css-tricks.com/the-difference-between-throttling-and-debouncing/</p>
<h2>const vs let</h2>
<p>https://overreacted.io/on-let-vs-const/</p>
<h2>Short React code snippets from the 30 seconds of code team</h2>
<p>https://www.30secondsofcode.org/react/p/1</p>


San Jose, USA

Pune, India

Quick Ramda tips

Lens and over methods

Evolve method