Copy the Master screen

Your HTML admin template should have a blank.html or named similary, HTML page that is just blank and has the side menu. Open that html file, and copy all the content from inside the body tag.

Then head over to HTMLtoJSX to convert the plain HTML to format suitable for react. Uncheck Create class. Paste your copied HTML inside Live HTML Editor tab.

Copy the generated ouput.

In src\ui\tempate\Master.js look for the render function. Replace the returned <div >...</div> with the ouput you got from HTMLtoJSX

Add the childrens to the view

The html that you copied over, it should have the content are somewhere. There add this


Remove the demo menus and add system

Find the <ul>...</ul> list that containst the menu. remove her content and add


Remove unnececery HTML admin demo elements

Lot of admin templates will come with extra things that you will not need like search box, notification pop up etc.. Remove them from the master screen.

The master screen has access to few user related props. Put them in your new master screen. Use them like this ex. {this.props.userPhoto} {this.props.user.DisplayName}

On the logout button, add onClick to call the logout function ex.

<a onClick={this.props.logout}>Logour</a>

Available props

  • {String} userPhoto - the user image
  • {Object} user - the current logged in user in firebase - Firebase User
  • {Function} logout - the logout function, no paramas
  • {Function} printMenuItem - function for priting the menu. Param 1 menu items

Remove any content that appear in the content area

Remove any additional data such as breadcrumbs or titles in the template, since in our case they are comming from the childer element that we had incuded.