React Q&A

What are props?

Props are properties that are passed in when you call a child component. Think of them like HTML attributes, or arguments in Javascript. Props are an object which means they are stored as key value pairs. The key is the part before the equals sign, the value is the part afterwards.

<MyOutput text="Hello world" />

In this case, the 'MyOutput' component will have access to a the props objects which looks like this:

{
  text: "Hello world"
}

 

Q. Do I need Babel  for React?

A. No. You only need Babel if you use JSX in your React project. Babel converts JSX to Javascript.

 

Q. What does the pre-compiled and post-compiled JSX/Javascript code look like.

A. Babel's REPL shows both versions side-by-side.

 

Q. What does render() do, and do I always need it?

Every class-based component needs a render to output to the DOM. Functional components do not require a render.

 

Q. How should the return statement be formatted?

If your return statement is just one line, you don't need parenthesis. However, best practice is to wrap your entire return statement in parenthesis. This avoids the issue of returning too soon.

 

Up and Running Quickly:

Q. I am getting started with React, or I want to test little tidbits, do I need to jump through many hoops such as running a NPM or Yarn?

In fact you can put your entire React app in one file, though this is not recommended. See this blog post for instructions on how to do so.

Note: You will need to manually refresh the page to see changes.

 

Q. Help! My app isn't working. How do I know what has gone wrong?

 The best way to troubleshoot problems is to open the your browser's developer console. It will give you helpful error messages. 

You can also check your terminal running the NPM/Yarn process, and your IDE for more clues.

 

Q. What is a stateless functional component?

A. It is a simple function that returns a React element.

 

I've seen various ways of creating element. What methods should I use or avoid.

First up, avoid using the older React.createClass to create elements.

You can create class-based elements like so:

class HelloWorld extends React.Component {
  render() {
    return <div>hello world</div>
  }
}

 

You can create stateless functional components like so:

const HelloWorld = () => {
  return <div>Hello World</div>
}

 

Q. I'm trying to add a variable to class but I'm getting an error message. Why?

This is a common error to make. This won't work:

class Navbar extends React.Component {

  const link = "Contact";

  render() {
    return <h1>The number is {link}!</h1>;
  }
};

The reason is that the declaration should not be part of the class. Instead, you can add it to the render method:

class Navbar extends React.Component {

  render() {
    const link = "Contact";

    return <h1>The number is {link}!</h1>;
  }
};

 

Q. What if I close a component call and put text in between. Or:

What is this.props.children?

<MyComponent>This is the child</MyComponent>

In the above example, the text 'This is the child" is passed down to the MyComponent component. So props looks like:

{
  children: "This is the child"
}

 

What else is important to know when beginning React?

- Data flows down, actions flow up.

-  Components should be capitalized e.g MyComponent. This is how React distinguishes between components and HTML tags such as <p>.

 

Q. I'm receiving the error: Warning: Each child in an array or iterator should have a unique "key" prop. What do I do about it?

A. This is quite a common error in React. When you are rendering a list, React needs a way to keep track of each element in the DOM. The way to solve this is to pass in a unique key for each item. Often you can use the ID from the database since it is unique for each item.

An alternative is to use a random key generator. React internally uses the UUID package, so it's a dependency and doesn't need to be installed. You only have to import it at the top of the page with:

import UUID from 'uuid';

Then, when writing your code you would do something like this:

list.map(i => <li key={uuid()}>{i}</li> )

It's important that you do not use the map index, as this can cause difficult to track down bugs.