React es una librería JavaScript ideal para crear interfaces de usuario en el desarrollo de SPA o single page application. Por ello, muchas de las acciones que aprendamos a ejecutar en esta librería tendrán que ver con las opciones que tiene el usuario. En este post, te enseñaremos a programar un nuevo post en React, una acción muy común para los usuarios de redes sociales.
¿Qué es un nuevo post en React?
Un nuevo post en React es una página que podemos crear en esta librería para que el usuario publique contenido dentro de nuestra aplicación, sea una foto, un tweet o un vídeo. Ya que el usuario tendrá la posibilidad de insertar un dato en nuestra aplicación, lo haremos a través de un formulario.
Para conocer más sobre este tipo de elemento, te invitamos a leer nuestros posts sobre formularios en React y formularios como componentes controlados en React.
¿Cómo programar un nuevo post en React?
Para programar un nuevo post en React a través de un formulario, tendremos que usar diversos input. En nuestro caso, estamos creando un nuevo post en un proyecto que simula Twitter. Entonces, el contenido que haga el usuario estará en formato de texto. Por ello, el input ideal será un textarea. Puedes conocer más sobre este input en nuestro post sobre input de tipo radio y textarea en React.
Ya que necesitaremos un input textarea con una maquetación, podemos preparar un componente que contenga el input dentro de un div. Esto nos permitirá tener un espacio que podemos estilizar más allá del input.
const Textarea = ({ className, …props})
<div className= [classNames (‘textarea’, className)}>
<textarea {…props} className= “textarea-input” />
</div>
);
export default TextArea
Este componente tiene una serie de estilos que podemos crear con un archivo CSS y los nombres de clase otorgados. Te invitamos a conocer más sobre este proceso en nuestro post sobre cargar CSS desde un componente React.
Ahora que tenemos el TextArea, podemos crear un componente para programar un nuevo post en React. Nosotros llamaremos a este componente NewTweetPage. Este componente estará dividido en varios div para seccionar sus distintos elementos, donde queremos un título, una imagen de perfil, un espacio para insertar el tweet y un botón que ejecute el submit de este el post.
const NewTweetPage = ( ) => {
return (
<Page title= “What are you thinking…”>
<div className= “newTweetPage bordered”>
<div className=”left”>
</Photo/>
</div>
<div className = “right”>
<form>
<Textarea
className = “newTweetPage-textarea”
placeholder = “Hey! What’s up!”
></TextArea>
<div className= “newTweetPage-footer”>
<span className = “newTweetPage-characters”></span>
<Button
type=“submit”
className= “newTweetPage-submit”
variant=”primary”
>
Let’s go!
</Button>
</div>
</form>
</div>
</div>
Page>
Como puedes ver en las líneas de código anteriores, en este componente tenemos un div que encapsula todo. Luego, tenemos dos div, uno para la sección de la izquierda, en donde se encuentra el componente Photo. Y otro en la derecha, donde encontramos nuestro TextArea (con las propiedades de nombre de clase y texto de respaldo) y nuestro botón. Esta sección de la derecha es un formulario (form).
¿Cómo funciona un nuevo post en React?
Una vez hemos logrado programar un nuevo post en React, debemos hacerlo funcional. Es decir, debemos hacer que el texto que inserte el usuario llegue a ser realmente un nuevo post.
Para ello, lo primero que debemos hacer es recoger los valores que se pongan en el input. Esto se hace con un estado que almacena los valores. El proceso de recoger datos de un input ha sido explicado en nuestros posts sobre controlar input en React y evento onChange en React.
Después de tener los datos del usuario almacenados dentro de un estado, deberemos enviarlos a nuestra API. Esto lo puedes aprender en nuestro post sobre enviar datos a una API desde React. Recuerda que para ello deberás crear una función de servicio que reciba los datos del tweet y lo envíe a la URL de la API. Algo como lo siguiente:
export const createTweet = tweet => {
const url = tweetBaseUrl
return client.post (url, tweet);
);
¿Cuál es el siguiente paso?
Ahora que sabes exactamente cómo programar un nuevo post en React, ¡te invitamos a intentarlo en tus propios proyectos! Para conocer más sobre el desarrollo de todo tipo de proyectos, no solo con React, sino también con lenguajes de programación como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Este es un paso muy importante en tu formación, pues con él te convertirás en un experto del desarrollo web en pocos meses. ¿A qué esperas para cambiar tu vida? ¡Matricúlate ya!
