Need help on React Js

Question

I am new to React Js and my code is not working. Please have a look below:

This is my script file Main.jsx. This file is compiled by react and output is put in main.js file under 'dist' folder.

var react = require("react"),
reactDom = require("react-dom");
var myComponent = react.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

reactDom.render(<myComponent />, document.getElementById("basicDiv"));

It is Index.html

<html>    
<head>
    <base href="./" />
    <title>App title</title>    
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>

<body>
    <div id="basicDiv"></div>

    <!-- React compiled code is in dist folder and is accessible -->
    <script src="dist/main.js"></script>
</body>

</html>

When I run the index.html file in browser the Output is blank screen. Please see the below screenshot of chrome dev tools inspector window:

The content of 'myComponent' is not rendered in browser. I have seen many tutorials with the same code but it is not working... don't know why.

Please help on this and if possible, provide me some sample code / tutorials for latest releases also. Thanks in advance

Update

Please note that I have included React library reference in my HTML file which makes me to freely use "React" or "react" as a variable name while importing React in my script files. Taking "React" (with capital R) as variable name is not mandatory here in this case.

Final Update

So the solution (as answered by Damien Leroux) is to make the react component variable-name starting with a capital letter. 'var myComponent' must be 'var MyComponent' or 'var Mycomponent'.

score 3 · Accepted Answer · answered Nov 03 '16 at 12:30

3

A react class must always begin with an Upper case letter:

var MyComponent = react.createClass({

read user-defined-components-must-be-capitalized

answered Nov 03 '16 at 12:30

Damien Leroux

11,177
7
43
57

You are the genius on this page man .... thanks. I changed `var myComponent` to `var MyComponent`. It is working now. – Shiv Nov 04 '16 at 06:32

Shubham Khatri · Answer 2 · 2017-06-28T04:33:22.677

2

Not only your React Component must begin with a Upper case letter, See this:

React - Adding component after AJAX to view

but you must also Import react like

var React = require("react"),
ReactDom = require("react-dom");

i.e UpperCase Letters since internally JSX is transpiled to React.createElement() in which case it will say that react is not defined.

You code must look like

var React = require("react"),
ReactDom = require("react-dom");
var MyComponent = React.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

ReactDom.render(<MyComponent />, document.getElementById("basicDiv"));

edited Jun 28 '17 at 04:33

answered Nov 03 '16 at 12:58

Shubham Khatri

270,417
55
406
400

>>since react internally uses React.createElement() in which case it will say that react is not defined. ..... To counter this error I have included React's reference in my html. I do not get that error with non-capital variable for importing react. Though this doesn't answer the problem I explained in screenshot above... – Shiv Nov 03 '16 at 18:22
I would suggest you to use Webpack to bundle your code. Follow the youtube react tutorial by LeanCodeAcademy – Shubham Khatri Nov 03 '16 at 18:42
yes @Shubham Khatri, I would use something like webpack, but as I am starting on react, I want to manually go through this whole lib-loading and all stuff. – Shiv Nov 04 '16 at 06:41
@Shivam Its better to get directly started with webpack. I read somewhere that browser support for babel has been retracted, that may also be the reason you are facing this issue – Shubham Khatri Nov 04 '16 at 06:43

score 1 · Answer 3 · answered Jul 06 '17 at 07:35

import React from 'react'
import './Aboutus.css'
import Header from '../Home/Header/Header.jsx'
import Footer from '../Home/Footer/Footer.jsx'

var stylesheader = {
  paddingTop: 50, 
  textAlign:'center', 
  color: '#204871'
};

var stylehead = {
  paddingLeft: 200,
  paddingRight:200, 
  paddingTop:20, 
  color: '#204871'
};

var styles = {
  paddingTop: 120, paddingLeft:20,
  color: '#128bea', 
  fontSize: 26
};

var style1 = {
  paddingTop:100,
  color: '#204871' 
};

class Aboutus extends React.Component {

    render() {

  var title = "we are a team";

  var leadership = [
  {
    "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  },
  {
     "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  }
  ];

  var business = [
  {
     "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  ];

  var algorithm = [
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

   var developer = [
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

     var row1=leadership.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.phone}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      var row2=business.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row3=algorithm.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row4=developer.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      return (

         <div className="home-component">

                <div className="home-header">
                <Header/>
                </div>

                <div className="home-content" >
                            <h1 style={stylesheader}> Meet the team </h1>
                            <h2 style={stylehead}>{title}</h2>

                            <h2 style={styles}> Leadership </h2>
                            <div className="row" style={style1}>
                              {row1}
                            </div>

                            <h2 style={styles}> Business Development </h2>
                            <div className="row" style={style1}>                    
                             {row2}                           
                            </div>

                            <h2 style={styles}> Algorithm Development </h2>
                            <div className="row" style={style1} >                    
                             {row3}                         
                            </div>

                            <h2 style={styles}>Software Development </h2>
                             <div className="row" style={style1} >                    
                              {row4}
                             </div>  
                </div>

                <Footer/>

         </div>
    );

    }
}

export default Aboutus;

Need help on React Js

3 Answers3

Linked