Crie um Site Mínimo em Reação com o Oracle Content Management Sem Cabeça

Introdução

React é um framework JavaScript amplamente utilizado para criar aplicativos Web.

Para consumir nosso conteúdo do Oracle Content Management em um aplicativo React, podemos usar a amostra mínima React disponível como repositório de código-fonte aberto em GitHub.

Neste tutorial, desenvolveremos um site mínimo simples no React aproveitando o Oracle Content Management como um CMS headless, bem como seu kit de desenvolvimento de software (SDK) para entrega de conteúdo em JavaScript. O Oracle Content Management também inclui suporte para GraphQL para todo conteúdo publicado e todos os tipos de ativos. Esta amostra do React está disponível em GitHub.

O tutorial consiste em três tarefas:

1. Preparar o Oracle Content Management
2. Crie o site mínimo no React
3. Preparar seu aplicativo para implantação

Pré-requisitos

Antes de prosseguir com este tutorial, recomendamos que você leia as seguintes informações primeiro:

• Conceitos-Chave
• Repositórios de Ativos

Para seguir este tutorial, você precisará:

• uma assinatura do Oracle Content Management
• uma conta do Oracle Content Management com a atribuição de Administrador de Conteúdo
• um computador Windows ou Mac com o Node versão 10 ou superior

O que estamos construindo

Com o React mínimo, você pode recuperar facilmente imagens e outros conteúdos do repositório do Oracle Content Management.

Para dar uma olhada no que estamos construindo, aqui está o estado final do nosso tutorial, um site mínimo de React básico que consome conteúdo do Oracle Content Management:

https://headless.mycontentdemo.com/samples/oce-react-minimal-sample

É assim que a página inicial se parecerá no fim deste tutorial:

É assim que a página de contato conosco terá a aparência do fim deste tutorial:

É assim que a página de pessoas se parecerá no fim deste tutorial:

Para continuar, você precisará ter uma assinatura ativa no Oracle Content Management e estar conectado com a atribuição de Administrador de Conteúdo.

Tarefa 1: Preparar o Oracle Content Management

Se você ainda não tiver uma instância do Oracle Content Management, consulte o Início Rápido para saber como se registrar no Oracle Cloud, provisionar uma instância do Oracle Content Management e configurar o Oracle Content Management como um CMS headless.

Para este tutorial, você precisará criar um modelo de conteúdo. Há um pacote de ativos de download disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado.

Para preparar o Oracle Content Management:

1. Crie um canal e um repositório de ativos.
2. Crie um modelo de conteúdo usando um destes dois métodos:
   • Método 1: Importar o Pacote de Ativos de Amostras do Oracle Content Management
   • Método 2: Criar seu próprio modelo de conteúdo

Crie um Canal e um Repositório de Ativos

Primeiro você precisa criar um canal e um repositório de ativos no Oracle Content Management para que possa publicar conteúdo.

Para criar um canal e um repositório de ativos no Oracle Content Management:

1. Faça log-in na interface web do Oracle Content Management como administrador.

2. Escolha Conteúdo no menu de navegação esquerdo e, em seguida, escolha Publicando Canais na lista de seleção no cabeçalho da página.

   

3. No canto superior direito, clique em Criar para criar um novo canal. Nomeie o canal 'OCEMinimalChannel' com a finalidade deste tutorial e mantenha o acesso público. Clique em Salvar para criar o canal.

   

4. Escolha Conteúdo no menu de navegação esquerdo e, em seguida, escolha Repositórios na lista de seleção no cabeçalho da página.

   

5. No canto superior direito, clique em Criar para criar um novo repositório de ativos. Nomeie o repositório de ativos 'OCEMinimalRepository' com a finalidade deste tutorial.

   

6. No campo Canais de Publicação, selecione o canal OCEMinimalChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEMinimalRepository pode ser publicado no canal OCEMinimalChannel. Clique em Salvar quando terminar.

   

Criar um Modelo de Conteúdo

A próxima etapa é criar um modelo de conteúdo. Você pode usar um dos dois métodos:

• Método 1: Importar o Pacote de Ativos de Amostras do Oracle Content Management
• Método 2: Criar seu próprio modelo de conteúdo

