React - Building Search App (Part 2)

Nested Component

So after we learned that react is components and created our first component - lets see how components may host other components inside themselves:
Lets create SearchBar component which be child component of SearchPage and which will include search text input:

    var SearchBar = React.createClass({
      render: function() {
        return (
          <div><input placeholder="type search term"/></div>
        );
      }
    });  
     var SearchPage = React.createClass({
      render: function() {
        return (
          <div>
              <SearchBar/>
          </div>
        );
      }
    });
    
    ReactDOM.render(
        <SearchPage />,
        document.getElementById('example')
      );

And lets add another child component which will hold the list of search results:

     // Results List
    var ResultsList = React.createClass({
      render: function() {
        return (
          <div className="results">here will come search results.. </div>
        );
      }
     });

     ...
     ...
  
     var SearchPage = React.createClass({
      render: function() {
        return (
          <div>
             <SearchBar/>
             <ResultsList/>
          </div>
        );
      }
    });

Note that in react if you want specify some css class you need to use className

Communication

Ok, you asking yourself, but how those components will communicate one with other?
How searchBar will tell the resultsList to display results?
- Here are two words you must remember when you talking about component communication in react:
props and state , we will talk about them in the next part