React Component in Meteor Package

Question

Solved on 2017-10-23 [See Below]

I'm trying to write React Components as Meteor Packages and i think i do something terribly wrong somewhere and i can't find any samples anywhere online.

I Have my Package setup like this:

Package.describe({
  name: 'bardia:mapackage',
  version: '0.0.1',
  summary: '',
  documentation: 'README.md'
});

Package.onUse(function(api) {
  api.versionsFrom('1.5.2');
  api.use('ecmascript');
  api.mainModule('mapackage.js');
});

And my mapackage.js as

import Comps from './Comps';

export const name = Comps;

and my react component like this

import React, { Component } from 'react';

class Comps extends Component {
  render() {
    return (
      <div>
         welll this lah
      </div>
    );
  }
}

export default Comps;

and when importing it to my main App as:

import {name} from 'meteor/bardia:mapackage'
const App = props => (
  <center>{name}</center>
);

it returns as just

<center data-reactroot=""></center>

If i replace export const name = Comps to export const name = 'Comps'; it will render 'Comps'. meaning, it only renders the string.

how can i get to work !?

Answer 1

So after talking to another developer, i managed to get a better understanding on how the components were being rendered. As a solution i Used React-Router to redirect to each components, as i initially wanted it to be that way.

I'm using CleverBeagle Pup Boilerplate , Nothing fancy about it it's a minimal Meteor - React package that provides the tools you need without overcomplicating things.

if you want to get my running code, clone this repo : REPO

once you cloned it , run Meteor npm install in the folder and npm start , Read More

in the package folder i created a sample package, called Mapackage, that's where all the magic happens. I'll commit changes to this repo as i'm doing my tests.

---

Comps.jsx

This is just a simple react component, to be exported

Mapackage.js

//Import Components that are going to be exported as Routes
import Comps from './Comps';

//Export Router and their components
const MaPack = ()=>{
  return(
    <div>
      <Route path='/maPack' exact={true} component={Comps} />
      //if you want more functionality on your routes
      <Route path='/maPack/:_id' exact={true} component={subMaPack} />
    </div>
  )
}

---

Once you're done with this you can simply import the Route comonent to your Router or Switch Read More