Componentes en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Son partes de la interfaz visual.

Su nombre debe, obligatoriamente, comenzar por mayúscula. Si no comienza por mayúscula, tendremos un error que es difícil de interpretar.

Cada vez que el componente se renderiza, sus funciones se vuelven a crear, por lo que cuantas más funciones podamos definr fuera del mismo, mejor

Un componente debe devolver código JSX o null.

const MyComponent = () => <div>hola</div>;

export default MyComponent;

Creación de un componente en un fichero externo

src/App.js
import Saludador from './components/Saludador'

const App = () => <Saludador/>
export default App;

Habitualmente escribiremos los nombres de los componentes en mayúsculas.

src/components/Saludador.js
const Saludador = () => <div>hola</hola>
export default Saludador;

Ejercicios Componentes

Crea 3 componentes dentro de la carpeta ./src/components llamados A, B y C. Cada componente tendrá el texto A, B y C respectivamente en su interior. Incrústalos dentro del componente App para visualizarlo en pantalla.