Saltar al contenido

Iniciación a la interfaz de usuario Semántica ReactNov, 9thIn este tutorial, vamos a aprender acerca de cómo utilizar la interfaz de usuario semántica …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar la interfaz de usuario marco semántico en reaccionar aplicaciones.

¿Qué es la interfaz de usuario Semántica?

Semántica ui es un marco de desarrollo que nos ayuda a crear hermosas HTML-humano amable, resposive layoutsusing.

Semántica ui está completamente diseñado con unidades em lo que hace que el tamaño de respuesta.

Semántica IU reaccionar

Semántica IU reaccionar ofrece a reaccionar componentes que implementa el diseño de interfaz de usuario Semántica.

Introducción

En primer lugar, tenemos que crear una nueva aplicación reaccionan con la función de crear una reacción aplicación de línea de comandos.

Abre los siguientes comandos de terminal y correr.

npx create-react-app react-semantic

continuación, tenemos que cambiar nuestro directorio de trabajo mediante el uso de comandos a continuación.

cd react-semantic
npm start

NPM inicio se utiliza para ejecutar el servidor de desarrollo.

vamos a instalar la interfaz de usuario semánticas reaccionan marco ejecutando el siguiente comandos.

npm i semantic-ui-react
npm i semantic-ui-css

Ahora abra la carpeta de reaccionar-semántico en el editor de código favorito.

Vaya a su archivo index.js y añadir la siguiente línea resaltada.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'semantic-ui-css/semantic.min.css'import App from './App';

ReactDOM.render(, document.getElementById('root'));

Aquí nos importó css IU semántica a nuestra aplicación. diseño de la barra de navegación de

Let para nuestra aplicación usando la interfaz de usuario semántica reaccionar componentes.

Dentro de su carpeta src crear un nuevo archivo llamado navigation.js y añada el siguiente código.

import React, { useState } from 'react';
import { Menu } from 'semantic-ui-react'
function NavigationBar() {

return (




)
}

export default NavigationBar;

En el código anterior, primero se importó el componente Menú del componente semántico-UI-react.Inside navigationbar, nos envuelto componentes Menu.Item con el componente de menú para que la interfaz de usuario semántica nos da vuelta un html div con 3 etiquetas de enlace. componente

Dentro Menu.Item pasamos un puntal nombre y prop href. Nombre

  • : Título del enlace
  • href: Dirección de Enlace

Ahora dentro del componente de la aplicación Agregar el componente navigationbar mediante su importación fromnavigation.js archivo.

import React from 'react';
import './App.css';
import NavigationBar from '.
avigation';
function App() {

return (

);
}

export default App;

Agrega estos estilos a su archivo App.css

.App {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}

.form,.posts{
margin-top: 3rem;
}

Ahora abra su terminal y correr el siguiente comando para iniciar el servidor de desarrollo.

npm start



)
}

export default NavigationBar;

después de añadir iconos de nuestra mirada, como a continuación navigationbar imagen.

excerpt: "This is my first post with more content inside",
image: "https://via.placeholder.com/410x220"
},
{
title: "My second post",
excerpt: "This is my second post with more content inside",
image: "https://via.placeholder.com/410x220"
},
{
title: "My third post",
excerpt: "This is my third post with more content inside",
image: "https://via.placeholder.com/410x220"
},
{
title: "My fourth post",
excerpt: "This is my fourth post with more content inside",
image: "https://via.placeholder.com/410x220"
},
{
title: "My fifth post",
excerpt: "This is my fifth post with more content inside",
image: "https://via.placeholder.com/410x220"
},
{
title: "My sixth post",
excerpt: "This is my sixth post with more content inside",
image: "https://via.placeholder.com/410x210"
}
]
export { posts } import React from 'react';
import { Segment, Header, Grid, Image,Button } from 'semantic-ui-react'import { posts } from './dummy-posts';
function Posts() {
return (

{posts.map(post =>

{post.title}

{post.excerpt}


)}

)
}
export default Posts;

En el código anterior, nos importó 5 componentes de la semántica-ui-reaccionar. En

cuadrícula componentes que pasó tres apoyos centrados, columnas, duplicando.

centra: Hace que todos los elementos de la cuadrícula en el centro. columnas

: tenemos que especificar el número de columnas que necesitamos inicialmente.

duplicando: nos ayuda a ajustar automáticamente las anchuras de elementos de rejilla de acuerdo con los tamaños de los dispositivos (móvil, tablet).

componente se utiliza para agrupar elementos específicos.

componente nos ayuda a añadir las imágenes.

En

nos componente añadido como valor prop a h1 de modo que podamos hacer h1 html elemento (valores de apoyo H1, H2, H3, H4, H5, H6).

Ahora dentro componente de la aplicación Agregar los Mensajes componente mediante su importación fromposts.js archivo. salida

import React from 'react';
import NavigationBar from '.
avigation';
import Posts from './posts';import './App.css';

function App() {

return (


);
}

export default App;

: Formulario

Contacto

Vamos a crear un formulario de contacto mediante el formulario ui semántica, componentes Form.Field.

crear un nuevo archivo llamado contact.js en la carpeta src y añadir el siguiente código. componente

import React from 'react'
import { Button, Form, Segment, Header } from 'semantic-ui-react'
function ContactForm() {
return (


Contact Form








)
}
export default ContactForm;

Dentro Form.Field añadimos etiqueta y campo de entrada. componente

Form.TextArea aceptará la etiqueta, componente Button marcador de posición prop

En pasamos color = tan azul que podemos conseguir un botón con el color azul.