Importar o Pacote de Ativos de Amostras do Oracle Content Management

Você pode fazer download de um pacote de ativos de amostra pré-configurado do Oracle Content Management que contém todos os tipos de conteúdo e ativos necessários para este tutorial. Se preferir, você também pode criar seu próprio modelo de conteúdo em vez de fazer download do pacote de ativos de amostra.

Você pode fazer upload de uma cópia do conteúdo que estamos usando neste tutorial do Pacote de Ativos de Amostras do Oracle Content Management. Isso permitirá que você experimente os tipos de conteúdo e modifique o conteúdo. Se quiser importar o Pacote de Ativos de Amostras do Oracle Content Management, faça download do arquivo compactado do pacote de ativos, OCESamplesAssetPack.zip, e extraia-o para um diretório de sua escolha:

1. Faça download do Pacote de Ativos de Amostras do Oracle Content Management (OCESamplesAssetPack.zip) na página downloads do Oracle Content Management. Extraia o arquivo zip baixado em um local no computador. Após a extração, esse local incluirá um arquivo chamado OCEMinimal_data.zip.

2. Faça log-in na interface web do Oracle Content Management como administrador.

3. Escolha Conteúdo no menu de navegação esquerdo e, em seguida, escolha Repositórios na lista de seleção no cabeçalho da página. Agora selecione OCEMinimalRepository e clique no botão Importar Conteúdo na barra de ação superior.

   

4. Faça upload de OCEMinimal_data.zip do seu computador local para a pasta Documentos.

   

5. Após o upload, selecione OCEMinimal_data.zip e clique em OK para importar o conteúdo para o repositório de ativos.

   

6. Depois que o conteúdo tiver sido importado com sucesso, navegue até a página Ativos e abra o repositório OCEMinimalRepository. Você verá que todas as imagens e itens de conteúdo relacionados foram adicionados ao repositório de ativos.

   

7. Clique em Selecionar Tudo na parte superior esquerda e em Publicar para adicionar todos os ativos importados ao canal de publicação criado anteriormente, OCEGettingStartedChannel.

   

8. Antes da publicação, você precisa validar todos os ativos. Primeiro, adicione OCEMinimalChannel como um canal selecionado e clique no botão Validar.

   

9. Depois que os ativos tiverem sido validados, você poderá publicar todos os ativos no canal selecionado clicando no botão Publicar no canto superior direito.

   

Quando terminar, você poderá ver na página Ativos que todos os ativos foram publicados. (Pode ser informado pelo ícone acima do nome do ativo.)

Depois de importar o Pacote de Ativos de Amostras do Oracle Content Management, você pode começar a criar o Site Mínimo em Reação.

Crie seu próprio modelo de conteúdo

Em vez de importar o Pacote de Ativos de Amostras do Oracle Content Management, você também pode criar seu próprio modelo de conteúdo.

Para este tutorial, estamos usando um tipo de conteúdo chamado 'MinimalMain' como o tipo de conteúdo principal para esta amostra. Esse tipo de conteúdo consiste em logotipos de cabeçalho e rodapé e uma lista de páginas que devem ser incluídas no nav.

Para criar tipos de conteúdo para o modelo de conteúdo:

1. Faça log-in na interface web do Oracle Content Management como administrador.
2. Escolha Conteúdo no menu de navegação esquerdo e escolha Tipos de Ativo na lista de seleção no cabeçalho da página.
3. Clique em Criar no canto direito superior.
4. Escolha criar um tipo de conteúdo (não um tipo de ativo digital). Repita isso para todos os tipos de conteúdo obrigatórios.

Criaremos cinco tipos de conteúdo, cada um com seu próprio conjunto de campos:

• MinimalMain
• MinimalPage
• MinimalSection
• PeoplePage
• Pessoa

O primeiro tipo de conteúdo, MinimalMain, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
headerLogo	Campo de mídia de valor único		headerLogo
footerLogo	Campo de mídia de valor único		footerLogo
páginas	Campo de referência de vários valores		páginas

É assim que sua definição de tipo de conteúdo MinimalMain deve ter:

