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.
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.
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.
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.
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.
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.
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."
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?
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.
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.
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.
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.
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.
If we refresh our app, we can see that it now responds to our user input. Fantastic.
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.