This is a post about my initial feelings after working on my own little project with ES6, React, and web pack. I’ve really only worked with Angular 1 & 2, some Knockout, and of course some regular old JQuery. I was a little nervous and very excited trying for the first time to actually build something with React (I've been watching these pluralsight courses to get me"thinking in React": )
I’ve browsed a few tutorials and watched [parts of] these pluralsight courses) in the past but never seriously started coding in React until I switched my WebStorm IDE to understand JSX. This post is basically a post-mortem of my weekend project experiment with React and the React-webpack generator.
I’ve browsed a few tutorials and watched [parts of] these pluralsight courses) in the past but never seriously started coding in React until I switched my WebStorm IDE to understand JSX. This post is basically a post-mortem of my weekend project experiment with React and the React-webpack generator.
The Github Project
You can find the github repo here: https://github.com/JimTheMan/Quinoa-Tribute-React-Webpack
And a live demo here: http://jimtheman.github.io/Quinoa-Tribute-React-Webpack/
And a live demo here: http://jimtheman.github.io/Quinoa-Tribute-React-Webpack/
Overall Thoughts
There are some things I like about the webpack-react generator and some things I think could be improved. Overall I think it’s a pretty nice generator specifically if you want to use EcmaScript 2015 syntax with Babel. It has all the standard command line tasks you’d expect (serve, test, build) although it is missing e2e testing. It does have a test watch command and thus support “dal shell development”. I really like how from the command line you can just say “create component”, and it will make a js file, css file, and test file for you. Very, very nice. However, these files all get put very far away from each other which I didn’t particularly like. Also, even though it’s meant to be a simple app I do wish they incorporated the React Router into the generated project. It just doesn’t feel like a SPA without routing. Overall, it’s a nice generator for getting up and running quickly with a simple React app.
Running the Generator
It's a super smooth run to scaffold out a project with this generator. There are no questions at all that it asks you so it keeps things very simple and doesn't bog you down with tons of decision making. However, it would be nice to utilize yeoman questions and ask things like "do you want react router?", or questions about redux, or even questions about other templating syntax like Jade (is that even a thing in JSX?).
Dual Shell Development
Don't let anyone tell you otherwise. I coined the term "dual shell development" (hehe), and all the projects I use going forward will be at least capable of doing DSD. I'm happy to say that with this project you can easily run "npm serve" and "npm run test:watch" in two separate command shells to have a really nice DSD workflow with pretty dang fast hot reloading. Nice! This is a big win for React-Webpack, and it does have really nice tasks. you can run.
Creating Component From the Command Line
This is something that I found to be super awesome. From the command line you can just enter this:
yo react-webpack:component my/namespaced/components/name
and it will create a component for you!
Because we're doing React, you might be curious about functional state components, and then you can create those too from the command line just by throwing in the --stateless flag!
This is a fantastic feature because it not only creates three files for you, but it also make all the boilerplate code for your component in your js file. The only gripe I have it that the generated js, scss, and test files are so far away from each other, and I wish there was a more component-oriented directory structure with all the files for a given component living together. Seriously, even when working on my super small project I found myself scrolling like a madman through the project explorer saying out loud, "god, this is an awful directory structure!".
Still, working with React made me realize that a lot of the tooling I love about Angular is really not Angular specific but can be applied to pretty much any front-end project!
JSX Doesn't Suck That Much
I think the biggest hurdle to jump over when deciding to get started with React is using JSX. JSX can be pretty scary at first because it is unlike anything you've seen before (and unlike anything your IDE has seen before most likely!). However, the truth is that once you set up your IDE to understand JSX it i pretty much exactly the same as writing HTML (except class becomes className). I'm not sure if I agree with React's argument about putting the html in your JavaScript being a good thing, but I no longer feel that JSX should stop you from picking up React. It's really not that different from the templates you're used to.
Deployment Issues
Ok, this is probably more of an issue that is occurring between the chair and keyboard, but when I initially pushed my dist folder to a gh-pages branch on Github it just pooped out and fell apart. This is pretty annoying because I was excited to push my new fangled React application live, and now I'm back to trouble-shooting problems. Oh well, such is the life of a programmer.
No Protractor / E2e
This is not just a problem with this specific generator, but it's somewhat of a deeper problem for React. They really don't push unit testing that much, and e2e testing they hardly talk about at all. Having automatic tests that poke your application's pages from a user point of view can be incredibly helpful and saves loads of debugging time so it's strange to me that often the React world chooses to ignore it. Interestingly, it is possible to set up Angular's Protractor to work in a React project.
RSS Feed