O segundo tipo de conteúdo, MinimalPage, deve ter o seguinte campo:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
seções	Campo de referência de vários valores		seções

É assim que seu tipo de conteúdo MinimalPage deve ter:

O terceiro tipo de conteúdo, MinimalSection, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
tipo	Campo de texto de valor único	X	tipo
da coluna Tipo	Campo de texto de valor único		da coluna Tipo
body	Campo de texto grande de valor único		body
imagem	Campo de imagem de valor único		imagem
ações	Campo de conteúdo incorporado de valor único		ações

É assim que seu tipo de conteúdo MinimalSection deve ter:

O quarto tipo de conteúdo, PeoplePage, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
anúncio	Campo de referência de valor único		anúncio
pessoas	Campo de referência de vários valores		pessoas

O quinto e último tipo de conteúdo, Pessoa, é um ativo digital personalizado com os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
fullName	Campo de texto de valor único	X	fullName
título	Campo de texto de valor único		título
biodata	Campo de texto grande de valor único		biodata

Depois de criar seus tipos de conteúdo, você poderá adicionar esses tipos ao repositório criado anteriormente, OCEMinimalRepository:

1. Faça log-in na interface web do Oracle Content Management como administrador.
2. Navegue até OCEMinimalRepository.
3. Edite o repositório e, em Tipos de Ativo, especifique todos os cinco tipos de conteúdo recém-criados. Clique no botão Salvar para salvar as alterações.

Depois de adicionar os tipos de conteúdo ao repositório, você pode abrir o repositório OCEMinimalRepository na página Ativos e começar a criar seus itens de conteúdo para todos os tipos de conteúdo.

Tarefa 2: Criar o Site Mínimo em Reação

Para consumir nosso conteúdo do Oracle Content Management em um aplicativo React renderizado do lado servidor, podemos usar a amostra mínima de site do React, que está disponível como um repositório de código-fonte aberto em GitHub.

Observação: Lembre-se de que o uso da amostra React é opcional e a usamos neste tutorial para começar rapidamente. Você também pode criar seu próprio aplicativo React.

Para construir o site mínimo no React:

1. Clonar o repositório de amostra e instalar dependências
2. Configurar o aplicativo React
3. Trabalhar com o SDK do Oracle Content Management Content
4. Usar o Content SDK para extrair conteúdo
5. Use GraphQL para construir a página de pessoas

Clonar o Repositório de Amostra e Instalar Dependências

A amostra mínima de site do React está disponível como um repositório de código-fonte aberto em GitHub.

Primeiro você precisará clonar a amostra de GitHub para seu computador local e alterar seu diretório para a raiz do repositório:

git clone https://github.com/oracle/oce-react-minimal-sample.git
cd oce-react-minimal-sample

Agora que você tem sua base de código, precisa fazer download de dependências do aplicativo. Execute o seguinte comando no diretório raiz:

npm install

Configurar o Aplicativo React

Nesta amostra mínima de site do React, você precisa configurar algumas informações para que o SDK (e quaisquer outras solicitações) do Oracle Content Management Content possa direcionar o URL e a versão da API da instância corretos com o token de canal correto. Esses valores são usados em src/scripts/server-config-utils.js para instanciar um novo cliente de entrega.

Este aplicativo usa um arquivo .env que é lido pelo Webpack ao empacotar os aplicativos cliente e servidor. Usando webpack.DefinePlugin, qualquer valor lido no arquivo .env pode ser disponibilizado para qualquer lugar do aplicativo.

Abra o arquivo .env em um editor de texto. Você verá o seguinte:

# The connection details for the Oracle Content Management server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

Altere cada par chave-valor para refletir o URL da sua instância, a versão da API que você deseja direcionar e o token do canal associado ao seu canal de publicação. O canal deste tutorial é OCEMinimalChannel.

Trabalhar com o SDK do Oracle Content Management Content

O Oracle Content Management oferece um SDK para ajudar a descobrir e usar conteúdo em seus aplicativos. O SDK é publicado como um módulo NPM e o projeto é hospedado em GitHub.

Saiba mais sobre o SDK aqui.

O SDK foi registrado como uma dependência de runtime deste projeto no arquivo package.json.

