Abstracting static HTML to React

Question

So I've been working on trying to abstract a current HTML page I have into React. I'm not sure why, but its proven to give me a good amount of trouble. Would anyone be able to help me get on the right track? Here is an example of the code I am trying to abstract into a component.

<nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-header">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
</nav>

When I try to abstract, this is what I come up with.

<div id="header">
<script>
    var HeaderComponent = React.createClass( {
        render: function() {
            return (

            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-healer">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
            </nav>

        )
    }  
})
ReactDOM.render(<HeaderComponent />, document.querySelector('#header'))
</script> 
</div>

But the problem is, the component doesn't render and displays nothing.

What happens? Can you check the console? JSX is not valid javascript so this should throw a syntax error. — Axnyff, Jan 23 '18 at 13:57
The thing is it throws no syntax error. Show's everything is fine, just doesn't render when opened in local host. — Kyle Wade, Jan 23 '18 at 14:08
Are you sure your script is even executing ? If you change the title or do a console.log inside of it, does something happen? — Axnyff, Jan 23 '18 at 14:37

kugtas · Answer 1 · 2018-01-24T07:56:45.223

0

Try this:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="header"></div>
<script type="text/babel">
var HeaderComponent = () => ( {
    render: function() {
        return (

        <nav className="navbar navbar-inverse">
            <div className="container-fluid">
            <span className="navbar-brand navbar-healer">name</span>
            <ul className="nav navbar-nav">
            </ul>
                <div className="clearfix" id ="Avatar">
                    <p id = "displayName"></p>
                    <img src="" id = "photo"/>
                <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                </div>
            </div>
        </nav>
        )
    }  
})
ReactDOM.render(<HeaderComponent />, document.getElementById('header'))
</script> 
</body>
</html>

React does render it into the div. You do not need to have a script tag inside your div

edited Jan 24 '18 at 07:56

answered Jan 23 '18 at 14:10

kugtas

113
9

Thanks. Just tried that but still displays nothing. – Kyle Wade Jan 23 '18 at 14:15
I updated my answer with scripts in head. When I copy this 1:1 in a blank html file it works. Is what you posted only partial code? – kugtas Jan 23 '18 at 14:21
if it is the image that is not shown try this answer: https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js – kugtas Jan 23 '18 at 14:27
yes this is only partial code. I am breaking each element down into functional react components. This is just the first one I tried to abstract, but proved to be challenging to me for some reason – Kyle Wade Jan 23 '18 at 15:06
It seems that if you are using react > 15.5 create class is no longer supported. I update my answer with a working example for react 16 https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass – kugtas Jan 24 '18 at 07:54

rfschroeder · Answer 2 · 2018-01-23T15:01:40.383

First of all, you need to setup your reactjs project.

I advice you to follow these short tutorial about setup reactjs project with NPM, Webpack and Babel: https://medium.com/@fastlane80/setup-react-js-with-npm-babel-6-and-webpack-in-under-1-hour-1a714f973506.

Sure you will find easily another articles talking about "how to start with Reactjs development", but it is very good too. I recommend you starting reading Get started with ReactJS. Anyway, I prefer use classes concepts when I develop JS. Like this sample example:

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
 class AppComponent extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
    name: '',
    helloPhrase: 'Hello sr(a) '
   }
  }
  onTextChange(e) {
   this.setState({name: e.target.value});
  }
  sayHello() {
   let hello = this.state.helloPhrase + this.state.name + '.';
   this.setState({helloPhrase: hello});
  }
  render() {
   const styles = {
    button: {
     with: 50,
     backgroundColor: '#80bfff',
     color: 'white',
     marginLeft: 8
    }
   };

   return (
    <div>     
      <p>Insert your name to get hello:</p>
      <div>
       <input type="text" onChange={this.onTextChange.bind(this)}/>
       <button type="button" onClick={() => this.sayHello()} style={styles.button}>Greet me!</button>
      </div>
      {this.state.helloPhrase.trim() != 'Hello sr(a)' ? 
       <p>{this.state.helloPhrase}</p>
      : null}      
     </div>
   )
  }  
 }
 ReactDOM.render(<AppComponent />, document.getElementById('app'))
</script> 
</body>

You can starting modifying this very simple example to understand some basic concepts of ReactJS and ES6, ES7, etc (very useful) and how reactjs works.

I hope it can help your journey!

Thank you! Sorry for the super delayed response – Kyle Wade Oct 04 '19 at 16:25 — Kyle Wade, Oct 04 '19 at 16:25

score 0 · Answer 3 · answered Jan 23 '18 at 14:21

Code pan of your code

you have to write header div in html file. In your code ending div is not properly close.

 <div id="header"></div>


<script>
    var HeaderComponent = React.createClass( {
        render: function() {
            return (

            <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                <span className="navbar-brand navbar-healer">name</span>
                <ul className="nav navbar-nav">
                </ul>
                    <div className="clearfix" id ="Avatar">
                        <p id = "displayName"></p>
                        <img src="" id = "photo"/>
                    <button id="firebaseui-auth-container" className="btn ban-default">prop</button>
                    </div>
                </div>
            </nav>

        )
    }  
})
ReactDOM.render(<HeaderComponent />, document.querySelector('#header'))
</script>

Abstracting static HTML to React

3 Answers3