This post is just a quick overview of some of the basics of React development, shedding light on component basics and some of the technologies and terms used in React development.
React components ultimately render HTML that then gets displayed in the browser. The render() method of the component defines the structure of this HTML. React builds the application with a virtual version of the DOM (Document Object Model. The DOM is the HTML tree structure that makes up a typical web page). JSX makes the representation of HTML in a React component more like HTML which should be approachable by most people.
A Simple React Component
A basic React component has only one method, render(), this method is required for any React component. The render() method can return HTML elements or other React components. The return content should be wrapped in a wrapping element. The examples below show this.
There are two ways to create React components.
- Using ES6 classes
- Using the createClass method
Using ES6 Classes
React components that are ES6 classes extend the class React.Component. The example below shows a simple React component using ES6 classes.
Using the createClass method
This is a version of the previous example but implemented using the createClass method. Its much more popular to use ES6 classes.
Babel and Transpiling
Rendering A Component
In your application you will have a basic HTML page that will serve as the starting point. Here you can add a HTML element that will be used as the container for your React components. To get the component to render we will use the ReactDom.render() method. The structure of the ReactDom.render() takes two parameters, the component to render and the element it should be rendered into.
The location will usually be an id selector, an element you have defined with an id. The example below shows this rendering the simple component detailed above.