Fundamental Concepts: Components, Props, and State


  In React, components are the fundamental building blocks for user interfaces. Props allow information to be passed to components, while Stateis used to manage a component's internal dynamic data.


Key Concepts:

  • Components: Functions or classes that return React elements.
  • Props: Allow sending data to a component.
  • State: Internal data managed by the component.

Purpose:


  Understanding components, props, and state is essential for building dynamic, reusable, and maintainable React applications. These concepts form the basis for structuring interactive user interfaces.



Exercises


Interactive Test 1: Drag and Drop.

Arrastra en el orden correspondiente.


Arrastra las opciones:

import React, { useState } from 'react';
const [count, setCount] = useState(0);
<div><h1>Count: {count}</h1></div>
<button onClick={() => setCount(count + 1)}>Increment</button>

Completa el código:

______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.


import React, { useState } from 'react';

function Counter() {
  

  return (
    
    
  );
}

export default Counter;

Practical Exercise:

Enunciado:

Componentes Funcionales

Los componentes funcionales son más simples y no tienen un constructor ni métodos de ciclo de vida. En lugar de eso, utilizan hooks como useState para gestionar el estado.

  • useState: Es un hook que permite agregar el estado en un componente funcional.
  • JSX: JSX permite escribir HTML directamente en el código JavaScript, haciendo que el código sea más legible.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

const { useState } = React; function Counter() { const [count, setCount] = useState(0); return ( <div> <h1>Contador: {count}</h1> <button onClick={() => setCount(count + 1)}>Incrementar</button> </div> ); } ReactDOM.render( <Counter />, document.getElementById('root') );

What allows managing internal data in a React component?



What is the difference between props and state in React? What are props in React? What are components in React? What is the state of a component in React? What is a React component? Developing components with React Free React components Best React components React component library What are props in React? Passing props to a React component States in React