StochasticNerd StochasticNerd - 9 months ago 56
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">

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

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{
<div className="container-fluid">
<div className="jumbotron">
<h1>This is home now</h1>
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 Source

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"));