Client side rendering React

Question

I am new to React(Angular background) and trying to do client side rendering with react. Following index.html which is sent by express application:

<html>
    <head>
        <title>My Web</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
        <script type="text/javascript" src="/static/src/js/firstComponent.js"></script>
    </head>

    <body id="mainBody">
    </body>

</html>

Here is the react component file(firstComponent.js):

var FirstComponent = React.createClass({
    'render': function(){
        return <h1> Hello</h1>;
    }
});

ReactDOM.render(<FirstComponent />, document.getElementById('mainBody'));

But on loading the page, react does not seems to work. What is wrong here?

The browser can't understand JSX natively. You need to compile it. — Scimonster, Dec 19 '16 at 07:22
I have imported React and ReactDOM as external js, wont it compile at the client side? — Aman Gupta, Dec 19 '16 at 07:24
You might be learning React from an outdated tutorial (`React.createClass`). I'd recommend starting with the [official tutorial](https://facebook.github.io/react/tutorial/tutorial.html). And to build your React apps, use [create-react-app](https://github.com/facebookincubator/create-react-app). — ffxsam, Dec 19 '16 at 07:29
I want to understand things from scratch(out of curiosity), so not using create-react-app. — Aman Gupta, Dec 19 '16 at 07:35

score 4 · Answer 1 · edited May 23 '17 at 12:32

4

You have several problems. The ones that jump out at me are:

type="text/js" is not one of the recognised MIME types for JS so the browser will ignore that script element
firstComponent.js is a JSX file, which isn't supported by browsers, you need to transpile it into JavaScript
See Why does jQuery or a DOM method such as getElementById not find the element?

edited May 23 '17 at 12:32

Community

1
1

answered Dec 19 '16 at 07:27

Quentin

800,325
104
1,079
1,205

My bad about the first one. Need to understand about transpiling though. – Aman Gupta Dec 19 '16 at 07:32

score 4 · Accepted Answer · edited Jul 19 '17 at 01:45

Finally got things working. Following are the steps that I took:

Installed babel and plugins like babel-preset-react,babel-preset-es2015 etc. - This is needed to transpile react code to traditional javascript which is understood by the browser
Installed webpack and create bundle which has all the required modules - This is needed because browser does not understand commonjs i.e. require statements. Webpack basically bundles your custom js files and dependencies like react, react-dom etc.
Include bundle.js created in step 2 inside your body instead of head. This is needed because render function of ReactDOM is looking for an element which wont be rendered if we keep bundle.js inside head tag.

HTML:

<html>

    <head>
        <title>My</title>
    </head>

    <body>
        <div id="root"></div>
        <script type="text/javascript" src="/static/src/webpack/bundle.js"></script>
    </body>

</html>

Component:

import React from 'react'
import ReactDOM from 'react-dom'
class FirstComponent extends React.Component{
    render(){
        return (
            <h1> Hello</h1>
        );
    }
}

if(typeof window !== 'undefined')
    ReactDOM.render(<FirstComponent />, document.getElementById('root'));

score -1 · Answer 3 · answered Dec 19 '16 at 07:29

-1

Just simple like that

const FirstComponent = <h1> Hello</h1>;
    }
});

ReactDOM.render(FirstComponent , document.getElementById('mainBody'));

There is some tutorials here Tutorial

CodePen exemple

answered Dec 19 '16 at 07:29

G. Mansour

656
6
14

Client side rendering React

3 Answers3