Hot reload with React.js

announce
41

If you don’t like the XML routes, you don’t have to use them. You can use plain javascript object:

const routeConfig = [
  { path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              replaceState(null, '/messages/' + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]

React.render(<Router routes={routeConfig} />, document.body)
42

Windows scripts are untested because I only run on Linux. I’ll find a Windows computer and fix them soon.

43

In truth, this topic is more informative than the readme…
Thank you!

44

I am getting this error.

Module build failed: ReferenceError: /home/zafar/projects/meteor-webpack-react-kickstart/react/index.jsx: Symbol is not defined

zafar@home:~/projects/meteor-webpack-react-kickstart$ ./scripts/run-dev.sh
npm WARN package.json meteor-webpack-react-kickstart@0.1.0 No repository field.
npm WARN package.json meteor-webpack-react-kickstart@0.1.0 No license field.
[[[[[ ~/projects/meteor-webpack-react-kickstart/meteor ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/
I20150924-11:22:04.439(5)? webpack built 2b225a84569385567fcf in 1269ms
I20150924-11:22:04.439(5)? Hash: 2b225a84569385567fcf
I20150924-11:22:04.439(5)? Version: webpack 1.12.1
I20150924-11:22:04.439(5)? Time: 1269ms
I20150924-11:22:04.440(5)?  Asset     Size  Chunks       Chunk Names
I20150924-11:22:04.440(5)? app.js  29.7 kB       0       main
I20150924-11:22:04.440(5)? chunk    {0} app.js (main) 6.62 kB [rendered]
I20150924-11:22:04.440(5)?     [0] multi main 40 bytes {0} [built] [1 error]
I20150924-11:22:04.440(5)?     [1] /home/zafar/projects/meteor-webpack-react-kickstart/~/webpack-hot-middleware/client.js 2.6 kB {0} [built]
I20150924-11:22:04.440(5)?     [2] /home/zafar/projects/meteor-webpack-react-kickstart/~/webpack-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
I20150924-11:22:04.440(5)?     [3] /home/zafar/projects/meteor-webpack-react-kickstart/~/webpack-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
I20150924-11:22:04.441(5)?     [4] /home/zafar/projects/meteor-webpack-react-kickstart/~/webpack-hot-middleware/client-overlay.js 917 bytes {0} [built]
I20150924-11:22:04.441(5)?     [5] /home/zafar/projects/meteor-webpack-react-kickstart/~/webpack-hot-middleware/processUpdate.js 2.75 kB {0} [built]
I20150924-11:22:04.441(5)? 
I20150924-11:22:04.441(5)? ERROR in /home/zafar/projects/meteor-webpack-react-kickstart/react/index.jsx
I20150924-11:22:04.441(5)? Module build failed: ReferenceError: /home/zafar/projects/meteor-webpack-react-kickstart/react/index.jsx: Symbol is not defined
I20150924-11:22:04.441(5)?     at buildIsCreateClassCallExpression (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-plugin-react-transform/lib/index.js:65:43)
I20150924-11:22:04.441(5)?     at NodePath.enter (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-plugin-react-transform/lib/index.js:346:42)
I20150924-11:22:04.442(5)?     at NodePath.call (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/path/context.js:56:28)
I20150924-11:22:04.442(5)?     at NodePath.visit (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/path/context.js:90:8)
I20150924-11:22:04.442(5)?     at TraversalContext.visitSingle (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/context.js:132:12)
I20150924-11:22:04.442(5)?     at TraversalContext.visit (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/context.js:148:19)
I20150924-11:22:04.442(5)?     at Function.traverse.node (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/index.js:76:17)
I20150924-11:22:04.442(5)?     at Object.traverse [as default] (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/traversal/index.js:55:14)
I20150924-11:22:04.442(5)?     at PluginPass.transform (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/transformation/plugin-pass.js:51:27)
I20150924-11:22:04.442(5)?     at File.transform (/home/zafar/projects/meteor-webpack-react-kickstart/node_modules/babel-core/lib/transformation/file/index.js:621:12)
I20150924-11:22:04.443(5)?  @ multi main
W20150924-11:22:04.433(5)? (STDERR) Warning: you are using an outdated format of React Transform configuration. Please update your configuration to the new format. See the Releases page for migration instructions: https://github.com/gaearon/babel-plugin-react-transform/releases
45

The problem I found is that the “example” is so opinionated, that when I took three random React tutorials from Google to check them out, I failed to run any of them out of the box. In some cases I failed to run them at all.

For a person with no React knowledge, that’s sadly an overkill.

46

I think I broke the project. Add ecmascript package on the meteor project and it should be fixed.

47

Can you be more specific on how this is overkill?

This project doesn’t intend to teach you React. You should definitivly learn it first. This is an attempt to develop good practices because React is pretty new in the Meteor’s world.

48

I agree that your package shouldn’t teach React. But if it’s an attempt to develop good practices for Meteor community using React, it’s kinda natural that I’d like to learn React based on these good practices.

That said, it would be nice if when I copypaste the snippets of code from react+webpack tutorials, they work out of the box or at least work after some basic changes depending on webpack config from the tutorial. For example this tutorial, which is recommended by Webpack’s docs. But somehow they all tend to be build in a different way than what’s inside of view folder of your package.

If used alone, the tutorials work. I can play with webpack’s config etc. I did a few of such tutorials and I can make a small, simple app using that knowledge. But I can’t find the easy way to implement the knowledge I get from them in your package. In particular, I still don’t know what to do with your index.jsx file, because none of such tutorials teach me that, they all start with a different approach.

I still want to give another shot with React, and if possible, using your stack. Can you please recommend me a tutorial that will work with your package? Or should I wait for the one you mentioned, that will explain how to use it properly?

And yes, it may be the fault of me being too stupid for React in overall, as I’ve never been a professional and I don’t have such ambitions. If that’s the case, I’ll simply stay with Blaze and I’ll take no offence, as it wouldn’t be first technology I find too difficult. There would be no point forcing myself to use something, if I find it too much of a problem to use what I learn from tutorials in a bootstrap package like yours, which I admit, doesn’t look complicated and is surely build on some great ideas - I can feel that.

Please don’t take this post as any kind of attack, I’m in fact very happy that you made this bootstrap package, you’ve got a beer for that here in Kraków.

1 Like
49

Thank you @brajt for bringnig your concerns because it is exactly what I am looking for with this thread. I’ve been using react/webpack full-time for about 6 months now and I often fall for the trap of assuming people know while it is new for most people.

For the webpack config, I wouldn’t try to copy/paste from another tutorial. The config you have in the kickstarter is specific to how it should be setup for Meteor (still working on improving it a lot btw). I think most project doesn’t need to tweak too much this file if not at all.

The goal of the kickstarter was to make something really simple you can start with. Then, all you need to remove the TodoApp and add your own code. However, their no tutorial that will guide you exactly on how you should use React with Meteor the way this project is setup. If you have a basic understanding of both, you should not have too much trouble using it though.

I am working on a serie of tutorials to teach Meteor people how to use React and React people how to use Meteor and I think it will be very helpful to have something more step-by-step. Hopefully it will be ready soon :smile:.

I honestly don’t care about React that much. All I care is how productive I can be to build stuff for my users and Meteor with React is by far the best stack I ever used.

I think you should learn React first and then try to read the TodoApp on the kickstarter. Then, everything will make sense. I wouldn’t focus too much on webpack.

Here is the best serie of videos I think everybody should watch when starting with React:

It is not that hard to learn once you understand the few basic elements. Hopefully it will help you.

BTW I think your tutorial is using the old react-router 0.13. My kickstarter is using 1.0.

1 Like
50

Wait wait wait, what Todo App? Let me check it… there actually is a Todo App! It wasn’t there yet when I was checking your package out. :slight_smile:

I believe this Todo App solves part of the problem for me. How big part it is, I’ll know once I play with it in my free time.

51

I hope too! (((-:
Great news (-:

52

@sikanx @imkost @mats

The kickstarter project has been updated to support require on CSS/SCSS and images in React components. You might want to check the readme again :smile:

Your CSS and all his assets will be automatically bundled by doing this (so you don’t need to copy it manually):

class MyComponent extends React.Component {
  componentWillMount() {
    require('react-select/dist/default.css');
  }

  render() {
    // ...
  }
}

When your component is mounted for the first time, the CSS will be injected in the page automaticlly.

And the most crazy part is it will not break when doing server-rendering (at least with react-router ;)) because it collects the CSS while doing server-rendering and send it back until your React app start.

1 Like
53

@benoitt I get script error when running run-dev.sh: “Line 4: No such directory”

54

Are you running from scripts directory or project directory. It’s woeking fine when i run from project directory ./scripts/run-dev.sh

55

What’s your OS version?

56

I use Mac OS X 10.9.5.
(Mostly use windows)

57

I made again a new clone of your repo. Now it works…Thanks

58

FYI Windows scripts are now there and working :smiley:

59

What’s the difference now of using a assets folder and also having two settings for server and client ?

60

It allows you to require assets inside your React components like this:

class MyComponent extend React.Component {
  componentWillMount() {
    require('./TodoApp.css');
  }

  render() {
    return (
      <div className="test">
        <img src={require('./image.png')} alt="" />
      </div>
    );
  }
}

Webpack will bundle the assets it needs and they will be copied to the public/assets folder.

The reason why the server is different than the client is because the server has to collect the CSS for server-rendering. On the client, they are added on the browser when the component is mounted.

Basiclly, it allows you to have a better workflow :smile: