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 that we 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. Use the uppercase convention in JSX to avoid distinguishing between local component classes and HTML tags because JSX is an extension of JavaScript. In React, 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 first form component with JSX.