Usar o Content SDK para Extrair Conteúdo

Agora podemos aproveitar o Content SDK para extrair conteúdo para que possamos renderizá-lo em nosso aplicativo React.

O Content SDK usa um objeto DeliveryClient para especificar o ponto final. Você pode fazer todas as solicitações usando esse objeto cliente.

A pasta src/scripts contém o código para obter dados do Oracle Content Management usando o Content SDK.

O arquivo src/scripts/server-config-utils.js importa o Content SDK e, em seguida, cria um cliente de entrega usando a configuração especificada em .env.

O seguinte comando importa o SDK:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

O seguinte comando cria o cliente de entrega:

return createDeliveryClient(serverconfig);

O arquivo src/scripts/services.js contém funções para obter os dados desta aplicação mínima React.

O método fetchOceMinimalMain() recupera o tipo de conteúdo MinimalMain com um slug de minimalmain.

export async function fetchOceMinimalMain() {
  const data = await getItem('minimalmaingraphql', 'fields.headerlogo,fields.footerlogo,fields.pages');
  if (!data.hasError) {
    const { fields } = data;
    const { headerlogo, footerlogo } = fields;
    // Extract the sourceset for the headerImage and footerImage and put it back in the data
    data.headerRenditionURLs = getSourceSet(headerlogo);
    data.footerRenditionURLs = getSourceSet(footerlogo);
  }
  return data;
}

Observação: A consulta acima é para um ativo com slug "minimalmaingraphql" que inclui a página 'Pessoas' do tipo Página de Pessoas. Para criar o site mínimo sem a página 'Pessoas', um ativo com slug "minimalmain" no pacote de ativos pode ser usado.

Para renderizar as imagens, services.js fornece um método auxiliar para recuperar o conjunto de origens de um ativo construído com base nas renderizações do ativo.

function getSourceSet(asset) {
  const urls = {};
  urls.srcset = '';
  urls.jpgSrcset = '';
  if (asset.fields && asset.fields.renditions) {
    asset.fields.renditions.forEach((rendition) => {
      addRendition(urls, rendition, 'jpg');
      addRendition(urls, rendition, 'webp');
    });
  }
  // add the native rendition to the srcset as well
  urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
  urls.native = asset.fields.native.links[0].href;
  urls.width = asset.fields.metadata.width;
  urls.height = asset.fields.metadata.height;
  return urls;
}

O método fetchPage() recupera o tipo de conteúdo MinimalPage usando o valor de slug da página obtida da consulta anterior.

export async function fetchPage(pageslug) {
  // Get the page details
  const page = await getItem(pageslug, 'fields.sections');
  return page;
}

O método getRenditionURLs() recupera os urls de renderização de qualquer imagem que possa ser definida em uma seção usando o id dessa imagem. Essa chamada é feita no lado do cliente.

export function getRenditionURLs(identifier) {
  const client = getClient();
  return client.getItem({
    id: identifier,
    expand: 'fields.renditions',
  }).then((asset) => getSourceSet(asset))
    .catch((error) => logError('Fetching Rendition URLs failed', error));
}

Use GraphQL para Criar a Página Pessoas

Usamos o Cliente Apollo em package.json para integrar GraphQL ao React e o método fetchPeople em src/scripts/services-graphql.js para fazer a chamada GraphQL ao servidor de conteúdo.

Para obter mais informações sobre como incluir suporte a GraphQL no Oracle Content Management, experimente o tutorial Usar GraphQL com o React e o Oracle Content Management.

Agora que temos nossa consulta de dados, podemos renderizar as respostas em nossos componentes React.

Lado do Cliente Versus Renderização no Lado do Servidor

Com a renderização do cliente (CSR), o cliente é responsável por criar e renderizar o conteúdo de uma página web usando JavaScript. Com a renderização no servidor (SSR), a página é criada no servidor e uma página da Web é retornada ao cliente.

Quando a página Web é solicitada do servidor na renderização do cliente, o documento HTML retornado contém HTML esqueleto e nenhum conteúdo real. Ele contém uma referência a um pacote JavaScript, que o cliente solicita do servidor. Ao receber este pacote, o cliente executa JavaScript e preenche a página Web. Até que o cliente tenha concluído a execução de JavaScript, todas as views do usuário serão uma página web em branco. Uma desvantagem dos aplicativos renderizados no lado do cliente é que quando alguns web crawlers indexam o site, não há conteúdo real para indexar.

