React Tutorial: Basic Concept Of React Component

 ·  · 

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 ReactElement. Following the React way, you divide your app into several components according to function and responsibility.

concepts of reactjs component

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

how reactjs work

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

reactjs_render_component_virtual_dom

 

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>

    <!-- React includes two parts: react.js and react-dom.js, both are required -->
    <script src="//fb.me/react-0.14.7.min.js"></script>
    <script src="//fb.me/react-dom-0.14.7.min.js"></script>

    <!-- babel standalone -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>

    <!-- React includes two parts: react.js and react-dom.js, both are required -->
    <script src="//fb.me/react-0.14.7.min.js"></script>
    <script src="//fb.me/react-dom-0.14.7.min.js"></script>

    <!-- babel standalone -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        var HelloWorld = React.createClass({
            // render function of React component, render real DOM
            render: function () {
                return (
                    <div>
                        <h3>Hello</h3>
                        <p>Nice to meet you!</p>
                    </div>
                )
            }
        });

        ReactDOM.render(<HelloWorld />, document.getElementById('app'));
    </script>
</body>
</html>

Pay attention to type attribute of script tag. Its value 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, h3 and 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.

// h3 is an instance of ReactElement
var h3 = React.createElement('h3', null, 'Hello');

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
    <!-- react includes two parts: react.js and react-dom.js -->
    <script src="//fb.me/react-0.14.7.min.js"></script>
    <script src="//fb.me/react-dom-0.14.7.min.js"></script>

    <!-- babel standalone -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        var HelloWorld = React.createClass({
            // render function of React component
            render: function () {
                return (
                    <div>
                        <h3>Hello</h3>
                        <p>Nice to meet you!</p>
                    </div>
                )
            }
        });

        var App = React.createClass({
            render: function () {
                return (
                    <div>
                        <h1>React Demo App</h1>
                        <HelloWorld />
                    </div>
                )
            }
        });

        // Mount root App component
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>
</html>

 

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
    <!-- react includes two parts: react.js and react-dom.js -->
    <script src="//fb.me/react-0.14.7.min.js"></script>
    <script src="//fb.me/react-dom-0.14.7.min.js"></script>

    <!-- babel standalone -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

    <style type="text/css">
    <!--
        .greet { color: red}
    -->
    </style>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        var HelloWorld = React.createClass({
            render: function () {
                return (
                    <div>
                        <h3 style="color:blue;">Hello</h3>
                        <p class="greet">Nice to meet you!</p>
                    </div>
                )
            }
        });

        var App = React.createClass({
            render: function () {
                return (
                    <div>
                        <h1>React Demo App</h1>
                        <HelloWorld />
                    </div>
                )
            }
        });

        // Mount root App component
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>
</html>

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.

<script type="text/babel">
// ...

var HelloWorld = React.createClass({
    render: function () {
        return (
            <div>
                <h3 style={ {color: 'blue'} }>Hello</h3>
                <p className="greet">Nice to meet you!</p>
            </div>
        )
    }
});

// ...
</script>

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

<script type="text/babel">
// ...

var HelloWorld = React.createClass({
    render: function () {
        var styleObj = {
            color: 'blue',
            // font-size in CamelCase
            fontSize: '40px'
        };

        return (
            <div>
                <h3 style={ styleObj }>Hello</h3>
                <p className="greet">Nice to meet you!</p>
            </div>
        )
    }
});

// ...
</script>

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

// CamelCase for padding-left is: paddingLeft
document.getElementById('demo').style.paddingLeft = '30px';

 

5 Browser plugin: React developer tool

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

Browser_Plugin_React_Developer_Tool