Diseño básico del contenedor de React Suite

React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React Suite Container Basic Layout. El diseño del contenedor puede definir el marco principal de la página utilizando componentes de encabezado, contenido, barra lateral y pie de página.

Sintaxis:

<Container>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
</Container>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: el siguiente ejemplo muestra el diseño básico del contenedor con encabezado, pie de página y contenido.

import { Container, Header, Footer, Content, 
        Sidebar } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                  
                <h4 style={{ color: "green" }}>
                    React Suite Container Basic Layout
                </h4>
                  
                <div style={{ marginTop: 20, width: 800 }}>
                    <Container>
                        <Header
                            style={{
                                backgroundColor: "skyblue",
                                padding: 20,
                                color: "white",
                            }}
                        >
                            <h2>GeeksforGeeks</h2>
                        </Header>
                        <Content
                            style={{
                                backgroundColor: "lightgreen",
                                padding: 40,
                                color: "white",
                            }}
                        >
                            GeeksforGeeks is a portal for geeks. 
                            It is a collection of well-written, 
                            well-thought, and well-responsive 
                            articles.
                        </Content>
                        <Footer
                            style={{
                                backgroundColor: "skyblue",
                                padding: 20,
                                color: "white",
                            }}
                        >
                            © GeeksforGeeks.org
                        </Footer>
                    </Container>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra el diseño básico del contenedor con una barra lateral.

import { Container, Header, Footer, Content, 
        Sidebar } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Container Basic Layout
                </h4>
                  
                <div style={{ marginTop: 20, width: 800 }}>
                    <Container>
                        <Sidebar
                            style={{ 
                                backgroundColor: "orange", 
                                padding: 20, 
                                color: "white" 
                            }}
                        >
                            <h4>Courses</h4>
                            <ul style={{
                                listStyleType: "none",
                                padding: 0,
                                margin: 0
  
                            }}>
                                <li>JavaScript</li>
                                <li>React</li>
                                <li>Node</li>
                            </ul>
                        </Sidebar>
                        <Container>
                            <Header
                                style={{
                                    backgroundColor: "skyblue",
                                    padding: 20,
                                    color: "white",
                                }}
                            >
                                <h2>GeeksforGeeks</h2>
                            </Header>
                            <Content
                                style={{
                                    backgroundColor: "lightgreen",
                                    padding: 40,
                                    color: "white",
                                }}
                            >
                                GeeksforGeeks is a portal for geeks. 
                                It is a collection of well-written, 
                                well-thought, and well-responsive 
                                articles.
                            </Content>
                            <Footer
                                style={{
                                    backgroundColor: "skyblue",
                                    padding: 20,
                                    color: "white",
                                }}
                            >
                                © GeeksforGeeks.org
                            </Footer>
                        </Container>
                    </Container>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/container/#basic-layout