react_jucesubdirectory of the root of the React-JUCE project.
react-jucenpm 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:
jsuidirectory 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::Sliderin your application.
AudioProcessorPluginEditorat the top of our project:
reactjuce::ReactApplicationRootis easy, and should be familiar if you've worked with
appRootwill 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
appRootwherever you need it in your application. For example, if you want to write your entire interface in React, you should mount your
appRootat the top of your application in 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
appRootwherever the preset switcher should go within the context of your interface.