Core Concepts of React: Components, Props, and State

Raquel Moss
InstructorRaquel Moss
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

In this lesson we'll dig into the absolute fundamentals of React by exploring the concepts of components, properties, and state and how they work together to build React applications.

[00:00] React is a JavaScript library for building user interfaces. It's all about rendering components and reacting to user input. In this lesson, I'll introduce some basic React concepts by creating a simple React component.

[00:15] Firstly, what is a React component? A React component is a building block for your user interface. If you're creating a complex user interface, you'll likely compose your interface of multiple React components.

[00:29] In this case, we're going to build a simple user interface composed of one React component. I'm going to call our component complimentMachine, as it's going to give compliments.

[00:47] I'm then going to render our component by calling a React on its render function and passing it two parameters. The first parameter is our component, which we've defined above. The second parameter is the DOM element where I would like to mount it.

[01:08] If we look at the HTML for our app, I have a div with the ID of root, so I'm going to target that div. If we take a look at our app and refresh the page, we can see that it's blank, because we're not rendering anything yet. Let's fix that.

[01:31] First, we're going to write a render function inside of our component. All React components will contain a render function, which describes how the React component will be rendered when it's mounted to the DOM. In this case, we're going to render a div and some text.

[02:00] If we refresh our app, we can see that there is our text. By writing a render function within our React component, we can render information to the view.

[02:11] Next, we're going to look at props, or properties. Props are data that are passed to a React component when it's rendered. You can pass in multiple props, but for now, we're just going to pass in a message for our component to render. I'm going to give it the key of compliment and the value of, "Your smile is awesome."

[02:37] You can choose to pass in an array or object, but in this instance, we're just going to pass in a simple string. If we refresh our app, we can see that nothing has changed yet, because we're not actually accessing our props in our render function. How can we access props from inside of our component?

[02:56] React props is a plain JavaScript object, so I can access my props by writing this.props and giving the correct key, which in this case is compliment. If we refresh our app, we can see that there is your compliment.

[03:10] If I want to change the compliment, I need to do so here, where I'm rendering our component. This is because React props should not be mutated from inside a React component. If we refresh, we can see that the compliment has changed.

[03:28] What if I want to render some information that changes depending on a user's actions? This is where React state comes in. Each component can have an internal state that changes depending on a user's actions. The first thing we need to do is to set an initial state by writing a function called getInitialState.

[03:53] This function will be called once when a React component is mounted to the DOM. Like props, state is a plain JavaScript object, so I'm going to return an object with the key of name. For the value, I'm going to just set my name for now. If we refresh our app, we can see that nothing has changed, because we're not yet accessing our state in the render function. Let's change that.

[04:23] Because React state is a plain JavaScript object, we can access it similarly to props. We can write this.state and give the correct key, which in this case is name. If we refresh, we can see that the component has grabbed my name from the initial state and rendered it for us.

[04:42] This is great, but what if we want to change whose we render based on a user's input? Let's do it. I'm going to create a simple text input where a user can input a name. If we refresh, we can see that there's our input, but typing in it does nothing to change the state of our component yet. Let's hook that up.

[05:09] First, I'm going to get rid of my name and have the initial state just be an empty string. When the value of this input changes, I'm going to call a function called handleChange. You can call this function whatever you'd like. HandleChange is just what makes sense to me.

[05:28] This function is going to take an event, which is the change event on that input field. Inside of this function, I'm going to call setState, which is going to set a new state for our component. I'm going to set the key of name, and I'm going to set the value to be e.target.value, which is the value of that text input.

[05:52] If we refresh our app, we can see that it now responds to our user input. Fantastic.

[06:02] To summarize, React components will always contain a render function. This function describes how your component will look when it's mounted to the DOM. You can pass data to your React component as props, but you should not change this data from inside your React component.

[06:20] Pros is a plain JavaScript object, and you can access the values from within your component by writing this.props and giving the correct key.

[06:29] You can play around with the state of your React component based on user interaction. You need to set an initial state for your component by using React's getInitialState. You can set a new state by calling setState. State, like props, is a plain JavaScript object, so you can access the values of your state by writing this.state and passing the correct key.

Jack
Jack
~ 8 years ago

If the input was another component(say NameInput), how would you go on to change the 'name' state of the parent ComplimentMachine component?

Markdown supported.
Become a member to join the discussionEnroll Today