React Box Code 1
React
import React from 'react'; <!-- React 17 import method --> import ReactDOM from 'react-dom'; <!-- React 18 upgraded import method --> import ReactDOM from 'react-dom/client'; <!-- Function Component --> function Box() { return <div className="box">Box</div>; } <!-- React 17 render method --> ReactDOM.render(<Box />, document.getElementById('root')); <!-- React 18 upgraded render method --> const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Box />); <!-- Separate File Component --> const GetBox = () => { return <div className="box">Box</div>; } export default GetBox; <!-- OR in short --> export const GetBox = () => { return <div className="box">Box</div>; }
CSS
.box{ width: 200px; height: 200px; border: 5px solid #19a9a6; font-size: 15px; font-family: courier; font-weight: normal; letter-spacing: 1px; text-align: center; color: #d1d1d1; background: linear-gradient(#252526,#252526); }
Box
Follow Us