Com a renderização no servidor (SSR), a página é criada no servidor e uma página da Web é retornada ao cliente. A vantagem disso é que os rastreadores da Web podem indexar o conteúdo na página da Web.

Reagir Fluxo Mínimo de Aplicações do Site

O fluxo do aplicativo mínimo React do site é o seguinte:

1. O cliente faz uma solicitação ao servidor para uma determinada rota.
2. O servidor Express recebe a solicitação.
3. O servidor Express e executa estas tarefas:
   1. Ele determina quais componentes serão renderizados para a rota fornecida e chama a função fetchInitialData do componente para obter todos os dados desse componente.
   2. Ele cria uma string de todo o conteúdo a ser renderizado. (Cada componente será solicitado a renderizar para produzir sua marcação HTML.)
   3. Ele cria um documento HTML que contém os seguintes itens:
      • A string de conteúdo a ser renderizada
      • Um link para uma folha de estilo, se aplicável
      • Uma tag de script contendo o cliente-bundle.js que o cliente precisará
      • Os dados obtidos de todos os componentes, serializados como JSON
   4. O servidor retorna o HTML ao cliente.
4. O cliente recebe o HTML e o renderiza. O usuário verá uma página web totalmente formada.
5. O JavaScript no HTML armazenará os dados na janela do Web browser no cliente.
6. O cliente solicita o arquivo cliente-bundle.js do servidor. Depois de recebê-lo, o cliente executa o JavaScript no pacote.
   • Ele "hidrata" o HTML, adicionando em qualquer JavaScript do lado do cliente, como listeners de eventos.
   • Cada componente que está sendo processado verá se seus dados estão armazenados na janela. Se for, esses dados serão usados; caso contrário, o componente obterá os dados necessários fazendo solicitações ao servidor do Oracle Content Management por meio do Content SDK.
7. Se o documento HTML contiver uma folha de estilo, o cliente solicitará a folha de estilo.

Ao exibir a origem da página da Web, você verá todo o conteúdo no HTML, indicando que a página foi renderizada no servidor.

Observação: Este aplicativo de amostra obtém os dados nos componentes raiz e, em seguida, transmite os dados para qualquer componente filho que precise dele. Uma alternativa é usar uma ferramenta de gerenciamento de estado como o Redux, que coloca os dados em uma loja, e qualquer componente pode solicitar os dados dessa loja.

Servidor e Renderização Express no Servidor

O aplicativo servidor usa um servidor Express para receber a solicitação, gerar uma instância React do aplicativo, gerar a página HTML e retornar a resposta.

O arquivo do servidor Express está localizado em src/server/server.js.

O servidor Express aceita todas as solicitações e usa o reat-router-dom matchPath() do React para obter o componente que será renderizado para a rota especificada. Isso, por sua vez, chamaria o método fetchInitialData desse componente para obter os dados desse componente, retornando uma promessa. A promessa é executada e um objeto de contexto é criado para conter os dados. Em seguida, um renderizador é chamado para gerar a página HTML antes de retornar o conteúdo HTML para o cliente.

server.get('*', (req, res) => {
  // matchRoutes will return all the components which will be rendered as per the request route.
  // call "fetchInitialData" on each of those components (if the component has such a method),
  // and build up an array of pending network calls for all the data required for the components
  // which will be rendered.
  const promises = matchRoutes(Routes, req.path).map(({ route }) => (
    route.fetchInitialData ? route.fetchInitialData(req) : null));

  // Execute all promises at the same time to get all the data, once its all been obtained
  // render the HTML to the client by delgating to the "renderer" method
  Promise.all(promises).then((data) => {
    // this context object gets passed into the renderer, which in turn passes it
    // to the StaticRouter. The StaticRouter passes it to any component which is called
    // as the "staticContext" prop.
    const context = { data };

    // get the content to return to the client
    const content = renderer(req, context);

    // if the route requested was not found, the content object will have its "notFound"
    // property set, therefore we need to change the response code to a 404, not found
    if (context.notFound) {
      res.status(404);
    }

    if (context.url) {
      // If a redirect was set using a Redirect component do that
      res.redirect(301, context.url);
    } else {
      // send the response
      res.send(content);
    }
  });
});

