JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Babel + JSX
class App extends React.Component {
constructor() {
super();
this.state = { hasVisitedBefore: true };
}
componentDidMount() {
// Get item from localStorage and save it to a constant.
const hasVisitedBefore = localStorage.getItem('hasVisitedBefore');
// Check if the user has visited the site (component) before.
if (!hasVisitedBefore) {
// If not, set the component state (or dispatch an action if you need)
// Also set the localStorage so it's globally accessible.
this.setState({ hasVisitedBefore: false });
localStorage.setItem('hasVisitedBefore', true);
}
}
render() {
return (
<div>
{this.state.hasVisitedBefore
? 'Welcome back!'
: 'Welcome for the first time!'}
<button onClick={() => location.reload()}>Reload page</button>
<button onClick={this.handleReset}>Reset</button>
</div>
);
}
handleReset() {
localStorage.clear();
location.reload();
}
}
ReactDOM.render(<App />, document.getElementById('root'));