react_juce
subdirectory of the root of the React-JUCE project.react-juce
npm package carries a template generator that you can use to boostrap a React application for your project. For this step, let's assume your JUCE project directory is at ~/MyProject
, the source files are at ~/MyProject/Source
, and we want to put the React application source at ~/MyProject/Source/jsui
(note, you can put this wherever you want). Now, to use the template generator, we start again at the root of the React-JUCE git repository:jsui
directory as suggested in the example command above, fill it with a basic "Hello World!" app, and install local dependencies like React.js and Webpack. Like the [[GainPlugin Example|running-the-example]], we now need to build our output bundle.reactjuce::ReactApplicationRoot
. This class is mostly just a juce::Component
, and in that way you should think about using it the same way you might use a juce::Slider
in your application.MainComponent
or our AudioProcessorPluginEditor
at the top of our project:reactjuce::ReactApplicationRoot
is easy, and should be familiar if you've worked with juce::Component
s before:appRoot
will be the point at which our React application code from earlier will "take over," and it's also important to note that you can add this appRoot
wherever you need it in your application. For example, if you want to write your entire interface in React, you should mount your appRoot
at the top of your application in your MainComponent
or your AudioProcessorPluginEditor
. If instead you want only to write your preset switcher in React, you can build the rest of your interface as usual with JUCE, and add the appRoot
wherever the preset switcher should go within the context of your interface.appRoot
where to find the JavaScript bundle we made! So, putting the last piece together here: