I'm trying to render a React element in a PHP webpage. Thing is I haven't touched React in awhile (6mths+) and am kinda rusty...
Of course, I have tried searching for answers before asking, but most solutions deal with exporting of the React element within the React file itself. Thing is, I need to export the element in the DOM itself in order to feed it initial PHP data.
Anyway, I keep getting this error in the console and am not sure how to resolve it.
react-with-addons.js:5221 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
printWarning @ react-with-addons.js:5221
warning @ react-with-addons.js:5245
createElement @ react-with-addons.js:2283
(anonymous) @ new_booking:265
react-dom.js:18118 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
at invariant (react-dom.js:18118)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (react-dom.js:16179)
at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4828)
at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4719)
at Object.mountComponent (react-dom.js:11551)
at mountComponentIntoNode (react-dom.js:9772)
at ReactReconcileTransaction.perform (react-dom.js:14760)
at batchedMountComponentIntoNode (react-dom.js:9794)
at ReactDefaultBatchingStrategyTransaction.perform (react-dom.js:14760)
at Object.batchedUpdates (react-dom.js:8825)
And here is the code:
PHP page
<?php defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html>
<head>
<link href="<?=STATIC_REPO;?>css/parsley.css" rel="stylesheet" type="text/css" />
<link href="<?=STATIC_REPO;?>vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Wrapper start -->
<div id="wrapper">
<?php $this->load->view('staff/_snippets/navbar_staff'); ?>
<!-- Page Content start -->
<div id="page-wrapper">
<ol class="breadcrumb">
<li><a href="<?=site_url('staff/authenticate_staff/start');?>">Home</a></li>
<li><a href="<?=site_url('staff/room_booking/browse_bookings');?>">Bookings</a></li>
<li class="active">New Booking</li>
</ol>
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>New Booking</h2>
</div>
<div class="col-md-11">
<div class="row">
<form id="new_booking_form" role="form" class="form-horizontal" method="post" data-parsley-validate>
<div id="TestReact"></div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<button id="submit_btn" type="submit" class="btn btn-primary">
<i class="fa fa-check fa-fw"></i> Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content end -->
</div>
<!-- Wrapper end -->
<?php $this->load->view('admin/_snippets/body_resources_admin'); ?>
<script src="<?=STATIC_REPO;?>vendor/parsleyjs/parsley.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/moment/moment.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/moment/moment.min.js"></script>
<script src="<?=STATIC_REPO;?>vendor/numeral/numeral.min.js"></script>
<script>
let dateFormat = 'DD-MM-YYYY';
$(document).ready(function() {
$('#start_date').datetimepicker({
format: dateFormat
});
$('#end_date').datetimepicker({
format: dateFormat
});
});
</script>
<!-- react resources -->
<script src="<?=STATIC_REPO;?>vendor/react/react-with-addons.js"></script>
<script src="<?=STATIC_REPO;?>vendor/react-dom/react-dom.js"></script>
<scirpt src="<?=STATIC_REPO;?>react/dist/TestReact.js"></script>
<script>
let element = React.createElement(TestReact);
ReactDOM.render(
element,
document.getElementById('TestReact')
);
</script>
</body>
</html>
JSX code compiled to JS with gulp. This is currently just a test element to check if my React is setup correctly.
const TestReact = React.createClass({
render: function() {
console.log('TestReact rendered.');
return (
<div>
<h1>This is a Test React class. Hello World</h1>
</div>
);
}
}); //end TestReact class
