React Course Notes : Nested Components (Part1)

20180923
Right now my app has one component that does everything. It’s responsible for:

  • Maintaining state to displaying information to the user(Like “Hello Badu” and “this is the default message.”)
  • It’s responsible for displaying a form that allows the user to update the state.

This might be fine for a smaller project like this one but as my react apps get more complex, I am going to pull out one component into multiple components and that’s what I am going to do here.

  • Red border

Red border is going to be my Greeter component. It’s going to be the main application.

There’s going to be nothing above it.

  • And it’s going to have two nested components:

1.Green border
The first one in green is going to be my Greeter message component and this is going to display the message to the user in the browser.

2.Blue border
The second nested component is going to be called greeter form component and this component is going to be responsible for getting new information via input and button fields.

  • Define a new component
  • I’m going to do is make a new variable called “GreeterMessage” and I’m going to set it equal to React.createClass

var GreeterMessage = React.createClass({

)};

  • And with this in place the only thing I know I have to define is my render method

var GreeterMessage = React.createClass({

render: function(){

}

)};

  • Remember every reactor component needs to have a render method and inside of here I am going to return

var GreeterMessage = React.createClass({

render: function(){

return(

);

}

)};

  • And now I can start adding JSX code and the only thing I want to do is to have some H1 tag and <p> tag.

var GreeterMessage = React.createClass({

render: function(){

return(

 

Some H1

 

some paragraph

 

);

}

)};

Now I have a component and it doesn’t use any data at all but I can now learn how to add it into the Greeter component.

And I do it just like I do it down inside of React.DOM.render. I simply reference it replacing the tag name with the component name.

  • so just below the <p> tag in greeter component. I’m going to open up my tag and type greeter message. Since I am with a static example to explore nesting, I’m going to close the tag leaving off any props.

<GreeterMessage/>

  • Now if I save this file and refresh the browser you can see a few things

First of all, my regular app is still here but I also have some H1 and some paragraph. They’re being rendered to the browser via my greeter message component which is awesome.

Eventually this code right here (some H1 and some paragraph) is going to be what I see in green over here below. So I have one component moved into a nested component.

Now I also want to break out my form inside of react. I want to make sure every component is responsible for one thing and one thing only.

  • All I need to do is make a static component under Greeter message.

Call it Greeter form and have it render the same form information right here.

Now there won’t be an onSubmit handler yet so I can go ahead and delete this from the greeter form component and then just below form simply render it to the screen.

When I view it in the browser, it should have first message, second message, first form and second form.

And remember at this point the form isn’t going to do anything and that is perfectly fine. The goal here is to simply create the components.

  • To kick things off, up above just below GreeterMessage, I’m going to make a new variable called GreeterForm. I’m going to set it equal to React.createClass.

var GreeterForm =React.createClass

  • And the only method I have to define is render. I’m going to set render equal to an anonymous function that doesn’t take any arguments.

var GreeterForm =React.createClass({

render: function(){

}

)}

  • I’m going to start things off by returning empty parentheses and inside of here I can define my JSX.

var GreeterForm =React.createClass({

render: function(){

return(

);

}

)}

  • All I do is go below, and copy the form code scroll up to the top and paste it right inside of render: function()

var GreeterForm =React.createClass({

render: function(){

return(

<form onSubmit={this.onButtonClick}>

<input type="text" ref="name"/>

<button>Set Name</button>

</form>

);

}

)}

  • And since we are creating a static component for the time being I’m going to remove my event handler.

var GreeterForm =React.createClass({

render: function(){

return(

<form>

<input type="text" ref="name"/>

<button>Set Name</button>

</form>

);

}

)}

  • At the very bottom before I close our <div> tag, I’m going to open up a new tag called GreeterForm

<GreeterForm/>

  • Save the file and refresh the browser and here you can see exactly what I expected

I have first messages which are being displayed in the Greeter component. I have the static messages from Greeter message component. I have first form which is wired up inside of Greeter and I have second form which is currently static.

Now nothing works so far if I type a name into the second input field and it set name. It’s not going to change the text right here.

Quickly recap what I learned

  • I created two new static components I use react.createClass and simply defined a render method that didn’t rely on any props or state. All it does it’s displays the same text no matter what.
  • I also have my GreeterForm component down below which displays a simple form and I were able to use them inside of the Greeter components render method by simply referencing them by name.

<GreeterForm/>

This is just like what I did in ReactDOM.render. It’s nothing different in the future.

ReactDOM.render();