Continuing the discussion from Status thread (sqrt(-1) characters or more or less, post cannot be empty):
@cartman82 said:
STATUS:
Hello World with react, babel and webpack, served with auto-reloader dev server. Around 1MB of javascript :-)
So I've been working on this whole day.
It's going great!
I figured out how to add SASS and LESS into my WebPack config. Turns out you don't get separate files, like bundle.css
or something, but use your javascript code to inject styles directly into the document. So cool!
Of course that makes things harder to debug, so I had to figure out how to get WebPack to generate source maps. It's pretty easy actually. There's a cute little DSL you can use inside strings in your webpack.config.js
. Stuff like ['style', 'css?sourceMap!', 'less?sourceMap']
. Neat-o! Intuitive too!
Then I worked on the basic styling. I started with a starter template based on the Twitter Bootstrap
SASS theme. That turned out to be too rails oriented. All examples and documentation presumes you're using various bloated gems and frameworks. So I pivoted and went with good old LESS instead. I found a nice color theme and figured out how to get them to override bootstrap's default variables.
Pretty soon I had myself a nice styled page!
Oh no, except fonts didn't work. Nothing I did seemed to be able to fix the issue. I tried overriding my path
, staticPath
and icon-font-path
a hundred different ways. I googled and googled and googled. In the end, the solution turned out to be dead simple:
loaders: [
{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
DOH! Why didn't I think of that!?
Anyway, with my glyphicons now working, I was finally able to start coding with react.
First things first: redux
is all the rage now, so I have to have that. Next, since redux is an abstract library, I needed redux-react
bindings, plus the famous redux-devtools
package to integrate with webpack-dev-server
I set up earlier.
According to documentation, the idea is to create a tree of reducers, that generate a singleton store, that feeds smart components, which update my tree of dumb components, which trigger action creators which go trough store and back into reducers.
No problemo. I'll just go through some kind of "best practices" example app, and see how to set all this up like a pro. And wow, where there example apps galore. Each one with its own unique assortment of modules and the way of organizing things. Such great diversity of approaches and ideas brought tears of joy into my eyes.
And gave me great options too! For example, if I started coding using redux-router
, which I saw in one example, and found it completely undocumented and inscrutable, I could simply replace it with similar but slightly different module called react-router
and carry on! Freedom, yeah! Stick it to the man!
With my routing and reducers and smart components figured out, I finally got everything to work together and run with only one deprecation error that I can't get rid off.
Oh yeah, all my hard work has finally paid off.
Here is my app, in all its glory!
Wait a sec.
It's still JUST A FUCKING HELLO WORLD APP!