3

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?

Improve this question
8
  • 4
    The browser can't understand JSX natively. You need to compile it. Commented Dec 19, 2016 at 7:22
  • I have imported React and ReactDOM as external js, wont it compile at the client side? Commented Dec 19, 2016 at 7:24
  • 4
    No, you need to use Babel. Commented Dec 19, 2016 at 7:25
  • 1
    You might be learning React from an outdated tutorial (React.createClass). I'd recommend starting with the official tutorial. And to build your React apps, use create-react-app. Commented Dec 19, 2016 at 7:29
  • I want to understand things from scratch(out of curiosity), so not using create-react-app. Commented Dec 19, 2016 at 7:35

4 Answers 4

Reset to default
5

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

  1. 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
  2. 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.
  3. 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'));
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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

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

1 Comment

My bad about the first one. Need to understand about transpiling though.
0

Just simple like that

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

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

There is some tutorials here Tutorial

CodePen exemple

Improve this answer

Comments

0

Today there is this solution. (official ? )

1. https://ru.react.js.org/docs/add-react-to-a-website.html#add-react-in-one-minute.

2. https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip

Tutorial

1. Inside your local hard disk create a folder, say  /mnt/disk1/app01
2. Inside it create 2 files: index.html and like_button.js

3. Write the following code.

4. Open the file html with Chromium

FILE1

<!-- FILE /mnt/disk1/app01/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

FILE2

//FILE /mnt/disk1/app01/like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Update React 18.

https://reactjs.org/docs/add-react-to-a-website.html ;

https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip ;

https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 ;

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.