React Meteor Boilerplate Repo - Try out React in 10 Seconds!

announce
1

Setting up an app to use React is something that takes a few mins to get right. This repo has fairly sane defaults so that you can clone, re-name, and run meteor to have a router, home/about pages, and a header component.

It also sets up browserify and adds the classNames component which is a must have if you have conditional logic for loading CSS classes.

The .id file is also not checked in so it will re-generate on your system.

Packages

  • React (MDG preview)
  • Flow Router
  • React Layout
  • Accounts Password
  • Accounts UI (with React wrapper)
  • meteorhacks:npm
  • cosmos:browserify
  • Removes insecure
  • Removes autopublish

Components

####Models

  • User (very light helpers)

####Pages/Routes

  • Home, About
  • Not Found
  • Main Layout
9 Likes
2

Thanks a lot, i was just looking for something like that, since i’m looking at switching from iron:router/blaze to flowrouter:react. This should help me see where to begin and how they work together :wink:

2 Likes
3

I just updated the boilerplate to the newest version of Meteor and have added the Reaktor Flow Router facade. It lets you use Flow Router like this:

  Reaktor.init(
    <Router>
      <Route path="/" layout={Layout} content={BlogList} />
      <Route path="/blog/:page" layout={Layout} content={BlogPost} />
      <Route path="/about" layout={About} />
      <Route path="/about/company" layout={Layout} content={Company}  />
    </Router>
  );

There’s also a vanila Flow Router branch as well.

4

Thank you for this! I have been wanting to check out React, but I’ve held off because I didn’t to spend a lot of time figuring out how to connect all the pieces first. Now, with this, I can figure it out from your working example - much easier!

Muy bueño, hermano!

1 Like
5

Thank you @SkinnyGeek1010, I’ve been using this boilerplate and its’ working out well. A couple of changes that I did were:

  1. I moved router.jsx to /lib

  2. Structured pages folder like so:
    .

    both/
    pages/
    MainLayout/
    MainLayout.less
    Dashboard/
    Dashboard.jsx
    Dashboard.less
    Deals/
    Deals.jsx
    Deals.less
    LoginLayout/
    LoginLayout.less
    Login/
    Login.jsx
    Login.less
    Signup/
    Signup.jsx
    Signup.less

Working great so far.

1 Like
6

Glad it’s working out for both of you!

Do you have any issues of a page being needed for both layouts? It never really occurred to me to nest them (though I also do a pages/posts/Posts.jsx)

with the new ES6 modules you can even name it index.js and then require like:
import Login as "pages/MainLayout/Login"; :smiley:

I also keep a /deals/tests/Deals_spec.jsx file in there to test the page as well (how to if you haven’t seen it yet)

7

Is there an updated version of this with Meteor 1.3?

1 Like
8

Not yet but I would happily accept PRs :smiley:

2 Likes