StochasticNerd StochasticNerd - 1 month ago 7
React JSX Question

React not rendering simple component

I'm new to React thus the question.
I'm trying to render a basic React component. This is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>React</title>
</head>
<body>

<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>


This is my index.js

import React from 'react';
import 'babel-polyfill';
import { render } from 'react-dom';
import './styles/style.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Layout from './components/Layout';

React.render(<Layout />, document.getElementById("root"));


This is my Layout component.

import React from 'react';
import {render } from 'react-dom';

class Layout extends React.Component{
render(){
return(
<div className="container-fluid">
<div className="jumbotron">
<h1>This is home now</h1>
</div>
</div>
);
}
}
export default Layout;


This is the error I see on the console,

Uncaught TypeError: _react2.default.render is not a function


When I start the dev server, I see a blank page with nothing getting rendered. Any help appreciated.

Answer

The way you import the render function inside index.js from react-dom changes the way you invoke it.

import { render } from 'react-dom';

Here you just import the render method from the react-dom object. So to use it you would say

render(<Layout />, document.getElementById("root"));
Comments