Unable to render a component from other component in react

Question

I am trying to render a component from other component, but failing miserable, Can someone please help me with code and help me understand what i am doing wrong? Also, using the following example, can someone help me understand when to use type=text/jsx or type=text/babel?

<body>
<div class="container">
  <h1>Flask React</h1>
  <br>
  <div id="content"></div>
</div>
<!-- scripts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script type="text/jsx">

  /*** @jsx React.DOM */

  var realPython = React.createClass({
    render: function() {
      return (<realPython1 />);
    }
  });

  var realPython1 = React.createClass({
    render: function() {
      return (<h2>Greetings, from Real Python!</h2>);
    }
  });


  ReactDOM.render(
    React.createElement(realPython, null),
    document.getElementById('content')
  );

</script>
</body>

Use capital component names! Or else they'll be treated as DOM elements! — Andrew Li, Dec 01 '17 at 19:42
This can help https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters — Jagdish Idhate, Dec 01 '17 at 19:46

score 0 · Answer 1 · answered Dec 01 '17 at 19:54

Hey man I did some refactoring on your code, maybe take a look at the react docs they are pretty awesome eitherway here's your code

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- scripts -->
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
        <div id="content"></div>
        <script type="text/babel">

              var RealPython = React.createClass({
                render: function() {
                  return <RealPython1 />
                }
              });

              var RealPython1 = React.createClass({
                render: function() {
                  return <h2>Greetings, from Real Python!</h2>;
                }
              });


              ReactDOM.render(
                React.createElement(RealPython),
                document.getElementById('content')
              );

            </script>
</body>

@DimitrisKirtsios i am new to this technology, really appreciate you help, Thanks — ankita.gulati, Dec 01 '17 at 20:02
@anonymous No problem, try the docs too for any other questions react is well documented — Dimitris Kirtsios, Dec 01 '17 at 20:06

score 0 · Answer 2 · answered Dec 01 '17 at 20:06

First you probably don't want to be using jstransform any longer, it has been deprecated: https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Instead you should use a transpiler like babel: https://babeljs.io/

Once you are transpiling your code then you just write javascript so you can just use script type "text/javascript" instead of either "text/jsx" or "text/babel".

Below is an example of how to render a component within a component.

class SubComponent extends React.Component {
  render() {
    return <div>
      <h2>A cool sub-component</h2>
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <h2>Greetings, from Real Python!</h2>
      <SubComponent />
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></app>

Thank you so much @socketwiz . It really cleared a lot things. Just one more small query, when i am trying to keep 'application' and 'subcomponent' in 2 different files, and importing subcomponent, i am getting an error `` require is not defined`` in my console. Any idea, why? — ankita.gulati, Dec 01 '17 at 21:34
Yeah, you need a way to define require and import. A lot of people use webpack (https://webpack.js.org/) for this, but now you're getting into deep water. As a beginner I would recommend something like "Create React App" which will manage all of this for you so all you have worry about is your code (https://github.com/facebookincubator/create-react-app). — Ricky Nelson, Dec 02 '17 at 01:59

Unable to render a component from other component in react

2 Answers2