JSX es una extensión de sintaxis para JavaScript que le permite escribir etiquetas similares a HTML dentro de un archivo JavaScript. Aunque existen otras formas de escribir componentes, la mayoría de los desarrolladores de React prefieren la concisión de JSX y la mayoría de las bases de código lo utilizan.
Fuente: React Basics
src/components/Plan.tsx
, con el contenido:export default function Plan() {
return (
<>
Plan Component
</>
)
}
src/components/Calculator.tsx
, con el contenido:export default function Calculator() {
return (
<>
Calculator Component
</>
)
}
src/components/Result.tsx
, con el contenido:export default function Result() {
return (
<>
Result Component
</>
)
}
npm install @mui/material @emotion/react @emotion/styled
App.tsx
, agregue la referencia al componente Grid 2.import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
...
import './App.css'
App.tsx
, agregue la referencia los componentes Calculator, Plan y Result....
import './App.css'
import Calculator from './components/Calculator';
import Plan from './components/Plan';
import Result from './components/Result';
App.tsx
, reemplace el contenido a renderizar por:...
function App() {
...
return (
<Grid container spacing={5}>
<Grid xs={12} sm={12} md={12} lg={12}>
<Calculator/>
</Grid>
<Grid xs={12} sm={6} md={6} lg={6}>
<Plan />
</Grid>
<Grid xs={12} sm={6} md={6} lg={6}>
<Result/>
</Grid>
</Grid>
)
}
export default App