React Tutorial: Basic Concept Of React Component---babel, a translator

Getting started with react.js: basic concept of React component

1 What is React.js

React, or React.js is an open source javascript framework from Facebook. React.js is ideal for doing view rendering work in large scale or single page application (SPA). That is, React works as the V in MVC.

2 How React works

The main concept of React is component. A React component can be composed of React components and ReactElements. Following the React way, you divide your app into several components according to function and responsibility.

React components and ReactElements are used as Virtual DOM, which looks like the markup of real HTML DOM elements.

Virtual DOM (components and ReactElements) syntax will be compiled and translated into plain javascript codes, which will render real HTML DOM elements in browser.

3 Write a React component

As mentioned above, two things are required to write and run a React component.

• React.js
• babel, a translator, can translate ECMAScript 6 codes and Virtual DOM syntax to ECMAScript 5 codes, which can be run in all modern browsers.

For simplicity, we're going to use React and babel scripts hosted by free CDN.

 

Create a HelloWorld component which is responsible for rendering a HTML h3 tag and a HTML p tag. Then mount the HelloWorld component to div tag whose id is app.

 

Pay attention to type attribute of script tag. Its vaule is text/babel, which means that the codes should be processed and translated by babel.

Note: The net result of running above code snippets is that React will render real HTML DOM tags, div, h3and p in browser. But div, h3 and p in above codes are not real HTML DOMs, they are also virtual DOMs. They are also React elements, that is ReactElement exactly in React's eyes.

Take the <h3>Hello</h3> element in above render() function as an example, React.js will create a ReactElement essentially. Equivalently, the behind the scenes code are as follows.

 

As you can see, a react component can be embedded as a virtual DOM within another component. For another example, you can give a root component, e.g. App, and then use all sub components and ReactElements within this root.

 

4 CSS class and inline styles of React component

The usual way of adding CSS class name and inline styles will not take effect in React component.

 

The inline style color:blue; and CSS class greet not only won't work, but will raise javascript error. (See it in javascript console of developer tool in your browser.)

Just as I have said, h3 and p here are ReactElements instead of real HTML DOM elements.

The correct way to set a CSS class name is to use className property of React components or ReactElements.

Likewise, inline CSS styles should be wrapped as an object and passed to the style property of React components.

 

Alternatively, if the inline styles are long and complex, you can predefine styles as a variable.

 

Note that the CSS property name should be written in CamelCase way, just as the way in plain javascript.

 

5 Browser plugin: React developer tool

You can install browser plugin React developer tool for purpose of debugging.

 

https://www.codevoila.com/post/38/react-tutorial-basic-concept-of-react-component