Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle.
I have a div element named "app-content" that I want to position in the center of my document, similar to the image shown here: https://i.sstatic.net/D2WP4.png
However, despite my efforts, I am unable to achieve the desired layout on my JSFiddle project. Instead, I keep getting the following result: https://jsfiddle.net/w7sf1er6/8/
The JavaScript code I have written is as follows:
export default class App extends React.Component {
render() {
return (
<div className="app-content">
</div>
);
}
};
ReactDOM.render (
<App />,
document.getElementById('root')
);
As for the CSS styling:
html {
background-color: #e3e3e3;
font-family: regular, arial, sans-serif; }
body {
margin: 0 !important;
padding: 0 !important; }
a {
text-decoration: none; }
.app-content {
width: 1200px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: white; }
I seem to be missing something crucial in order to make this setup work on JSFiddle so that I can easily share it with other developers. Any assistance or insights from our community would be greatly appreciated.
Thank you.