O renderizador está localizado em src/server/renderer.jsx e usa reat-dom/server renderToString() do React para obter uma string de todo o conteúdo que está sendo renderizado.

// generate the HTML content for this application
const content = renderToString(
  <StaticRouter context={context} location={req.path} basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </StaticRouter>,
);

O objeto de contexto passado para o renderizador é passado para o roteador do servidor, StaticRouter. Durante a renderização do lado servidor, qualquer componente é capaz de obter os dados dos props do componente.

this.props.staticContext.data

O renderizador retorna a marcação HTML que contém o conteúdo React, os dados serializados e uma referência ao pacote JavaScript a ser executado no cliente.

<body>
  <div id="root">${content}</div>
  <script>
    window.INITIAL_DATA = ${serialize(context.data)}
  </script>
  <script src="${clientBundleFile}"></script>
</body>

Quando o cliente receber o HTML, os dados serão disponibilizados na janela e o cliente solicitará o pacote do cliente do servidor.

Renderização do Cliente

O código de renderização do cliente está localizado em src/client/main.js. Esse código passa por todo o HTML da página Web, adicionando qualquer código JavaScript no lado do cliente.

Esse processo é chamado hydrating.

ReactDOM.hydrate(
  <BrowserRouter basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </BrowserRouter>,
  document.querySelector('#root'),
);

Reagir Componentes

O React usa uma tecnologia conhecida como JSX, que é uma extensão de sintaxe semelhante a HTML em JavaScript, para renderizar conteúdo. Embora você possa gravar JavaScript puro para renderizar dados do Oracle Content Management, é altamente recomendável usar o JSX.

O aplicativo mínimo do site divide cada página em vários componentes menores.

As próximas seções compreendem uma visão geral de como o React renderiza nosso aplicativo em cada um de nossos componentes:

• Variável IS_BROWSER
• Arquivo de rotas
• Componente do aplicativo
• Componente da página
• Componentes de Cabeçalho e Rodapé
• Componente Seção
• Componente Pessoas
• Pessoa, componente
• Componente de erro

Variável IS_BROWSER

O Webpack é usado para empacotar o cliente e o código do servidor. Há um arquivo de configuração que instrui o Webpack sobre como criar cada pacote.

Abra o arquivo de configuração do pacote do cliente, webpack.client.config.js. Na parte inferior do arquivo, uma variável é definida para indicar que o aplicativo está sendo executado em um navegador.

new webpack.DefinePlugin({
  'process.env.IS_BROWSER': true,
}),

Abra o arquivo de configuração do pacote do servidor, webpack.server.config.js. Na parte inferior do arquivo, a mesma variável é definida para indicar que o aplicativo não está sendo executado em um navegador. A variável IS_BROWSER pode ser acessada de qualquer lugar no código do aplicativo React para determinar se o aplicativo está sendo renderizado no servidor ou no cliente.

Arquivo de Rotas

Em nosso site, fornecemos apenas duas rotas. O '/page/people' é roteado para o Componente Pessoas. Todas as outras solicitações são direcionadas ao componente Página.

Todas as páginas têm um cabeçalho, contendo o logotipo e os links da empresa e um rodapé, contendo um logotipo e ícones de mídia social.

O arquivo src/pages/Routes.js define as rotas do aplicativo. Aqui estamos usando o operador de distribuição ES6 para o Aplicativo, referências de Página. Isso ocorre porque as importações desses itens são objetos que contêm o componente e sua função fetchInitialData (se tiver um), em vez de apenas o componente.

export default [
  {
    ...App,
    routes: [
      {
        ...People,
        path: '/page/people',
        exact: true,
        title: 'People',
      },
      {
        ...Page,
        path: '/page/:slug',
        exact: true,
        title: 'Page',
      },
    ],
  },
];

Componente do Aplicativo

