Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js "></script>
<script src="https://fb.me/react-dom-0.14.3.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props)
this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
this.componentDidMount = this.componentDidMount.bind(this);
}
componentDidMount() {
const handler = e => this.setState({matches: e.matches});
window.matchMedia("(min-width: 768px)").addListener(handler);
}
render() {
return (
<div>
{this.state.matches && (<h1>Big Screen</h1>)}
{!this.state.matches && (<h3>Small Screen</h3>)}
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('my-div')
);
</script>
<div id="my-div"></div>
</body>
</html>
// at first you install npm install react-responsive --save
import React from 'react';
import MediaQuery from 'react-responsive';
class App extends React.Component {
render() {
return (
<div>
<MediaQuery query='(min-device-width: 1224px)'>
<div>desktop or laptop</div>
</MediaQuery>
<MediaQuery query='(max-device-width: 1224px)'>
<div>tablet or mobile phone</div>
</MediaQuery>
</div>
);
}
}
export default App;
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421