React is based on a modular build, with encapsulated components that manage their own state so it will efficiently update and render your components when data changes. In React, a component's logic is written in JavaScript instead of templates so you can easily pass rich data through your app and manage the state out of the DOM.
Using the render() method, we are rendering a component in React that takes input data and returns what you want to display. It can either take HTML tags (strings) or React components (classes).
Let's take a quick look at examples of both:
var myReactElement = <div className="hello" />;
ReactDOM.render(myReactElement, document.getElementById('example'));
In this example, we are passing HTML as a string into the render method which we have used before creating the <Navbar>:
var ReactComponent = React.createClass({/*...*/});
var myReactElement = <ReactComponent someProperty={true} />;
ReactDOM.render(myReactElement, document.getElementById('example'));
In the preceding example, we are rendering the component, just to create a local variable that starts with an uppercase convention. Using the upper versus lowercase convention in React's JSX will distinguish between local component classes and HTML tags.
So, we can create our React elements or components in two ways: either we can use Plain JavaScript with React.createElement or React's JSX.
So, let's create our sidebar elements for the app to better understand the React.createElement.
Using JSX in React is completely optional for creating the React app. As we know, we can create elements with React.createElement which take three arguments: a tag name or component, a properties object, and a variable number of child elements, which is optional. Observe the following code:
var profile = React.createElement('li',{className:'list-group-item'},
'Profile');
var profileImageLink = React.createElement('a',{className:'center-
block text-center',href:'#'},'Image');
var profileImageWrapper = React.createElement('li',
{className:'list-group-item'}, profileImageLink);
var sidebar = React.createElement('ul', { className: 'list-
group' }, profile, profileImageWrapper);
ReactDOM.render(sidebar, document.getElementById('sidebar'));
In the preceding example, we have used React.createElement to generate a ul-li structure. React already has built-in factories for common DOM HTML tags.
Here is an example for this:
var Sidebar = React.DOM.ul({ className: 'list-group' },
React.DOM.li({className:'list-group-item text-muted'},'Profile'),
React.DOM.li({className:'list-group-item'},
React.DOM.a({className:'center-block text-center',href:'#'},'Image')
),
React.DOM.li({className:'list-group-item text-right'},'2.13.2014',
React.DOM.span({className:'pull-left'},
React.DOM.strong({className:'pull-left'},'Joining Date')
),
React.DOM.div({className:'clearfix'})
));
ReactDOM.render(Sidebar, document.getElementById('sidebar'));Let's take a quick look at our code in a browser, which should resemble the following screenshot:
Here is our full code so far that we have written to include the <Navbar> component:
<script type="text/babel">
var Nav= ReactBootstrap.Nav;
var Navbar= ReactBootstrap.Navbar;
var NavItem= ReactBootstrap.NavItem;
var NavDropdown = ReactBootstrap.NavDropdown;
var MenuItem= ReactBootstrap.MenuItem;
var navbarReact =(
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#">EIS</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Home</NavItem>
<NavItem eventKey={2} href="#">Edit Profile</NavItem>
<NavDropdown eventKey={3} id="basic-
nav-dropdown">
<MenuItem eventKey={3.1}>View Tickets</MenuItem>
<MenuItem eventKey={3.2}>New Ticket</MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
ReactDOM.render(navbarReact,document.getElementById('nav'));
var Sidebar = React.DOM.ul({ className: 'list-group' },
React.DOM.li({className:'list-group-item text-muted'},'Profile'),
React.DOM.li({className:'list-group-item'},
React.DOM.a({className:'center-block
text-center',href:'#'},'Image')
),
React.DOM.li({className:'list-group-item text-right'},
'2.13.2014',
React.DOM.span({className:'pull-left'},
React.DOM.strong({className:'pull-left'},'Joining Date')
),
React.DOM.div({className:'clearfix'})
));
ReactDOM.render(Sidebar, document.getElementById('sidebar'));
</script>
<div id="nav"></div>
<div class="container">
<hr>
<div class="row">
<div class="col-sm-3" id="sidebar">
<!--left col-->
</div>
<!--/col-3-->
<div class="col-sm-9 profile-desc"></div>
<!--/col-9-->
</div>
</div>
<!--/row-->
Our app code looks very messy. Now it's time to make our code clean and properly structured.
Copy the navbar code in another file and save it as navbar.js.
Now copy the sidebar code in another file and save as sidebar.js.
Create one folder in your root directory with the name of the components and copy both navbar.js and sidebar.js inside it.
Include both the js file in your head section.
The head section will look like this:
<script type="text/javascript" src="js/react.min.js"></script> <script type="text/javascript" src="js/react-dom.min.js"></script> <script src="js/browser.min.js"></script> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/react-bootstrap.min.js"></script> <script src="components/navbar.js" type="text/babel"></script> <script src="components/sidebar.js" type="text/babel"></script>
And here is your HTML code:
<div id="nav"></div> <div class="container"> <hr> <div class="row"> <div class="col-sm-3" id="sidebar"> <!--left col--> </div> <!--/col-3--> <div class="col-sm-9 profile-desc"></div> <!--col-9--> </div> </div> <!--/row-->
Now our code looks much cleaner. Let's take a quick look at your code output in a browser:
