Getting started
React is a JavaScript library for creating interactive user interfaces. React is declarative and is frequently combined using a custom syntax called JSX. The plugin supports both JSX components and regular JavaScript, although we recommend using JSX for it’s ease of use and common practice. Before getting started with React for Confluence plugin, a basic understanding of React and JSX is required.
Step 1: Login to Confluence Cloud
Login to Confluence Cloud.
Create a new Confluence page or open an existing Confluence page where you would like to embed a custom React dialog.
Go to the Edit page mode and click on the “+” icon and “view more”.
Search for the React for Confluence macro.
Select the React for Confluence macro - the macro dialog should appear.
Step 2: Embed React components in Confluence
Enter custom HTML, CSS and JSX code
Use the navigation panel to navigate between the HTML, CSS and JS (JSX) tab.
HTML - e.g. a root element which we will use to render the React code “<div id=“root”></div>”
CSS - (optional) you can leave this empty.
JS - e.g. render the title “Hello World!” to the HTML root component via ReactDOM “class HelloWorld extends React.Component { render() { return <h1>Hello World!</h1>; }} ReactDOM.render(<HelloWorld />, document.getElementById('root'));”
Insert the macro dialog
Insert the macro dialog when ready. The custom JSX and HTML code will be compiled and embedded into your Confluence page.