O componente Aplicativo é o componente principal do aplicativo. Ela envolve as rotas para que cada rota no aplicativo obtenha o cabeçalho e o rodapé.

<div>
  <Header pages={data.fields.pages} headerRenditionURLs={data.headerRenditionURLs} />
  {isRoot ? (
    <Redirect to={{ pathname: `/page/${firstPageSlug}` }} />
  ) : (
    renderRoutes(route.routes)
  )}
  <Footer footerRenditionURLs={footerRenditionURLs} />
</div>

Os componentes de rotas individuais são o componente Página localizado no diretório de páginas.

Abra o componente Aplicativo, localizado em src/pages/App.jsx. O componente importa a API para obter os dados do arquivo services.js.

import { fetchOceMinimalMain } from '../scripts/services';

O componente Aplicativo obtém os dados necessários e os transmite aos componentes Cabeçalho, Rodapé e Página.

O construtor verifica se o aplicativo está sendo executado no cliente ou no servidor, usando a variável process.env.IS_BROWSER definida nos arquivos de empacotamento do Webpack. Se o componente estiver sendo renderizado no cliente, os dados serão obtidos da janela.

Observação: Quando uma página é navegada para usar o roteamento do cliente, a renderização do servidor não ocorrerá. Em vez disso, o conteúdo será renderizado usando renderização no lado do cliente. Como resultado, a janela não conterá nenhum dado, e o cliente terá que fazer uma chamada de servidor para obtê-la.

Se o componente estiver sendo renderizado no servidor, os dados serão obtidos de this.props.staticContext, ou seja, os dados transmitidos do arquivo do Express Server. Os dados, ou valores padrão, são então armazenados no estado do componente.

constructor(props) {
  super(props);

  let data;
  if (process.env.IS_BROWSER) {
    data = window.INITIAL_DATA;
    // Do not delete the data yet, as the Page component needs to read from it
  } else {
    const { staticContext } = this.props;
    data = staticContext.data;
  }

  this.state = {
    appData: data,
  };
}

Durante a renderização do servidor, fetchInitialData é chamado para obter os dados do servidor. Ele retorna uma promessa para o código de chamada, o código do Express Server.

function fetchInitialData() {
  return fetchOceMinimalMain();
}

Quando o componente é renderizado (consulte o método render), ele obtém todos os dados do estado do componente e os transmite para os componentes Cabeçalho, Rodapé e Rota da página.

src/pages/App.jsx exporta um objeto que contém a função fetchInitialData e o componente.

export default {
  fetchInitialData,
  component: App,
};

Componente da Página

O componente Página é responsável pela renderização de todas as seções definidas para uma página.

Abra o componente Página, localizado em src/pages/Page.jsx.

fetchInitialData é chamado durante a renderização do servidor para obter os dados do servidor.

function fetchInitialData() {
  const pageslug = req.path.split('/').pop();
  return fetchPage(pageslug);
}

componentDidUpdate verifica se o nome do caminho do local foi alterado indicando uma alteração de navegação e, em seguida, extrai os dados adequadamente.

componentDidUpdate() {
  const { pageSlug } = this.state;
  const { location } = this.props;
  const { pathname } = location;
  const newSlug = pathname.split('/').pop();
  if (pageSlug !== newSlug) {
    this.fetchData(newSlug);
  }
}

No método render(), você pode ver que os dados a serem renderizados são obtidos do estado do componente. Esses dados têm uma lista de seções, de modo que o método render() dos componentes de Página repete a lista e chama o componente Seção para cada seção da lista.

Como o componente Aplicativo, o componente Página exporta um objeto que contém a função fetchInitialData e o componente.

export default {
  fetchInitialData,
  component:  Page,
};

Componentes de Cabeçalho e Rodapé

O componente Cabeçalho, localizado em src/components/Header.jsx, e o componente Rodapé, localizado em src/components/Footer.jsx, simplesmente usam os dados transmitidos do componente Aplicativo. Eles não obtêm dados adicionais do servidor.

Componente da Seção

O componente Seção, localizado em src/components/Section.jsx, é usado pelo componente Página e é usado para renderizar qualquer item de conteúdo do tipo MinimalSection.

