如何构造/访问非node.js应用程序的react组件？

Question

I have a production application whose folder structure is much like you would expect:

/project
   /css
   /js
   /php
   /fonts
   /images
   /index.php

I have recently begun learning to use react.js and I would like to start developing new features using react while leaving all existing functionality as is and I understand that react.js can certainly be used this way.

What isn't entirely clear, is how to structure the files in my non node.js project and access them.

For example, I tried searching for this and found this article which proposes the following structure

and states:

Here index.jsx works as the entry point of the application. It uses ReactDOM.render to render App and gets the party started. App in turn does something interesting with Note. If I wanted yet another component, you would simply add it below /components.

Presumably this is a node.js project where index.jsx can call something like require('components/App.jsx'); , but how do I achieve the same in my non node.js project.

Consider if I set the following folder structure:

/project
   /css
   /js
   /php
   /fonts
   /images
   /react
      /components
         /App.jsx   
         /Note.jsx 
      /scripts
         /featureFoo.jsx
   /index.php

Given the above, I'd like to have index.php load react/scripts/featureFoo.jsx which would somehow include/use react/components/App.jsx and react/components/Note.jsx

I figure I could have script tags in index.php to load all of the components then featureFoo.jsx but I feel like there is a more react way to do this.

So

How can I structure/access the react components of my non node.js application?

Im tagging node.js as I feel those users may well bring insight regarding this possibly from having to deal with multiple projects/aproaches.

Answer 1

In order to import/require other modules in a non-node.js (ie browser-based) JS application, you'll need to use a bundler such as webpack or browserify .

They work by starting at your "entry" file (index.jsx in your case) and recursively following all of your imports/requires. Then it smartly bundles everything up into a single "output" file, which includes everything your application uses, that you can link in your HTML.

You can also use more complex configurations with multiple entry and output files, or even dynamic loading of "chunks" at certain points in your application. But the above is the most basic use case, and works well for most simpler projects.

These bundlers have some other cool features as well. For instance, with webpack (with additional plugins and loaders) you can:

1. Write ES6/ES7 JavaScript that gets compiled (via babel ) into cross-browser compatible ES5
2. minify/uglify your output JS
3. import/require non-js files such as CSS, images, and webfonts, and choose how to process these imports (eg pre/post-process your CSS, or optimize your images)
4. Extract all imported CSS into a single .css file
5. Use webpack-dev-server (or webpack-dev-middleware) to take advantage of hot module replacement, which makes developing JS apps easier by letting you see your changes take effect instantly in the browser without having to refresh or lose your app's state.

And a lot more. The world of bundlers is a pretty big ecosystem with a lot to learn, but it's totally worth getting into.

A good place to get started is the excellent Survive JS series of tutorials.

However, if you're still learning React, then diving into webpack and the entire ecosystem of JavaScript tooling can be overwhelming. It will probably be easier and a more efficient use of your time to keep things simple at first, and then only get into bundlers etc. after you get comfortable with React.