javascript: uso de la versión paga de Material UI con React
Compré el paquete completo de componentes Material UI. No estoy seguro de cómo usarlo con React. Las instrucciones proporcionadas son:
Presione el botón de descarga cerca del producto Material Kit Pro React (este descargará en su computadora un archivo zip) Descomprime el archivo descargado en una carpeta de tu computadora Terminal abierta Vaya a su proyecto de archivo (donde descomprimió el producto) Ejecutar en la terminal instalación npm Luego ejecuta npm start¿Se supone que debo crear mi aplicación React primero? No estoy seguro de dónde descomprimir este archivo Material UI. Descomprimido, crea una estructura de carpetas idéntica a una aplicación React. ¿Es este realmente un paso necesario?
Sé que puedes importar a través de CDN; yo ya he seguido ese camino. Mi problema es que pagué por esta versión especial de Material para React, así que tengotodo tipo de componentes adicionales, ninguno de los cuales figura en su sitio web. ¿La descarga del archivo de material es sólo para mi propia referencia?
Eliminé todos los mensajes de error, pero intenté crear la aplicación React a partir del archivo Material y recibí errores relacionados con dependencias que estaban desactualizadas o no eran compatibles. También recibí estos mismos mensajes cuando reemplacé toda mi carpeta src/components en mi aplicación React con la carpeta src/components del archivo Material. Probé npm install y sigo recibiendo el error.
Disculpas si esta es una pregunta trivial, pero soy un novato en React y cada vez que he usado un marco CSS, siempre lo he importado a través de CDN. Esta es la primera vez que descargué una carpeta comprimida completa, y nuevamente, es más como referencia que cualquier otra cosa.cosa más. No quiero TODO el material, pero necesito hacer referencia a su CSS y ver cómo se ven estos componentes, ya que no figuran en su sitio y no sé todos los nombres de los componentes para poder impórtelos en las declaraciones de importación tradicionales en la aplicación/componentes de React.
FWIW, estoy en una MacBook Pro con Big Sur; todo está actualizado, incluido Node y todo lo relacionado con Node. Cuando creo aplicaciones de React, todas las versiones son las más actualizadas.
Gracias de antemano, esta es mi primera pregunta y espero haberlo hecho bien. :)
Por lo que parece, es posible que hayas pagado por un texto estándar obsoleto con componentes personalizados de React. En resumen, se supone que debes utilizar ese texto estándar como base para crear tu aplicación. Si miramos el historial de versiones, no se ha actualizado en casi un año, lo cual es bastante tiempo en el mundo de los desarrolladores (especialmente para algo que cuesta dinero).
- Matt Carlotta27 de marzo de 2021 a las 3:15
¿Qué puedes hacer? Presente un problema o, idealmente, obtenga un reembolso. Dado que recién estás comenzando con React, te recomiendo usar la sincronización create-react-app.e es un texto estándar gratuito. Luego puedes usar una biblioteca de UI gratuita como: Ant Design, Semantic UI o React Bootstrap, por nombrar algunas.
- Matt Carlotta27 de marzo de 2021 a las 3:17
Uf, esa fue la respuesta que sabía que vendría. Me avergüenzo de no profundizar en su repositorio de GH de antemano. Parece que el grupo que vende esto lo construyó basándose en Material y Bootstrap. De todos modos, escribí a su equipo de soporte, envié un problema usando su plantilla en GH y comencé a obtener las cosas necesarias.Listo para disputar este cargo en mi tarjeta de crédito. Gracias por su respuesta. ¡Será un recordatorio para mí de hacer siempre mi debida diligencia!
- techmeowt27/03/2021 a las 13:25
No hay problema. Si no recibes una respuesta de ellos, házmelo saber. Quizás pueda ayudarle a ponerlo en funcionamiento.
- Matt Carlotta27/03/2021 a las 14:17
------------------------------------
Para usar elementos de la interfaz de usuario de Material Design con React, querrás convertir cada uno de ellos en componentes reutilizables que luego se puedan incluir según sea necesario en la interfaz de usuario de la aplicación que podrías estar creando actualmente.
En lugar de hacerlo usted mismo, ya existe una biblioteca Material Design React muy completa donde los elementos materiales se han convertido en componentes a los que se les pasan accesorios según se desee para utilizarlos de tal manera que se ajusten al caso de uso deseado actualmente.
Aquí hay un ejemplo en el que estamos creando una tarjeta similar a esta:
Utiliza varios elementos comunes de Material Design que están disponibles como componentes Material-UI React. Como puede ver, cada componente tiene una API y podemos hacer referencia a ella para usar cada componente mientras construimos nuestra aplicación.IU de instrucciones.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
Si, más bien, tiene la intención de utilizar los recursos de Material Design que compró para crear sus propios componentes de React material Design, le recomendaría estructurar dicha biblioteca de la misma manera modular y componible.
Parece que la documentación de la biblioteca de componentes que compró está aquí. Lo usarías de la misma manera con un proyecto que ya hayas configurado. p.ej. crear-reaccionar-aplicación. Así es como incluiría y usaría el componente de botón. Asegúrese de que el archivo al que hace referencia esté disponible para importarlo a su proyecto y luego impórtelo de esta manera:
import Button from 'components/CustomButtons/Button.js';
<Button type="button">Default</Button>
<Button type="button" color="primary">Primary</Button>
<Button type="button" color="info">Info</Button>
<Button type="button" color="success">Success</Button>
<Button type="button" color="danger">Danger</Button>
<Button type="button" color="warning">Warning</Button>
<Button type="button" color="rose">Rose</Button>
Encontrará los estilos para este componente en src/assets/jss/material-kit-pro-react/components/buttonStyle.js y src/assets/jss/material-kit-pro-react/components/iconButtonStyle.js.
Mi consejo es reinventar la menor cantidad de ruedas posible y ver siempre qué bibliotecas pueden hacer el trabajo que estás intentando hacer, pero (probablemente) con una solución más elegante, mejor probada y más completa de la que tienes tiempo para construir.
Incluso podrías consultar algo como bit.dev, que es una biblioteca de componentes modulares reutilizables. O awesome-react-components para obtener una lista seleccionada de componentes de React que cumplen con los siguientes criterios:
Resuelve un problema real Lo hace de una manera 🦄 única, 🦋 hermosa o 🏆 excepcional. (Y no es muy popular ni conocido... no tiene sentido enumerarlos). ¡Tiene confirmaciones de código recientes! respondido el3 de abril de 2021 a las 10:53
MeatFlavourDevCarneFlavourDev
1,189
1
1 insignia de oro
11
11 insignias de plata
22
22 insignias de bronce
2
Gracias, no estoy seguro si leíste la pregunta, pero esto no es realmente relevante
- techmeowt3 de abril de 2021 a las 14:03
Sí, lo siento, escribí una respuesta y luego la releí y agregué una sección en el medio sobre cómo usar las que compraste. ¿No son estos los documentos de las cosas que compraste? demos.creative-tim.com/material-kit-pro-react/#/documentation/… Pensé en combinarlos ya que a alguien podría resultarle útil 🤷♂️ Creo que los enlaces de recursos en la parte inferior también pueden ser útiles para usted
- MeatFlavourDev4 de abril de 2021 a las 3:38
------------------------------------
Después de hablar con Creative Tim,En la empresa que vende kits de interfaz de usuario basados en Material Design, pude obtener un reembolso. Tienes que degradar tu versión de Node y probablemente otros paquetes para que React Pro Kit funcione.