In theory, is that possible to run Blaze the same way? This hot reload is so much faster than meteor one…
I think it could be possible using webpack:hot-reload. The reason why it is so fast is it doesn’t reload the page. Meteor has no hot-reload, all it does is refreshing your browser. However, I don’t know if it will keep the states correctly or if anything will break.
You also have to be careful to only use this with code on the client. The reason is in dev, Meteor is not even aware of that code. It is injected inside the page and never saved on the disk.
Thanks, I’ll try it out then with Blaze. Even client-only solution would make development on low-end machines much more comfortable.
Yep! It seems to work pretty well with my recent tests on the other meteor webpack project. This one should work as well. The spacebars loader is all you need.
You can checkout this for a working example and port it to @benoitt 's repo. I had a few issues following the loader instructions to the T.
https://github.com/AdamBrodzinski/meteor-webpack-react/tree/blaze-example
omg you guys gotta try out https://github.com/postcss/postcss
it removes the need for grunt/sass/less you can just write css in sass style (after installing plugins) and it spits out transformed css files.
Try Radium : )
It is a way to write CSS using JS. Radium allowes to have all advantages of JS in your CSS. It is a little bit like jsx for html. Radium is inspired by https://speakerdeck.com/vjeux/react-css-in-js, good presentation, it made me to reconsider my views about CSS.
check out ccorcos:react-instance. This is how I solved this problem
The meteor reload is way too slow to be usable with React. Once you try it with webpack you don’t even want to go back to the old way.
I’m happy to see their is now a solution though.
1 Like
well don’t spoil me yet then!
1 Like
FYI I updated the project to contains the Todo app example translated to webpack / React. You might want to check it out. I’ve never seen a React example of the Todo app as close as the real one.
git clone https://github.com/thereactivestack/meteor-webpack-react-kickstart.git
Hi Benoitt
I tried your kickstart with react-select from here .
I had to manually copy the css file from the react-select/dist to the meteor folder to make it work.
Is this the normal workflow that I have to copy css-files from 3rd party components this way?
Sorry I’m not very experienced in web-dev.
Btw very nice project! Thanks
I look at you - you are to me some magicians
nothing is clear, what and how you are doing (-:
I am currently working on the CSS / SCSS loader. You will be able to require a CSS file in your App component and it will be bundled automaticlly. I have to fix the FOUC before releasing it, should be really soon.
Have you read the README? Can you be more specific?
First of all, thank you for this kickstart (-:
And yes, I’ve read the README…
But you have done a big project with Meteor and React, I am not a novice in the Meteor, but a very big novice in the React.
If there is no documentation, have to learn on someone else’s code (-:
1.If I want to add react component I have to do it in react folder?
npm install react-forms
2. If I need some Meteor package, when I have to add it in meteor folder? Or it is not important?
3. Which routing packages I can use?
4. Why do you import, but do not use TodoApp in App.jsx?
5. Why in TodoApp.jsx export default React.createClass, but in other files export default class TodoHeader extends Component? Or simply to show that it is possible to use both syntax?
Sure, for you it’s simple or even silly questions, but when you’re trying to understand something new, it all begins with such questions ((((-:
1 Like
This project is designed to teach by example. However, there is a tutorial I am currently creating that will make it easier. It will introduce React to the Meteor people and Meteor to the React people 
The react folder is where you put all your React components. Webpack is taking care of building a single bundle file and drop it inside Meteor. In development, the file is not on the disk though. webpack:hot-reload will serve the files. I’m trying hard to make the build process as simple as possible.
If you want to add NPM packages, you can do it in the root folder (and save it inside package.json). Then, you can access them in the react folder by using import / require.
You can install any meteor package inside the meteor folder. This is a regular Meteor project. All global variables will be accessible in your react folder.
You can use anything but the project is setup to work with react-router. The advantage is it brings you SSR out of the box by using the Meteor package reactrouter:react-router-ssr.
The App component is the root component in the router. this.props.children is representing what his nested routes are displaying. The routes are defined in react/index.js.
One word: mixinx! 
Meteor is giving us a wonderful mixin ReactMeteorData to to be able to communicate with any subscription / collection. You cannot use mixins with ES6 classes, but you can with React.createClass. I will be happy to change it by a class once Meteor is using something else. It will probably be an ES6 decorator.
1 Like
Would it be possible for you to show a super simple example with using FlowRouter and ReactLayout?
I’m a bit confused as to how I could “import” the “TodoApp” component in FlowRouter.route() definition to show the component
Your routing code will be inside react/index.js. You have access to FlowRouter / ReactLayout if they are installed in your meteor project.
Honestly the react-router works so well with Meteor I was never compelled to use anything else.
Ahh, ok, I’ll play with the routes in there, thanks.
As for react-router, I personally find it’s syntax unsightly partly because I despise XML and partly because I come from long history of using Python/Flask framework so the routes feel similar with FlowRouter.
Thanks nice.
Btw I tested on Mac is ok, but on Windows the .bat Files did not work (They seem only to make the first command the nothing more)