ReactJs error reading and handling part 1

This tutorial is written to keep beginners in mind.

Being a software developer reading errors is essential.

In this very first article of this series, we will learn how to read error in ReactJs that crashes our app.

Let's create the error first.

function App() {
  return (
    <div>
      <h1>{brand}</h1>
    </div>
  )
}

export default App

In our app.js component we are going to write this code to see the error since we don't have a keyword brand defined anywhere so will get this error.

The very first tip is don't panic when you see the error and start guessing by yourself instead of reading the error.

Let's read the error

1. Inside src folder we have app.js file
2. Now we have to see Line 6 and Character 12, character is not very important but in some cases it helps, anyhow we should know it.
3. The third important thing is 'brand' is not defined no-undef it simply means we are trying to access something that doesn't exist.

I hope this piece of writing will help you.