Setting Up Views

Read about views and how they are useful in MightyMeld.

1. Choose a directory where new views will be created. MightyMeld will create it if it doesn’t exist.

   mightymeld.json

   {
     ...
     "view_dir": "src/views"
     ...
   }

2. Tell MightyMeld where to insert the View Box. The View Box is a React component that is automatically added to your app. Under normal conditions, this component will do nothing but render its children (so basically nothing). But when MightyMeld wants to display a view, the contents of the View Box will be replaced with the component you want to see.

   So: components above of the View Box will always be rendered. Components below the View Box will be replaced by a view when it is displayed. So you want to make sure any React context, themes, etc. are outside of the View Box, so they can be used by components inside the views.

   import App from './App';
   import { ThemeProvider } from './theme';
   
   ...
   
   { /* ThemeProvider is outside the View Box, so views can use it */ }
   <ThemeProvider>
     {/* @mightymeld-viewbox */}
     <App /> {/* App is inside the View Box, so it will be replaced by view content*/}
   </ThemeProvider>;