CODEWITHSUNDEEP
javascriptreactjs
Aman Gupta
Aman Gupta

Reputation: 3797

Client side rendering React

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?

Upvotes: 3

Views: 5614

Answers (4)

quine9997
quine9997

Reputation: 834

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 ;

Upvotes: 0

Aman Gupta
Aman Gupta

Reputation: 3797

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

Upvotes: 5

G. Mansour
G. Mansour

Reputation: 696

Just simple like that

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

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

There is some tutorials here Tutorial

CodePen exemple

Upvotes: 0

Quentin
Quentin

Reputation: 943134

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?

Upvotes: 4

Related Questions