thcolin/react-sandbox

React Sandbox

Just a personnal sandbox to experiment react and it's environment (webpack, babel)

Tutorials

• Setup a React Environment Using webpack and Babel
• Setting up webpack, Babel and React from scratch
• Github repo with React, webpack and Babel
• CSS in JS projects list
• Webpack — The Confusing Parts
• Flux vs Redux
• You Might Not Need Redux
• Why We Should Stop Using Bower – And How to Do It

What and Why ?

• React : to write and include web component
• Webpack : to compile every components together
• Babel : to process ES6 to browser-compatible Javascript
• Aphrodite : simplify style writing, and needed if you want pseudo class & media-queries
  • I should not export aphrodite linked css, should be vanilla

Exceptions

• I manage images (src, background-image) normally, without using webpack libraries like file-loader or url-loader

Use

• npm start : this command will start webpack-dev-server

Structure

Just some thoughts, not fixed :

- components
-- App
--- App.tpl.js // Export only html (or JSX ?) template
--- App.styles.js // Export Aphrodite style (cf. https://github.com/Khan/aphrodite)
--- App.ctrl.js // Export logic (controller ?)
--- App.react.js // React component assembling everything together
--- App.wcomp.js? // Web component assembling everything together (cf. http://w3c.github.io/webcomponents/spec/custom)

Done

• Render the App inside #app
  • Don't render directly into the body
• Component style
  • Create a stylesheet with Aphrodite
• Global style
  • Create a stylesheet for App
    • Does the stylesheet support deep declarations (.input-group input for example) ?
    • No, and you should avoid thinking style this way, if it's truly necessary, make a basic css stylesheet and import it in App
• Implement bootstrap and font-awesome
  • With appropriates loaders (style-loader and css-loader for CSS, and url-loader for fonts)
• How to implement bower_components or simply front packages ?
  • There is no more distinction between front and back packages, so :
  • Con, it could be hard for some libs, and painful to maintain complex libs (which file should I include ?)
  • Just don't use Bower anymore, use npm instead and simply import dependencies into your js project

Continue

• Resolve src js files with babel-plugin-root-import Webpack resolve.modules
• Use normalize.css
• Export template to detached file
  • Is it a good practice or not ?
• Improve webpack configs (dev, prod)
• Client and Server side rendering
• Sort dev/non-dev npm dependencies
• Look for naming good practices
  • Airbnb React Styleguide
• Create smart components (with controller)
• Webpack Hot Module Replacement (HMR)
• Data flow & concepts (see Flux and Redux)
• Full compatibility with : web-component concept, Polymer Project and React (also Inferno and Preact)