How to convert html to JSX, ReactJS Component?

Question

I am using Webpack, Redux and ReactJS.

Currently I have the following set up in my index.html but I want to convert it to JSX, ReactJS Component. What's the proper and correct way to do so?

And in my index.html <head/>, have a class helper functions called classie.js:

<script src="classie.js"></script>
<script>
  function init() {
      window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
              shrinkOn = 300,
              header = document.querySelector("header");
          if (distanceY > shrinkOn) {
              classie.add(header,"smaller");
          } else {
              if (classie.has(header,"smaller")) {
                  classie.remove(header,"smaller");
              }
          }
      });
  }
  window.onload = init();
</script>

And in my index.html <body/>:

<div id="wrapper">
  <header>
      <div class="container clearfix">
          <h1 id="logo">
              Practice Navigation Bar
          </h1>
          <nav>
            <a href="">Button 1</a>
            <a href="">Button 2</a>
          </nav>
      </div>
  </header>
</div>

So convert it into like the following ReactJS component format:

//App.js 

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

class NavBar extends Component {

  render() {
    return (
        <div>
          {/*e.g. What should go in here?*/}
        </div>
    );
  }
}

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NavBar)

Thank you in advance!

jabacchetta · Accepted Answer · 2016-08-18 22:25:54Z

1

Here's one way. I'm going to make a couple of assumptions here. One, that you'll be using React Router. Two, that the header is sitewide, and the remaining content is dependent on the route/path.

Also note that I'm throwing most of the html that you provided into a single header component. But, depending on the complexity of the header, you could break that down even further into a nav component and/or a navlink component.

Index.html

<body>
    <div id="app"></div>
</body>

App.js

import React from 'react';
import Header from '../Header';

function App({ children }) {
  return (
    <div>
      <Header />
      {children}
    </div>
  );
}

export default App;

Header.js

import React, { Component } from 'react';
import { has, add, remove } from '../classie';

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      display: false,
    };

    this.doSomething = this.doSomething.bind(this);
  }

  componentDidMount() {
    this.getData();
    window.addEventListener('scroll', function (e) {
      var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 300,
        header = document.querySelector("header");
      if (distanceY > shrinkOn) {
        add(header, "smaller");
      } else {
        if (has(header, "smaller")) {
          remove(header, "smaller");
        }
      }
    });
  }

  getData() {
    // GET request here
  }

  doSomething() {
    this.setState({
      display: true,
    });
  }

  render() {
    return (
      <header>
        <div class="container clearfix">
          <h1 id="logo" onClick={this.doSomething}>
            Practice Navigation Bar
          </h1>
          <nav>
            <a href="">Button 1</a>
            <a href="">Button 2</a>
          </nav>
        </div>
      </header>
    );
  }
}

export default Header;

Index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import App from './components/App';
import Home from './components/Home';
import InnerPage from './components/InnerPage';

module.exports = render((
  <Router history={browserHistory}>
    <Route component={App}>
      <Route path="/" component={Home} />
      <Route path="innerpage" component={InnerPage} />
    </Route>
  </Router>
), document.getElementById('app'));

edited Aug 18, 2016 at 22:25

answered Aug 17, 2016 at 20:20

jabacchetta

51.1k11 gold badges71 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jo Ko Over a year ago

Those are correct assumptions! Where should the classie.js go, which used to be in my index.html <head/>?

Jo Ko Over a year ago

Just checking to see if you saw my previous comment. Please let me know

jabacchetta Over a year ago

It depends what you're doing. Generally, you keep everything related to the component inside the component to keep it modular. Although I also typically have helper files and such that get bundled up and inserted into the build html using Webpack (that's a much more in-depth answer). I've updated the header component example here to give you a couple of ideas. One uses React's lifecycle methods (componentDidMount) to trigger an API request, and the other changes the state of the component when the logo is clicked.

Jo Ko Over a year ago

Really appreciate the clarification. Where am I supposed to call the classie.js and keep the file? And how about as for the function init() {...} in index.html? Should I include it in the componentDidMount?

jabacchetta Over a year ago

Updated my example to answer those questions.

|

Collectives™ on Stack Overflow

How to convert html to JSX, ReactJS Component?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest