Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

My Little React-Webpack Project Postmortem

6/13/2016

0 Comments

 
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. 

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/

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. 
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023