3 posts tagged with "reactjs"

If you have not added Prettier and ESlint into your project you are missing a lot of out of box configuration and code formatting.It's simple to add them and follow industry based best practice and adding them will not even take 2 minutes.

So here are the steps to add them into your project.

• Add Prettier as an extension to your VSCode, or if you not using VSCode install it globally using npm i -g prettier

• Add ".prettierrc" file to your project root directory

• Add following code into ".prettierrc"

{ "semi": false, "trailingComma": "all", "singleQuote": true, "printWidth": 70 }

Add followig two packages to your project

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Add .eslintrc.json

Add following code to ".eslintrc.json"

{  "extends": ["prettier"],  "plugins": ["prettier"],  "rules": { "prettier/prettier": ["error"] }}

Thats it, your project to s configured to use best practices based on Prettier and ESLint.

Read about Prettier here

Read about ESlint here

Here is AirBnb eslint config: https://www.npmjs.com/package/eslint-config-airbnb

Happy Coding... Kumar

Most beginner like me will have a bit of confusion about when to use state and when to use props, which component should have its own state or rely on props and how to go about it all.

Both state and props hold information, but they are different. The props are immutable, whereas the state is not. Typically, the child component receives the props variables from parents. They store the props variables in the state as they can’t modify props values. They take in read only copy and use it only to render the view of the component. Even the actons can be passed to children in the form of props, and if any event affects the parent’ state, the child calls that action(method) which is defined in parent.

Anything that can change due to an event anywhere in the component hierarchy qualifies as being part of the state. Avoid keeping computed values in the state; instead simply compute them when needed, typically inside the render() method.

Do not copy props into a state, just because props are immutable. If you feel the need to do this, think of modifying the original state from which these props were derived. One exception is when props are used as initial values to the state, and the state is truly disjoined from the original state after the initialization.

A simple example of creating an ErrorBounday component and using in your application.

class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }
  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }
  componentDidCatch(error, info) {    // You can also log the error to an error reporting service    logErrorToMyService(error, info);  }
  render() {    if (this.state.hasError) {      // You can render any custom fallback UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children;  }}

To use above component import it in your app or in the component file where you want to use it

import ErrorBoundary from ‘./ErrorBoundary’

and wrap your component with the imported component

<ErrorBoundary>  <Your Component /></ErrorBoundary>