¿Cómo podemos crear un (diseño de tipo móvil) completamente diferente para un componente (que tiene un diseño de tipo de escritorio diferente) usando ReactJs? (No responde, responde es algo de lo que css tiene que encargarse). Debería ser un diseño diferente para el componente, es decir, aquí Crear una página con un menú (menú de encabezado) para pantallas de escritorio que se convierte en una barra lateral de navegación con logotipo en pantalla pequeña.
Honestamente, un diseño css receptivo simple puede ser la mejor solución, pero los pasos son para
1) Detectar en JS si el usuario está en un dispositivo móvil o de escritorio. Por ejemplo, esta pregunta tiene una buena sugerencia como respuesta: Detectar un navegador móvil
2) Úselo para decidir en su componente raíz qué diseño usar:
function isMobile() { // some js way to detect if user is on a mobile device } class Root extends Component { render() { return isMobile() ? ( <MobileLayout /> ) : ( <DesktopLayout /> ) } }Checkout react-responsive , puede usar la consulta de medios para representar diferentes componentes según el tamaño del dispositivo.