ReactJS not rendering php codeigniter

Question

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>

try ReactDOM.render(<HelloMessage message="World" />, document.getElementById('body')) — azium
– azium, Commented Feb 13, 2016 at 20:35
@azium I am using firebug and there doesn't seem to be any, saying that I can't seem to find the script on the sources tab in google chrome nor the script tab on firebug — Johnathon64
– Johnathon64, Commented Feb 13, 2016 at 20:54

rmpt · Accepted Answer · 2016-02-13 22:23:34Z

0

Try

React.render(<HelloMessage message="World"/>, document.body);

answered Feb 13, 2016 at 22:23

rmpt

6541 gold badge5 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rmpt Over a year ago

and with ReactDOM.render instead of React.render ?

rmpt Over a year ago

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

Johnathon64 Over a year ago

@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?

rmpt Over a year ago

I'm not sure if I got your question, but you need to include fb.me/react-0.14.0.min.js in your html page in order to use ReactJS.

Collectives™ on Stack Overflow

ReactJS not rendering php codeigniter

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related