Where do we place assets (like pictures) and how do we load them on a React + Flux web app component?

Question

I'm creating a React + Flux web app with a file structure that looks like this:

MyApp
|---
|---scripts
    |---app.jsx
    |---actions
    |---components
        |---HomePage.react.jsx
        |---NotFoundPage.react.jsx  
        |--- ...etc
    |---dispatcher
    |---stores

1) Where do I place public assets like pictures, videos, text files or whatever..

2) Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.

Answer 1

I usually use a dist or public folder where all asset are kept. When I release the app, the bundles are saved in the dist folder.

For example:

MyApp
|-- app
|    |---app.jsx
|    |---actions
|    |---components
|        |---HomePage.react.jsx
|        |---NotFoundPage.react.jsx  
|        |--- ...etc
|    |---dispatcher
|    |---stores
|-- public
     | -- js -- bunlde.js
     | -- img -- images
     | -- css -- app.css

Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.

You can just include them in the index.html. However, recently I've been bundling the css into the javascript file so that I have one single file. You can do that with:

• webpack: https://github.com/webpack/css-loader
• browserify: https://github.com/cheton/browserify-css