Twitter Bootstrap Question posted in

Client side rendering React – Twitter bootstrap

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?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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?
    Login or Signup to reply.
  3. 0

    Just simple like that

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

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

    There is some tutorials here Tutorial

    CodePen exemple

    Login or Signup to reply.
  4. 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 ;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search