Most Basic React

The intent of this article is to get you comfortable with React’s most basic features. Let’s get started by figuring out what the heck React is.

What is React?

React is a JavaScript library used to create and update HTML elements.

In fact, most React applications need only two functions:

ReactDOM.render()
React.createElement()

ReactDOM.render() is the function that actually creates and updates the DOM by the React Element objects passed in as instructions for rendering. Every Element returned by React.createElement() is a a plain old JavaScript object (POJO). Basically, they are configuration elements for the ReactDOM.render() to create.

Each React Element contains enough information to describe a single node in the DOM.

There are three properties of a React Element worth caring about:

• type define what type of HTML element to use; you can also create custom types
• props define attributes of an element; style is a prop
• children define an element’s content, oftentimes another React Element

React.createElement() requires that the first and second argument be type and props respectively. Any other arguments are considered children.

Everything you see in a React app is simply JavaScript, and I can’t stress that enough. It’s not like Rails or even Angular where you need to know a robust API to set it up. If you’ve got a handle on ES6 and basic JavaScript conventions you can make complex React apps with ease.

Basic React Syntax

Here’s how React looks at it’s most basic:

The above code snippet renders an image to the DOM. With JSX, which is XML tags that are then converted to JavaScript before execution, would look like this:

JSX allows you to write the same thing using familiar HTML tags, abstracting away some of the JavaScript for readability.

Conclusion

And that’s basic React in a nutshell. If you want to actually play around with this in realtime, you can create a react app with create_react_app easily. My next post later this week will show you how to do just that. Until next time. Cheers!