To easily create a new React app from scratch, we will use create-react-app.
Let's create react-muut app.
npx create-react-app react-muut
cd react-muut
npm start
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
For more detailed step by step instruction, please follow this guide.
Muut requires jQuery to run, so let's add it in our public/index.html
file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>React App</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
Replace the content of App.js
with the following:
import React, { Component } from 'react'
import './App.css'
const forumName = 'goma'
class App extends Component {
loadMuutForum = () => {
window.$('#my-community').muut()
}
componentDidMount() {
if (!window.muut) {
const muutScript = document.createElement('script')
muutScript.async = true
muutScript.defer = true
muutScript.src = '//cdn.muut.com/1/moot.min.js'
muutScript.onload = this.loadMuutForum
document.body.appendChild(muutScript)
} else {
this.loadMuutForum()
}
}
render() {
return (
<div>
<a id="my-community" href={`https://muut.com/i/${forumName}`}>
Community
</a>
<!--optional messaging code -->
<span className="muut-messaging">Messages</span>
</div>
)
}
}
export default App
If you're planning on using Federated ID you can use this as your starting point:
import React, { Component } from 'react'
import './App.css'
const forumName = 'YOUR_COMMUNITY'
const opts = {
sso: true,
api: {
key: 'YOUR_API_KEY',
// generate the following on the server side
message: 'MESSAGE',
signature: 'SIGNATURE',
timestamp: TIMESTAMP,
},
}
class App extends Component {
loadMuutForum = () => {
window.$('#my-community').muut(opts)
}
componentDidMount() {
if (!window.muut) {
const muutScript = document.createElement('script')
muutScript.async = true
muutScript.defer = true
muutScript.src = '//cdn.muut.com/1/moot.min.js'
muutScript.onload = this.loadMuutForum
document.body.appendChild(muutScript)
} else {
this.loadMuutForum()
}
}
render() {
return (
<a id="my-community" href={`https://muut.com/i/${forumName}`}>
Community
</a>
)
}
}
export default App
Replace the content of App.css
with the following:
body {
font: normal 18px "proxima nova";
color: #333;
margin: 0;
}
main {
max-width: 600px;
margin: 40px auto;
padding: 0 .9em;
}
h1 {
font-weight: 300;
}
img {
max-width: 100%;
}
a { color: #1fadc5 }
header {
background-color: #555;
padding: 1em 2em;
}
header a {
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #fff;
font-size: 90%;
margin-right: .9em;
}
.muut-messaging {
display: none;
}
.active { opacity: .4; }