Skip to content

Instantly share code, notes, and snippets.

@stevenocchipinti

stevenocchipinti/NOTES.md

Last active July 28, 2017 20:56
Show Gist options
  • Save stevenocchipinti/be373b346a77c9b6e1d4 to your computer and use it in GitHub Desktop.
Save stevenocchipinti/be373b346a77c9b6e1d4 to your computer and use it in GitHub Desktop.
Download ZIP
Notes and observations while trying to learn ReactJS
Raw
NOTES.md

ReactJS Notes

  • React is cool :)

    • props are passed and do not change
    • state is initally configured but can change
    • JSX is optional but needs to be compiled - its very helpful!
    • JSX and ES6 can be used freely with babel via webpack/browserify/etc.
    • Lots of resources available online

  • Flux

    • Is necessary in larger applications to avoid chains of callbacks. For example, getting a message up a few levels of components
    • Facebooks implementation of Flux is NOT so cool
      • Defining a constants file and a huge switch statement scares me
    • There are many alternatives to Facebooks implementation
      • Reflux looks better and has a much more understandable structure
      • ReFlux example
      • Great explanation of the above code
      • Flummox claims to be minimal and isomorphic
      • Fluxible (by Yahoo) and Fluxxor are also fairly popular
    • React contexts may be another solution instead of Flux

  • Routing

    • There are two main competitors: react-router and react-router-component
    • react-router seems to be the most popular
    • TODO learn react-router

  • Isomorphic / Server side rendering

    • Rending of the components can happen on a server-side JS runtime (node, etc)
    • React.render(comp, elm) renders to a DOM element
    • React.renderToString(comp) renders as a string that could happen server side
    • React.renderToStaticMarkup(comp) renders as a string without any React stuff
    • TODO learn this!

  • Module bundling

    • There are two main competitors: webpack and browserify
    • Used to compile JSX, ES6, SCSS, etc.
    • Webpack
      • Newer than Browserify
      • Takes a somewhat complex config file
      • Functionality is added via -loader packages (eg babel-loader)
      • Can do everything! Hot-loading parts of the page!
      • See webpack-dev-server, webpack-hot-loader, babel-loader
      • Good demonstration of its power
    • Browserify
      • Older than webpack
      • Easy to get started with the basics via command line arguments
      • Functionality is added via -ify packages (eg babelify)
      • Does the basics, doesn't do multiple bundles, etc.
      • See beefy, babelify

  • Boilerplates

    • There are a lot of boilerplate projects out there
    • Here is a small list
    • Lots of Yeoman generators: react-webpack-generator, etc.
    • Seems hard to get a good compbination with so much to choose from
      • Webpack or Browserify
        • So many Webpack configurations: fingerprinting, hot-loading, etc.
      • NPM scripts, Gulp, Grunt
      • Plain React, Flux, Reflux, Fluxible, Fluxxor
      • react-router

  • Getting started with Webpack can be difficult

    • Shouldn't need Grunt or Gulp, npm scripts calling Webpack should be all
      • Although Gulp would be preferable for future tasks, like deployments, etc.
    • Goal is to have two webpack config files: dev and prod
      • Dev should have hot-loading (in one process) dev server, compile scss etc.
      • Prod should have real css files, fingerprinted filenames, etc. in /dist
    • Had some difficulty with hot-loading, some questions
      • Why do I need webpack-hot-loader if webpack has --hot?
      • Why does the official example need to run two different processes?
      • When using Webpack for CSS, does it default to JS implementations?
      • Examples show index.html in the root, but building never copies to the build directory. react-dev-server will hot-load from a build directory if it is self contained with an index file, but none of the examples have this. One example even kept their src index file in the build directory which seems wrong
    • Hotloading is fairly involved, react-hot-boilerplate just works
    • Really good tutorial!
      • This does most of what I want and has really good instructions
    • Another tutorial that looks pretty good
    • yo react-webpack seems pretty good, asks if you want flux or reflux
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment