# React Different File

**URL:** <https://forum.kirupa.com/t/react-different-file/636403>\
**Category:** web dev\
**Created:** [April 10, 2017, 11:02pm UTC](https://forum.kirupa.com/t/react-different-file/636403 "2017-04-10T23:02:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jetz96](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@jetz96](https://forum.kirupa.com/u/jetz96)\
**Post date:** [April 10, 2017, 11:02pm UTC](https://forum.kirupa.com/t/react-different-file/636403/1 "2017-04-10T23:02:03Z")

</div>

Hi, I’m new at programming, and I want to ask hot to make

```auto
var Contact = React.createClass({
  render: function() {
      return (
        <div>
          <h2>GOT QUESTIONS?</h2>
          <p>The easiest thing to do is post on
          our <a href="http://forum.kirupa.com">forums</a>.
          </p>
        </div>
      );
    }
});

```

In different file from index.html (from tutorial [https://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm](https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm))  
Thanks

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 11, 2017, 3:14pm UTC](https://forum.kirupa.com/t/react-different-file/636403/2 "2017-04-11T15:14:49Z")

</div>

To do that, you’ll need to create different JSX files and bundle them together using something like webpack. This article explains how to do that: [https://www.kirupa.com/react/setting\_up\_react\_environment.htm](https://www.kirupa.com/react/setting_up_react_environment.htm)

😛