(pos) Programação Orientada a Serviços

Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.

Notas de aula
Conograma
Avaliação
Links
CADES :D

React App - Components - Bibliotecas de componentes

Objetivos

Sumário

  1. Revisar componentes JSX com Arrow functions
  2. Usar bibliotecas de componentes para estilizar componentes da aplicação

1. Revisar componentes JSX com Arrow functions

// src/components/AppNavBar.js
import React from "react";

const AppNavBar = (props) => <div>{props.title}</div>;

export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";

const AppBulletList = (props) => (
   <div>
      <h4>{props.title}</h4>
      <p>lista de bullets</p>
   </div>
);

export default AppBulletList;

2. Usar bibliotecas de componentes para estilizar componentes da aplicação

2.1. React Bootstrap

  1. Para aplicação web
  2. Instalar bibliotecas React-Bootstrap com yarn add react-bootstrap@next bootstrap@5.1.1
  3. Iniciar aplicação web
  4. Ajustar instalação em src/pages/_app.js
  5. Importar biblioteca de componetnes nos componetes da aplicação
$ yarn add react-bootstrap@next bootstrap@5.1.1
$ yarn run dev
// src/pages/_app.js
import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
}

export default MyApp;
// src/components/AppNavBar.js
import React from "react";
import { Container, Navbar } from "react-bootstrap";

const AppNavBar = (props) => (
   <Container>
      <Navbar expand="lg" variant="dark" bg="dark">
         <Container>
            <Navbar.Brand href="#">{props.title}</Navbar.Brand>
         </Container>
      </Navbar>
   </Container>
);

export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";
import { Card, Container } from "react-bootstrap";

const AppBulletList = (props) => (
   <Container>
      <Card border="primary">
         <Card.Body>
            <Card.Title>{props.title}</Card.Title>
         </Card.Body>
         <Card.Text>Lista de bullets</Card.Text>
      </Card>
   </Container>
);

export default AppBulletList;

2.2. Material UI

  1. Para aplicação web
  2. Desinstalar bibliotecas React-Bootstrap yarn remove react-bootstrap bootstrap
  3. Instalar bibliotecas com yarn add @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
  4. Iniciar aplicação web
  5. Ajustar instalação em src/pages/_app.js
  6. Importar biblioteca de componetnes nos componetes da aplicação
$ yarn remove react-bootstrap bootstrap
$ yarn add @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
$ yarn run dev
// src/pages/_app.js
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
}

export default MyApp;
// src/components/AppNavBar.js
import React from "react";

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";

const AppNavBar = (props) => (
   <Box sx=>
      <AppBar position="static">
         <Toolbar variant="dense">
            <IconButton
               edge="start"
               color="inherit"
               aria-label="menu"
               sx=
            >
               <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" component="div">
               {props.title}
            </Typography>
         </Toolbar>
      </AppBar>
   </Box>
);

export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";

import { Card, CardContent, Typography } from "@mui/material/";

const AppBulletList = (props) => (
   <Card>
      <CardContent>
         <Typography variant="h4">{props.title}</Typography>
         <Typography variant="body2">bullets</Typography>
      </CardContent>
   </Card>
);

export default AppBulletList;

2.3. Bulma

  1. Para aplicação web
  2. Desinstalar bibliotecas Material UI yarn remove @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
  3. Instalar bibliotecas com yarn add bulma
  4. Iniciar aplicação web
  5. Ajustar instalação em src/pages/_app.js
  6. Importar biblioteca de componetnes nos componetes da aplicação
$ yarn remove @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
$ yarn add bulma
$ yarn run dev
// src/pages/_app.js
import "bulma/css/bulma.min.css";

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
}

export default MyApp;
// src/components/AppNavBar.js
import React from "react";

const AppNavBar = (props) => (
   <nav className="navbar" role="navigation" aria-label="main navigation">
      <div id="navbarBasicExample" className="navbar-menu">
         <div className="navbar-start">
            <a className="navbar-item">{props.title}</a>
            <a className="navbar-item">Documentation</a>
            <div className="navbar-item has-dropdown is-hoverable">
               <a className="navbar-link">More</a>
               <div className="navbar-dropdown">
                  <a className="navbar-item">About</a>
                  <a className="navbar-item">Jobs</a>
                  <a className="navbar-item">Contact</a>
                  <hr className="navbar-divider" />
                  <a className="navbar-item">Report an issue</a>
               </div>
            </div>
         </div>
         <div className="navbar-end">
            <div className="navbar-item">
               <div className="buttons">
                  <a className="button is-primary">
                     <strong>Sign up</strong>
                  </a>
                  <a className="button is-light">Log in</a>
               </div>
            </div>
         </div>
      </div>
   </nav>
);

export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";

const AppBulletList = (props) => (
   <div className="card">
      <div className="card-content">
         <p className="title">{props.title}</p>
      </div>
      <footer className="card-footer">
         <p className="card-footer-item">
            <span>
               View on
               <a href="https://twitter.com/codinghorror/status/506010907021828096">
                  Twitter
               </a>
            </span>
         </p>
         <p className="card-footer-item">
            <span>
               Share on <a href="#">Facebook</a>
            </span>
         </p>
      </footer>
   </div>
);

export default AppBulletList;

Bibliotecas

Vídeos aulas

1h24 Momento síncrono