
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>
);
}
}