If you never install Create React App before, first install it globally.
npm install -g create-react-app
Then generate your React app by
create-react-app my-addin
If you never installed Office Toolbox before, first install it globally.
npm install -g office-toolbox
If you installed it before, go to your app folder.
cd my-addin
Generate the manifest file following the steps below.
office-toolbox
You should be able to see your manifest file with the name ends with manifest.xml.
Open it and replace all https://localhost:3000
to http://localhost:3000
in the generated manifest file.
Open public/index.html, add
<script src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.debug.js"></script>
before </head>
tag.
Open src/index.js, add Office.initialize
out of ReactDOM.render(<App />, document.getElementById('root'));
like below:
const Office = window.Office;
Office.initialize = () => {
ReactDOM.render(<App />, document.getElementById('root'));
};
Open src/App.js. Replace by
import React, { Component } from 'react';
// const Excel = window.Excel;
class App extends Component {
constructor(props) {
super(props);
this.onColorMe = this.onColorMe.bind(this);
}
onColorMe() {
window.Excel.run(async (context) => {
const range = context.workbook.getSelectedRange();
range.format.fill.color = 'green';
await context.sync();
});
}
render() {
return (
<button onClick={this.onColorMe}>Color Me</button>
);
}
}
export default App;
Run the dev server through the terminal.
npm start
or
yarn start
To run the add-in, you need side-load the add-in in the Excel.
Run this in terminal and following the steps below.
office-toolbox
It will open Excel. Click the 'Show Taskpane' button on the 'Home' tab to open your add-in.
Select the range and click Color Me button.
Congratulations you just finish your first React add-in for Excel!