For whom this article is suitable

In this article, we analyze the React element rendering mechanism and introduce several postures for executing console.log statements in JSX. We also introduce other postures for debugging code in React projects.

This article is suitable for beginners to React, but if you are already familiar with React development projects, this article may be too simple for you.

Why was this article written

Why write this article? A few days ago, when I trained other colleagues (non-front-end) on React development, I found that many React beginners liked to use console.log to debug their code.

// Here we want to print this data with menus
return (
  <div>
    <h1>Hello World</h1>
    console.log(menus)
  </div>
)
Copy the code

But will the React method get you through?

The answer is no. Let’s see what this actually renders:

This was clearly not what we had originally intended, which was to display menus’ data on a page so that we could see exactly what menus had.

So why did this happen?

Let’s start with React’s element rendering mechanism.

React elements render mechanism

React render

Hello World

React.createElement(
  'h1'.null.'Hello World'
)
Copy the code

What do you make of the above code?

JSX is a JavaScript syntax extension that we use to better describe how UI and data interact. But what we end up rendering to the browser is HTML files that the browser will recognize, so we need to use Babel for syntax translation.

Babel translates JSX into a function call called react.createElement ().

Let’s look at the react.createElement () function’s argument definition:

React.createElement(
  type,
  [props],
  [...children]
)
Copy the code

The first argument it receives is the tag name of the HTML, the second argument is props, and the third argument is all the children that the tag wraps around.

Now that you understand the React element rendering mechanism, let’s look at the complete render statement with console.log:

render() {
  return React.createElement(
    'div'.null,
    React.createElement(
      'h1'.null.'Hello'
    ),
    'console.log(menus)')}Copy the code

As you can see, for div tags, there are two children: The Hello World< H1 > text wrapped with the H1 tag, and the console.log() text (yes! Here, the console.log(menus) statement is already recognized as text by the React.createElement function. .

So the nodes that Babel translates and renders to the browser look like this:

Now, it’s not surprising that we go back to the rendering at the beginning of the article.

You can click here to experience the Babel translation process

What if I had to print out the data in JSX

We can’t use console.log to print data in JSX, but sometimes we just want to print data and debug it.

Still really have a few good way, listen to me carefully below.

Print data outside of JSX

The first method is the easiest and probably the most obvious — you can write console.log outside of JSX.

render(){
  console.log(menus)
  return console.log(menus) || (
    <div>
    	<h1>Hello World</h1>
    </div>)}Copy the code

If the data you want to print is an object or array, you can also use the console.table API to print it better:

Use {} to wrap the console.log statement

First of all, let’s be clear:

In JSX syntax, you can place any valid JavaScript expression inside curly braces. For example, 2 + 2, user.firstName, or formatName(user) are valid JavaScript expressions.

So, you could write:

render(){
  return (
    <div>
      <h1>Hello World</h1>
      {
      console.log(menus)
      }
    </div>)}Copy the code

Using the | | operator

This method is more show, although not difficult and not complex, but the average person may not think.

We can write this:

render(){
  return console.log(menus) || (
    <div>
    <h1>Hello World</h1>
    </div>)}Copy the code

Ok, look at the browser render result:

Right!!! It doesn’t render anything we don’t want.

Look at the console again:

Also print out menus data as we expected!

Why can I write it this way?

Because the console. The log of the return value is undefined, we can take advantage of this combined ably | | operators short-circuit properties, naturally achieve both print data and correct rendering of the UI effects.

useJSON.stringify

The second option is to wrap the data directly in json.stringify and render it in div tags so that we can see the data directly on the interface instead of staring at the console.

render(){
  return console.log(menus) || (
    <div>
      <h1>Hello World</h1>
      <div>{JSON.stringify(menus)}</div>
    </div>)}Copy the code

Of course, this approach is better for printing smaller data.

Is there a better way to debug

If you’re already seeing this, congratulations! You’ve learned how to use the console.log statement in React

However, using console.log is not an elegant way to debug code in React projects. Here are a few ways to debug code in React projects:

• Using Chrome DevTools
• Use the React Developer Tools plugin from the Chrome Extension Store, which is provided by Facebook
• Visual Studio Code plug-inDebugger for Chrome
  • https://jerryzou.com/posts/vscode-debug-guide/

Because of the lack of space, I won’t go into the details here, but if you are interested, you can click on the link to read the official document.