Build web apps with ReactJS

Components are the building blocks of a React app. They separate your application code into discrete pieces that should be easy to understand and easy to reason about.

From the React guides:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

 props  is an object available on  this  inside a component class that gives you access to the values that were passed when a component was called. It's like the arguments in a function.

To see how they work, let's edit the  App  component.

Change the message on line 14 to say:

Hi {this.props.name}!

then save the file and look at the app again in the browser.

 this.props.name  doesn't seem to print anything, because we haven't passed a  name  prop to the component.

Do you remember where this component is called? It's in  index.js . Go there now and pass your first name as a prop to the  App  component.

Change:

    <App />

to read:

    <App name=yourname />

Then save the file and go look at your change.

Whoa, that's different! 😮

Now we have a huge error message and a black screen. Neat, it tells us exactly what's wrong.

To pass a string in JSX, you have to put quotes around it. So let's go back and do that:

    <App name="yourname" />

Now it works!

Next, let's try a variable. Declare a variable with the value of your name as a string. Then, instead of a quoted string, pass it as the value for the  name  prop by putting it inside a template expression:

let name = "alex";

ReactDOM.render(
  <App name={name} />,
  document.getElementById('root')
);

Those are the basics of using the  props  property.

Props are read-only

Inside your component, you should only access  this.props  to read values. You should never modify the  this.props  property.

Root element

Components always need to have one top-level element. If you have a component that looks like this:

class Foo extends Component {
  render() {
    return (
      <div className="Foo">
        ... Foo things
      </div>
      <div className="something else">
        ... other stuff
      </div>
    );
  }
}

You will need to modify by either adding a single wrapper element:

class Foo extends Component {
  render() {
    return (
      <div>
        <div className="Foo">
          ... Foo things
        </div>
        <div className="something else">
          ... other stuff
        </div>
      </div>
    );
  }
}

or by nesting one of the top-level elements inside the other:

class Foo extends Component {
  render() {
    return (
      <div className="Foo">
        ... Foo things
        <div className="something else">
          ... other stuff
        </div>
      </div>
    );
  }
}