Small react project to remind myself how to hook up various things.
-
less
-
jsx
-
fonts
-
templated html source
-
webpack
-
jasmine
-
rewire
-
key thing is using it from an npm package and getting the fonts processed into the bundle
I cobbled this together as a starting point for a new side project for learning React. The main short term goal is just to have all the development pieces in place to go forward with some coding. The surfing safari that got me to this point had lots of interesting stops, among them:
Mars Hall’s blog. From here the main thing is the use of a webpack plugin and a mocking strategy that’s almost as simple as using Jest.
Oleaksandr Rudenko’s blog and of course the karma-webpack repository were both helpful for organizing the test execution setup.
The two simple test files are basically the same tests, one mocks a child component, the other doesn’t. I made them to try and understand what the whole rewire approach was really doing, and to get a start on learning how to test React components.
The rewire approach originally outlined by Mars,
rewireModule(Component_1, {
Component_2: React.createFactory('div')
});
results in the React warning when run in current versions of react (>=0.12.2)
WARN: 'Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform.'
Mars suggests this workaround
rewireModule(Component_1, {
Component_2: React.createClass({ render: function() { return (<div />); }})
});
This works, though the extra verbosity is regrettable.
There are things I’ll likely add to this over time. Like expanding it to show how to test React apps when using react-router and reflux.
Semantic-ui is very interesting. It would be nice to have a demo of incorporating customizations, like themes, in the build.
Pull requests that keep things simple but demonstrate good ways to use these tools together are welcome.