ReactJS

Colocar estilos CSS

Crear un proyecto que se llame 04_estilos_perfil

Se deja solo el archivo main.jsx y se queda con el siguiente contenido:

import React from 'react'

import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

Se agregan los siguientes elementos:

Se agregan las imágenes a la carpeta img

Página 1 de 7
ReactJS
En el archivo css/estilos.css se escribe lo siguiente:

body {
font-family: "Roboto", sans-serif;
color: #014072;
font-size: 1em;
}

h1 {
text-align: left;
}

.guitar-image {
width: 20%;
float: right;
margin: auto 0 auto 30px;
}

.programming-image {
width: 20%;
float: left;
margin-right: 30px;
}

.skill-row {
width: 50%;
margin: 150px auto 100px auto;
text-align: left;
}

Agregando componentes

Components/DatosPerfil.jsx

import React from 'react'

const DatosPerfil = () => {

return (
<>
<h1>Angela Yu</h1>
<p>
<em>
Founder and CTO of{' '}
<strong>
<a href="https://www.appbrewery.co/">The App Brewery</a>
</strong>
</em>
</p>
<p>I am an IOS and Web Developer. I ❤ coffee and brew my own beers.</p>
</>
)
}

export default DatosPerfil

Página 2 de 7
ReactJS
Components/TablaPerfil.jsx

import React from 'react'

import DatosPerfil from './DatosPerfil'

const TablaPerfil = () => {

return (
<div>
<table cellSpacing="20">
<tbody>
<tr>
<td>
<img src="img/angela.jpg" alt="angela profile picture"
width="200px" height="110px" />
</td>
<td>
<DatosPerfil/>
</td>
</tr>
</tbody>

</table>
</div>
)
}

export default TablaPerfil

Se agrega el archivo App.jsx

Se agrega el componente en el archivo App.jsx

import TablaPerfil from "./Components/TablaPerfil.jsx";

const App = () => {

return (
<>
<TablaPerfil/>
<hr/>
</>
)
}

export default App

Se agrega la siguiente línea en main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './css/estilos.css'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
Página 3 de 7
ReactJS

Visualizar la página

Components/ListadoCursos.jsx

import React from 'react'

const ListadoCursos = () => {

return (
<>
<h3>Books and teaching</h3>
<ul>
<li>The Complete IOS App Development Bootcamp</li>
<li>The Complete Web Development Bootcamp</li>
</ul>
</>
)
}

export default ListadoCursos

Components/ExperienciaTrabajo.jsx

import React from 'react'

const ExperienciaTrabajo = () => {

return (
<>
<h3>Work Experience</h3>
<table border="1">
<thead>
<tr>
<th>Dates</th>
<th>Work</th>
</tr>
</thead>

Página 4 de 7
ReactJS

<tbody>
<tr>
<td>2010-2013</td>
<td>Lead Developer at Tempo App</td>
</tr>
<tr>
<td>2010</td>
<td>Researcher at The Institute of Cognitive Neurosciences</td>
</tr>
</tbody>
</table>
</>
)
}

export default ExperienciaTrabajo

Actualizar App.jsx

import TablaPerfil from "./Components/TablaPerfil.jsx";

import ListadoCursos from "./Components/ListadoCursos.jsx";
import ExperienciaTrabajo from "./Components/ExperienciaTrabajo.jsx";

const App = () => {

return (
<>
<TablaPerfil/>
<hr/>
<ListadoCursos/>
<ExperienciaTrabajo/>
<hr/>
</>
)
}

export default App

Página 5 de 7
ReactJS

Components/Habilidades.jsx

import React from 'react'

const Habilidades = () => {

return (
<>
<h2>My Skills</h2>
<div className="skill-row">
<img className="programming-image" src="img/programming.png"
alt="code-image"/>
<h3>Developer</h3>
<p>I have experience with C/C++, Python 3, Arduino, HTML, CSS, Javascript,
Node.js and MongoDB.</p>
</div>
<div className="skill-row">
<img className="guitar-image" src="img/guitar-instrument.png"
alt="guitar-image"/>
<h3>Musician</h3>
<p>My main instruments is Eletric Guitar and Acoustic Guitar</p>
</div>
</>
)
}

export default Habilidades

Actualizar App.jsx

import TablaPerfil from "./Components/TablaPerfil.jsx";

import ListadoCursos from "./Components/ListadoCursos.jsx";
import ExperienciaTrabajo from "./Components/ExperienciaTrabajo.jsx";
import Habilidades from "./Components/Habilidades.jsx";

const App = () => {

return (
<>
<TablaPerfil/>
<hr/>
<ListadoCursos/>
<ExperienciaTrabajo/>
<hr/>
<Habilidades/>
</>
)
}

export default App

Página 6 de 7
ReactJS

Página 7 de 7