Basic React Component Structure and Concepts

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.

You can think of a React component as a piece of the UI in your application. A User Interface can be broken into small, individual, self contained React components that are assembled together to provide the display and inner workings of a User Interface. React components describe the HTML representation of your application in JavaScript.

JSX (JavaScript XML)

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.

	import React from 'react';

	class SimpleComponent extends React.Component {
	render() {
	return (
	<div>
	<h1>Simple Component</h1>
	<p>Hello, WORLD!!!!!</p>
	</div>
	);
	}
	}

view raw

simple-react-component-es6.jsx

hosted with ❤ by GitHub

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.

	import React from 'react';

	const SimpleComponent = React.createClass({
	render() {
	return(
	<div>
	<h1>Simple Component</h1>
	<p>Hello, WORLD!!!!!</p>
	</div>
	)
	}
	})

view raw

simple-react-component-createclass.jsx

hosted with ❤ by GitHub

Babel and Transpiling

Babel is a tool that converts your code into a stable and well supported version of JavaScript. It ensures that writing code with with features of JavaScript will work in older browsers. The act of converting the code is called Transpiling. Babel understands JSX and it is this that converts the JSX in our components into plain JavaScript that can be interpreted and executed.

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.

ReactDom.render(COMPONENT, LOCATION);

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.

	import ReactDOM from 'react-dom';
	import React from 'react';
	import SimpleComponent from 'components/simple-component';

	// Wait until the HTML DOM is full loaded, then render the react component
	document.addEventListener('DOMContentLoaded', () => {
	ReactDOM.render(<SimpleComponent />, document.querySelector('#app'));
	});

view raw

react-dom-render.js

hosted with ❤ by GitHub

One thought on “Basic React Component Structure and Concepts”

Pingback: Basic Brunch Example – Jonathan Meaney

JSX (JavaScript XML)

A Simple React Component

Using ES6 Classes

Using the createClass method

Babel and Transpiling

Rendering A Component

Share this:

Like this:

Related

One thought on “Basic React Component Structure and Concepts”

Leave a Reply Cancel reply