0
\$\begingroup\$

I am learning react.js by writing small examples on it.

What I have done is rendered a html table from a list of employees.

I have used React.createElement and React.createClass api for this.

the code is as follows,

<!DOCTYPE HTML>
<html>
    <head>
        <title>React Template</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">         
    </head>
    <body>
        <!-- Body Content -->
        <div id="mainContainer" class="w3-container"></div>

        <!-- The core React library -->
        <script src="/node_modules/react/dist/react.min.js"></script>
        <!-- The ReactDOM Library -->
        <script src="/node_modules/react-dom/dist/react-dom.min.js"></script>

        <script type="text/javaScript">
            (function(){
                'use strict'
                // custom javaScript content

                var employeeList = [];
                employeeList.push({ "name" : "Petre Thiel", "profession" : "Musician", "salary/hr" : "60 USD" });
                employeeList.push({ "name" : "John Novano", "profession" : "Lawyer", "salary/hr" : "100 USD" });
                employeeList.push({ "name" : "Caleb Keats", "profession" : "Electrician", "salary/hr" : "40 USD" });
                employeeList.push({ "name" : "Chris Prat", "profession" : "Security Gaurd", "salary/hr" : "20 USD" });
                employeeList.push({ "name" : "Joshua Hiens", "profession" : "Butler", "salary/hr" : "27 USD" });
                employeeList.push({ "name" : "Tim Robbins", "profession" : "Physical Trainer", "salary/hr" : "50 USD" });
                employeeList.push({ "name" : "George Aptik", "profession" : "Laboritory Technician", "salary/hr" : "50 USD" });



                // creating table row list
                // on the basis of employee list                
                var trElementList = (function(list){
                    var trList = [], 
                        trElement = undefined,
                        trElementCreator = trElementCreator,
                        employeeElement = undefined;

                    // creating the row with table-header element
                    var tableHeaderCreator = (function(obj){
                        var thList = [], 
                            thElement = null;

                        for(var prop in obj){
                            thElement = React.createElement('th',null,prop.toUpperCase());
                            thList.push(thElement);
                        } // end of for

                        return React.createElement('tr',null,thList);
                    })(list[0]);

                    trList.push(tableHeaderCreator); // add row containing table-header element to row list


                    // iterating through employee list and
                    // creating row for each employee
                    for(var x = 0; x < list.length; x++){

                        employeeElement = list[x];

                        trElement = (function(employee){
                            var trComp = trElementCreator(employee); // create row per employee
                            return trComp;
                        })(employeeElement);

                        trList.push(trElement);
                    } // end of for

                    return trList; // returns row list


                    function trElementCreator(obj){
                        var tdList = [], 
                            tdElement = undefined;

                        for(var prop in obj){
                            tdElement = React.createElement('td',null,obj[prop]); 
                            tdList.push(tdElement);
                        } // end of for

                        var trComponent = React.createClass({
                            render : function(){
                                return React.createElement('tr',null,tdList);
                            }
                        });

                        return React.createElement(trComponent);
                    } // end of trElementCreator

                })(employeeList);

                var tableCaptionElement = React.createElement('caption',null,"Employee Information"); 
                var tableComponent = React.createClass({
                    render : function(){
                        return React.createElement("table",{
                            "className" : "w3-table w3-table-all"
                        },tableCaptionElement,trElementList);
                    }
                });

                ReactDOM.render(React.createElement(tableComponent),document.getElementById("mainContainer"));

            })();   
        </script>
    </body>
</html> 

The working example is as follows click here

Requesting you to please review my code and suggest me any improvements.

Also let me know how will I utilize React.createFactory() api in the above example ?

\$\endgroup\$
  • \$\begingroup\$ Are you deliberately avoiding the JSX syntax in favour of React.createElement? \$\endgroup\$ – BenC Sep 8 '17 at 7:53
  • \$\begingroup\$ YES. I am reading "React Up and Running", And I am going chapter wise. Can you please suggest me some good learning content for react if possible. Also one more question, is ES6 required to learn react ? \$\endgroup\$ – Rahul Shivsharan Sep 8 '17 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.