0

I am currently using material-ui library which makes use of reactjs and google material design which can be found here http://www.material-ui.com/#/ I have tried following one of their examples on their github page, which did not work. I have now tried doing a simple test to see if it would render by following this post React JS not rendering. However to my luck nothing has changed and it would not render.

Here is my react code:

import React from 'libraries/react';
import RaisedButton from 'libraries/material-ui/lib/raised-button';
import ReactDOM from 'libraries/react-dom';

var HelloMessage = React.createClass({
    render: function () {
        return <h1>Hello {this.props.message}! </h1>;
    }
});

React.render(HelloMessage, message="World" , document.getElementById('body'));

and here is my HTML:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

        ::selection { background-color: #E13300; color: white; }
        ::-moz-selection { background-color: #E13300; color: white; }

        body {
            background-color: #fff;
            margin: 40px;
            font: 13px/20px normal Helvetica, Arial, sans-serif;
            color: #4F5155;
        }

        a {
            color: #003399;
            background-color: transparent;
            font-weight: normal;
        }

        h1 {
            color: #444;
            background-color: transparent;
            border-bottom: 1px solid #D0D0D0;
            font-size: 19px;
            font-weight: normal;
            margin: 0 0 14px 0;
            padding: 14px 15px 10px 15px;
        }

        code {
            font-family: Consolas, Monaco, Courier New, Courier, monospace;
            font-size: 12px;
            background-color: #f9f9f9;
            border: 1px solid #D0D0D0;
            color: #002166;
            display: block;
            margin: 14px 0 14px 0;
            padding: 12px 10px 12px 10px;
        }

        #body {
            margin: 0 15px 0 15px;
        }

        p.footer {
            text-align: right;
            font-size: 11px;
            border-top: 1px solid #D0D0D0;
            line-height: 32px;
            padding: 0 10px 0 10px;
            margin: 20px 0 0 0;
        }

        #container {
            margin: 10px;
            border: 1px solid #D0D0D0;
            box-shadow: 0 0 8px #D0D0D0;
        }
    </style>
</head>
<body>

<div id="container">
    <h1>Welcome to CodeIgniter!</h1>

    <div id="body">

    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>
</body>
<script type="text/jsx" src="application/scripts/reactTest.js"></script>
</html>
Community
  • 1
  • 1
Johnathon64
  • 1,280
  • 1
  • 20
  • 45

1 Answers1

0

Try

React.render(<HelloMessage message="World"/>, document.body);
rmpt
  • 606
  • 1
  • 4
  • 24
  • and with ReactDOM.render instead of React.render ? – rmpt Feb 13 '16 at 22:30
  • keep cool sebastian, I honestly thought it was the solution of his problem. I'm also getting into AngularJS and I had a similar problem. React.render did the trick for me, unfortunately that's not the case for Johnathon64 – rmpt Feb 14 '16 at 10:43
  • @rmpt I was wondering could it be the case that I actually need to run it through webpack and include it in my html as a script tag? – Johnathon64 Feb 14 '16 at 23:18
  • I'm not sure if I got your question, but you need to include https://fb.me/react-0.14.0.min.js in your html page in order to use ReactJS. – rmpt Feb 15 '16 at 10:27