Este componente tem dados transmitidos do componente Página e, se os dados da seção tiverem uma imagem, ele fará uma chamada do cliente para obter os urls de renderização da imagem do servidor.

useEffect(() => {
  if (!image || section.RenditionURLs) return;
  getRenditionURLs(image.id).then((urls) => {
    setRenditionURLs(urls);
  }, console.error);
}, [section]);

Componente Pessoas

O componente Pessoas é responsável pela renderização da Página Pessoas e está localizado em src/pages/People.jsx.

Para obter mais informações sobre como incluir o Suporte GraphQL no Oracle Content Management, confira este tutorial.

Componente da Pessoa

O componente Pessoa, localizado em src/components/Person.jsx, é utilizado pelo componente Pessoas e é utilizado para processar quaisquer itens de conteúdo do tipo Pessoa.

Esse componente tem dados transmitidos do componente Pessoas e não precisa fazer chamadas adicionais ao servidor.

Componente do Erro

O componente Erro, localizado em src/components/Error.jsx, é usado pelos componentes Página e Aplicativo. Se houver erros durante a chamada ao servidor, ele os renderizará.

Tarefa 3: Preparar seu Aplicativo para Implantação

Agora que criamos nosso site mínimo React, precisamos vê-lo em um servidor de desenvolvimento local para que possamos depurar quaisquer problemas e visualizar o aplicativo antes que ele entre em operação.

Prepare o aplicativo para implantação em três etapas:

1. Criar o aplicativo usando o Webpack
2. Executar o aplicativo usando o Nó
3. Usar scripts para criar e executar o aplicativo no desenvolvimento e na produção

Criar o Aplicativo Usando o Webpack

O Webpack é usado para empacotar o aplicativo. Ele cria dois pacotes JavaScript: server-bundle.js, que é executado no servidor e client-bundle.js, que é baixado e executado no cliente.

O aplicativo mínimo React do site tem três arquivos de configuração do Webpack:

• webpack.base.config.js é mesclado com as configurações do cliente e do servidor Webpack.
• webpack.client.config.js empacota o código para o cliente.
• webpack.server.config.js agrupa o código do servidor.

Para criar o pacote do cliente, você deve especificar a configuração do Webpack do cliente:

webpack --config webpack.client.config.js

Para criar o pacote do servidor, você deve especificar a configuração do Webpack do servidor:

webpack --config webpack.server.config.js

Executar o Aplicativo Usando o Nó

Depois que os pacotes tiverem sido criados, você poderá iniciar o servidor executando o seguinte comando:

node server.js

Usar Scripts para Criar e Executar o Aplicativo em Desenvolvimento e Produção

O arquivo package.json localizado na raiz do projeto contém scripts que facilitam a criação dos pacotes e a execução do aplicativo.

Desenvolvimento

Você pode usar o script dev durante o desenvolvimento:

npm run dev

Este script cria os pacotes cliente e servidor e inicia o aplicativo em um servidor local. O Webpack observará alterações de código e recriará os pacotes de cliente e servidor, se necessário.

Produção

Para produção, o script build seria usado para criar os pacotes cliente e servidor:

npm run build

Quando o script for concluído, o aplicativo poderá ser executado com o seguinte comando:

npm run start

Conclusão

Neste tutorial, criamos um site mínimo no React, que pode ser encontrado em GitHub. Este site usa o Oracle Content Management como um CMS headless. Depois de configurar e configurar o Oracle Content Management com um canal de conteúdo publicado para o tutorial mínimo do site, instalamos e executamos o site React para extrair o conteúdo necessário e criar o site.

Para obter mais informações sobre o React, vá para o site do React.

Saiba mais sobre conceitos importantes do Oracle Content Management na documentação.

Se quiser usar GraphQL com o React, confira este tutorial.

Para saber como integrar ativos do Video Plus no Oracle Content Management com o React, consulte este tutorial.

Você pode encontrar mais amostras como essa na página Amostras do Oracle Content Management no Oracle Help Center.

---

Título e Informações de Copyright

Crie um Site Mínimo em Reação com o Oracle Content Management Sem Cabeça

F38764-05

Dezembro de 2022

Copyright © 2021, 2022, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation