ReactJs - CRUD - Ciência Da Computação

1/7/2021 ReactJs - CRUD | Ciência da Computação
12th July 2018 ReactJs - CRUD
[https://3.bp.blogspot.com/-K2LLpLeMjP8/W0tfwnZ7pTI/AAAAAAAAC5Y/2H5bMWDPFhQSo-
eOMC2ZMQhwQjT5E_HRgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-52-33.png]
Atualizando aos poucos:
1. HIERARQUIA DE PASTAS - OK
2. AMBIENTE DE DESENVOLVIMENTO - OK
2.1. INSTALAÇÃO DO JSON-SERVER - OK
3. BACKEND: DB.JSON - OK
4. FRONTEND
4.1. COMPONENTES - OK
5. CSS
6. HEADER: CABEÇALHO
7. FOOTER
8. NAV
9. COMPONENT #1
10. COMPONENTE #2 - Roteamento
11. CADASTRO: FORMULÁRIO
12. EDIÇÃO E EXCLUSÃO
13. LARAVEL WS ALIMENTANDO REACT - DESCENTRALIZADO - (GET,POST,PUT)
14. GITHUB [https://github.com/EuFreela/React-Backend-Frontend-LaravelWS]
Se você ainda não sabe, o script esta dominando o mundo. O novo conceito de aplicações para web, mobile e
desktop começa aqui.
Se você estiver na faculdade e não estiver vendo isso, peça para atualizarem a grade ou incluir um curso de
pósgradação ou extensão. Porque o modelo que você estará aprendendo, que n seja client side, já será um conceito
antigo.
novos-cientistas.blogspot.com/2018/07/reactjs-crud.html 1/82
Obs: O layout aqui, pelo amor de Deus, é só um exemplo didático.

--------------------------------------------------------------------------
1. HIERARQUIA DE PASTAS
Crie o diretório do projeto crud
Dentro dela backend
2. AMBIENTE DE DESENVOLVIMENTO
A configuração você encontra aqui. [http://novos-cientistas.blogspot.com/2018/07/reactjs.html]
Obs: Vamos utilizar um servidor fake - json-server. Este recurso só roda em versão do node >=6.
veja a versão do seu: node -v

O meu trata-se da versão v4 e já estamos na v10. Eu estou no linux, segue os passos de atualização:
sudo npm cache clean -f && sudo npm install -g n && sudo n stable
Resultado:
eva@eva-IS-1412:~/Área de Trabalho/projetos-react/crud/backend$ sudo n stable
install : node-v10.6.0
mkdir : /usr/local/n/versions/node/10.6.0
fetch : https://nodejs.org/dist/v10.6.0/node-v10.6.0-linux-x64.tar.gz
######################################################################## 100.0%
installed : v10.6.0
2.1. INSTALAÇÃO DO JSON-SERVER

Link, Clique aqui [https://www.devpleno.com/json-server-como-criar-uma-rest-api-para-testes-de-forma-simples/]
npm init -y
npm i json-server --save-dev
npm link json-server
export NODE_PATH=/usr/lib/node_modules
Teste: json-server
[https://1.bp.blogspot.com/-
dWqo8fKrBd0/W0geLtiZCJI/AAAAAAAACrM/urTMwuxQcokkTfPolaqCfgX8WHiDwy45QCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B00-35-51.png]
3. DB.JSON
Este seria nosso backend rodando o DB com uma API REST FULL.
Crie na pasta backend um arquivo chamado db.json
Crie os usuários do nosso banco
[https://3.bp.blogspot.com/-GZdBmPdLs54/W0gNg-uSn1I/AAAAAAAACq8/kk-
nCYoFmrcme2oBhEVT3G899VtrgwKogCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-12%2B23-24-50.png]
3.2. ALTERE O PACKERGE.JSON

Linha 7, e ê o comando npm start
[https://4.bp.blogspot.com/-3BVCL6hOrxw/W0gfKa1T72I/AAAAAAAACrY/44XKAfo2jx8S-
TXQgeTkvHYq21b8hAY4QCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B00-39-47.png]
Acessando a URL
[https://2.bp.blogspot.com/-ea-
UEUf4q7Q/W0gfht44WGI/AAAAAAAACrg/qF6jDdAG3Pk9YJEpWzDUba75DwgKf74WwCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B00-41-27.png]
http://localhost:3001/user/1
Obs: deixe esse terminal aberto e abra outro
4. FRONTEND
Saia da pasta "backend", cd..

Crie um aplicativo react-app: create-react-app frontend
NO packeger.json do projeto frontend, precisamos instalar as dependencias:
"axios":"0.18.0", //utilizaremos chamadas em ajax
"bootstrap":"4.1.1", //framework css
"font-awesome":"4.7.0", //font de icones free
"react-router":"4.2.0",//vamos rotear os links das paginas
"react-router-dom":"4.2.2",
sNhpfKynwVw/W0gmSAAvIqI/AAAAAAAACrs/AGR9beeDvT0aVhBF6d3csKyPvaDfAEW0gCLcBGAs/s1600/Captura%2Bde
%2Btela%2Bde%2B2018-07-13%2B01-08-47.png]
Para instalar as dependências:

cd frontend
npm i
Após teste com npm start no frontend.
Temos abaixo nossas duas aplicações: frontend e backend.

A vantagem de usarmos o json-server, para simulamos um banco de dados, e que deixamos preparado o "terreno"
para uma API REST. Esta poderá ser feita em qualquer linguagem de programação.
taTQ9cn17Iw/W0gnkOMiSFI/AAAAAAAACr4/ZqzyGv2RCAU7S2JU6f5tVAIlwQJvSwYWgCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B01-14-49.png]
4.1. COMPONENTES
Em frontend/src, crie a pasta components/tempate

Dentro de template, crie a logo.css e logo.jsx
[https://3.bp.blogspot.com/-9zONhhj_zIY/W0go2SnweMI/AAAAAAAACsE/Z33Revpeg7QyDdKmXSHLfILPa7YwNZPcACLcBGAs/s
1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B01-21-31.png]
Crie os componentes para template, header.css e header.jsx
[https://2.bp.blogspot.com/-HQT2emJ9G-8/W0gpn_a-
q6I/AAAAAAAACsM/-1KXweiaf6cgYZUEEzxAQUPYycKY6rg5wCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B01-24-26.png]
Componentes nav.css e nav.jsx
MZ16evanq_Y/W0gqG2_TjNI/AAAAAAAACsU/EN9gk3ih6Ug60tUTioHf66NPUyU7ODC_ACLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B01-26-45.png]
O árbitro (delegate) "main"
[https://3.bp.blogspot.com/-C_g6-
3IuWTk/W0grMGD0k3I/AAAAAAAACsg/lbjiBw71BMgke9S7M4zH8wyS2zviFlZ9gCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde
%2B2018-07-13%2B01-31-19.png]
O footer
[https://1.bp.blogspot.com/-FetSbwJX4Qc/W0grq-
DOPtI/AAAAAAAACso/WAVJPHX17H0e559lXNgUhiuRn1AorallQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B01-33-26.png]
Dentro de component, crie uma pasta chamada main. Dentr dela app.css e app.jsx. Este arquivo vamos deixá-lo em
uma arrow function.
JzcdBg_ZyUA/W0guxCro0iI/AAAAAAAACtA/20Hk4nxOk0oJVLSG5ltBqy62DzJkKV0CgCLcBGAs/s1600/Captura%2Bde%2Btela%
2Bde%2B2018-07-13%2B01-46-41.png]
COnfigure a index.js na referencia ao .app. Já apaguei os arquivos desnecessários.
QXvFSOS1XI8/W0gu8Wk6XqI/AAAAAAAACtE/61IuLW5vXCEIAeoTrVhkMfO5t0zDqFPfwCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B01-47-30.png]
[https://2.bp.blogspot.com/--
fdBy86c9yI/W0gvFglQW1I/AAAAAAAACtM/UGDOJeIYNscnrfhOR8_a_8Nz2EBBKtq2ACLcBGAs/s1600/Captura%2Bde%2Btela%
2Bde%2B2018-07-13%2B01-48-10.png]
Componentes renderizados.
Este service worked, na index.js, utiliza o cache para melhorar a experiência com a aplicação, em termos de
desempenho.
########################################################################
5.CSS
No app.css
rrGK1LruInE/W0g19CuvywI/AAAAAAAACtk/G9h3trjV2CIyJ7PK67d_sZdnESaLQxEnQCLcBGAs/s1600/Captura%2Bde%2Btela%2
Bde%2B2018-07-13%2B02-17-20.png]
b98dUxO2Pyk/W0g2Ex5EJFI/AAAAAAAACto/SDZoLOmPQLgcR62Vv1_ZM3FV7rHeX_qggCLcBGAs/s1600/Captura%2Bde%2Bt
ela%2Bde%2B2018-07-13%2B02-17-57.png]
Definição das áreas:
hYtaCQBvg5k/W0g3GDOl54I/AAAAAAAACt4/oMsWk6uMUWgxtlzcT741UxDPUjys0L0gACLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B02-22-09.png]
[https://3.bp.blogspot.com/-dXeBi_2ADbI/W0g3L9nfp3I/AAAAAAAACt8/0DS4i76EcTAJnm-
9Ihb63LySxVEI_u_1ACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B02-22-44.png]
Crie em src/assets/imgs e importe uma imagem para logo.O padrão svg é melhr que as extensões estáticas - n perde
resolução.
Abra o arquivo logo.jsx. Importe a imagem. Chame na tag na arrow function.

Se instalou o emmet no visual code, basta digitar isso e teclar em TAB par auto completar:
a.logo[href]
[https://2.bp.blogspot.com/-8QNbmcfwabw/W0g6lY1ZtKI/AAAAAAAACuM/g-lzLjL8SCYpUCw-
4C_X_IZaXurrq2B_gCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B02-37-02.png]
[https://1.bp.blogspot.com/-7fhGGCBICiQ/W0g6z_5XoqI/AAAAAAAACuQ/o5IcxExtxCwC3Rswxn3hURXQvcm7tzLFACLcBGAs/s1
logo.css
[https://1.bp.blogspot.com/-UN0yOaWIm1A/W0g7xU-
EIrI/AAAAAAAACug/qb42NqoUaeUpQTy_8e6OulxMNbDgdiU_QCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B02-42-03.png]
[https://4.bp.blogspot.com/-1qa9cly0kaw/W0g752H9anI/AAAAAAAACuk/KrqhrI-
ku9Mc19wOqUdVuINRCH74WvBOgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B02-42-48.png]
6. CABEÇALHO
Importando dependenias para app.jsx
DymfZ9T_WxA/W0kkBguWygI/AAAAAAAACu0/LlyafmBJJkgt0B6RsPQTaxxyiMhkfxJxQCLcBGAs/s1600/Captura%2Bde%2Btela%
2Bde%2B2018-07-13%2B19-12-51.png]
Caso o bootstrap esteja dando erro na importação:
npm install bootstrap --save

npm install font-awesome --save
Passando as propriedades para o header
[https://1.bp.blogspot.com/-9R3qbAs8tHY/W0kkRWXhoLI/AAAAAAAACu4/LNXoSCL8O7M05bRi5z3fYhwuUigGSLoRQCLcBGAs/
s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B19-13-57.png]
d-nome //usamos para responsividade do header display-none
d-sm-flex //display em uma flexbox para pequenos, médios e disposiivos extragrandes
fscPjcP3SBQ/W0koaJxh7_I/AAAAAAAACvk/FaeLSfCXO6EMWR686sLs9vG9cO_UflOSgCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B19-31-51.png]
em app.jsx
<Main icon="home" title="Início" subtitle="CRUD PROJECT"/>
Esse conteúdo esta sendo passado para
<i className={`fa fa-${props.icon}`}>
<p className="lead text-muted">{props.subtitle}</p>
Isso para ter flexibilidade. Renderizando.

text-muted [https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp]
tpxiDdlkHZw/W0kohDW8djI/AAAAAAAACvo/Sz1NR90Pu6kH7bNLfESendVFA_2DeEieACLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B19-32-24.png]
Supomos que você use outra fonte de ícones que não seja fontawesome. Por isso a propriedade é dinâmica e não
fixa. Você poderia deixar toda sintaxe dinâmica.
header.css
[https://3.bp.blogspot.com/-UELeIXjFOjU/W0krd-e4jPI/AAAAAAAACv0/uV-
m5OlMqPctJhjlEkeNa44nXMWbOLV9QCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B19-44-49.png]
[https://4.bp.blogspot.com/-Xbh-
yfk7u58/W0krlC87CqI/AAAAAAAACv4/3TZeoBf7Dgw98Nc8aWyaeFiOoqLY0SPWgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bd
e%2B2018-07-13%2B19-45-25.png]
##########################################
7. FOOTER
footer.jsx e footer.css
[https://2.bp.blogspot.com/-4kkoAMT0pwk/W0kvuMM_JiI/AAAAAAAACwI/C-
DRNywbuicCJFxTtYCQG7NjzMBmxWEYgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-02-55.png]
jffTwvSqfmk/W0kv1VpsnZI/AAAAAAAACwM/Gw4kl8QzFPk1InHqi5ZaGI96oudUNU4FwCLcBGAs/s1600/Captura%2Bde%2Btela%
2Bde%2B2018-07-13%2B20-03-34.png]
[https://1.bp.blogspot.com/-k-cCFRloY0Y/W0kv9MYVIMI/AAAAAAAACwQ/g7FdcSK5dl84zm8-
oVX6cVnEPTg1wolswCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-04-07.png]
########################################
8. NAVEGAÇÃO
nav.jsx e nav.css
wZXOW3s4j5A/W0kzbMKJTBI/AAAAAAAACwk/q7W9Q3_dHxIaXhyhUqQARxNk1QKwrrVOACLcBGAs/s1600/Captura%2Bde%2
Btela%2Bde%2B2018-07-13%2B20-18-45.png]
[https://2.bp.blogspot.com/-G78db-z2ltg/W0k0Wa-B99I/AAAAAAAACw4/plaE-
u_YGJIt1HGyRQZOnY_Yir9XP7hMQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-22-53.png]
[https://2.bp.blogspot.com/-tACyl_KuKvg/W0kzj9PuFnI/AAAAAAAACwo/ukdkqZmFd-YAnt3u-
PEIsqHWaA9CykNXQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-19-28.png]
####################################
9-CONTEÚDO
main.jsx
Vamos iniiar a criação dos filhos.
[https://4.bp.blogspot.com/-zOhAC6n7aKo/W0k1uSXpArI/AAAAAAAACxE/M-
WTl9R7cAwsu5MasK4YfNOxYabkBJNiQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-28-23.png]
main.css
[https://1.bp.blogspot.com/-mWWIZ-K76ag/W0k12B_ysTI/AAAAAAAACxI/GPaOOvv71igw0Nze_hOEHzVt0XHVORF-
ACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-29-12.png]
app.jsx
[https://1.bp.blogspot.com/-yDnkK5R8v7o/W0k1-
UIg0eI/AAAAAAAACxQ/DYQ2UqfHXL0BXnAXVtyrVgW5m29augxYwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-
07-13%2B20-29-48.png]
DASfDtCdrSE/W0k2GtoXWgI/AAAAAAAACxY/rCcXLr0qgVQlP0AVfnA3YfmQXNcFJFd3ACLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B20-30-20.png]
Crie um diretório em component chamado HOME.JSX

Importe o conteúdo de app.jsx para a home e chame a home no app.jsx
[https://3.bp.blogspot.com/-g_rb5boYtow/W0k3e-
X6HJI/AAAAAAAACxo/ceqWwEzo8b0rdCswtNe8taUBRbsRSzhPwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B20-35-34.png]
[https://1.bp.blogspot.com/-NjvzwxEKFvM/W0k3qtQxvUI/AAAAAAAACxs/EesG0Sc12-
o8xN20f_uwDmVuOz1ziMDuACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B20-36-59.png]
MANTEVE...
[https://1.bp.blogspot.com/-2Maq4eWoLcY/W0k3xhBT7RI/AAAAAAAACx0/d0tbohOmgHY1IkeyrMUXmxaKFpxJw2vBgCLcBGAs/s
###############################
10. COMPONENTE #2 - Roteamento
Crie no diretório component uma pasta "user". Dentro dela user-crud.jsx
WEaUG5ju7Xs/W0k52vQjjPI/AAAAAAAACyE/yHJN7QcbdJMQHzjswKvtNH5PRHOZ3t45ACLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B20-45-52.png]
Dentro de main crie o react router "routes.jsx" Leia a documentação. [https://reactjs.org/community/routing.html]

Dentro do arquivo importe as dependências para criarmos o roteamento
import React from 'react'
import { Switch, Route, Redirect } from 'react-router'
import Home from '../components/home/home'
import UserCrud from '../components/user/user-crud'
depcvAr1siU/W0k9YEOMNVI/AAAAAAAACyY/hkI1wfAH1qsy_hd9LyVdNakfuyhmn5FBgCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B21-01-20.png]
A "/" chama o componente home.

"/users" chama o componente user-crud
Caso seja uma url não declarada "*" redireciona para "/" raiz.
[https://4.bp.blogspot.com/-huGs8Jks61s/W0k9-
WmzNpI/AAAAAAAACyg/0cobsh5f_xYYbIZAPhymdFlnzR1Ski2jgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B21-03-53.png]
REFATORE o nav.jsx
[https://2.bp.blogspot.com/-uPMY66Axboc/W0k-
wM11z7I/AAAAAAAACyo/6kSG4AejKQc6FJsEUWEpRla9BGDsCfqhgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-
07-13%2B21-07-03.png]
REFATORE logo.jsx
[https://3.bp.blogspot.com/-IX4mw71ep-
g/W0k_R_yMJgI/AAAAAAAACy0/w9bht4O9Z3YzPZLBFiGdnF2tH79u7KTvQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B
2018-07-13%2B21-09-20.png]
#########################################
11.CADASTRO DE USUÁRIO
EM user-crud.jsx, vamos importar as dependencias, criar o estado inicial do objeto que iremos trabalhar, criaremos a
url da API (ws) que trabalha com a user.
[https://1.bp.blogspot.com/-dpibQ5Y442w/W0lFxznuD3I/AAAAAAAACzA/cbnEtZCtcuUNcHgBaz4QvYR0EDx2w-
uqgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B21-36-26.png]
[https://3.bp.blogspot.com/-3wEBMUi3Jtk/W0lF6F4OjII/AAAAAAAACzE/Y5KNeKV7axYN5UXnwFduaW4Rxr8OqeeOQCLcBGAs/s
update
[https://2.bp.blogspot.com/-xnrm4HBJDwc/W0lK1qIN1eI/AAAAAAAACzU/KQHetDi2pGcGu1avSKhtCfDTpwzVaNw-
QCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B21-58-42.png]
form
[https://1.bp.blogspot.com/-ZGlIZkjaH-
w/W0lK_hoflfI/AAAAAAAACzY/RldX37Exem0ADmX9ek4tan50CuY4JCIeACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B20
18-07-13%2B21-59-23.png]
chamando no render principal
[https://1.bp.blogspot.com/-Mg-BOMP4-kg/W0lMR-
oCRsI/AAAAAAAACz4/S_Ld6g3WBEQO4ZAf88InAH1layBfP9hvgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
13%2B22-04-57.png]
Rnderizando
nKWlWk6You4/W0lLRj0dueI/AAAAAAAACzo/FUgxBXnNducF2GHtrANGNN8y8HAZMMZvwCLcBGAs/s1600/Captura%2Bde%2Bt
ela%2Bde%2B2018-07-13%2B22-00-40.png]
Preencha com dados, salve e verifique o arquivo db.json
[https://1.bp.blogspot.com/-R8h6SrMJbtU/W0lMXexLL5I/AAAAAAAACz8/4V2XR7T0ztwQ-
fSZsQOFmXDDy7QYoKfxgCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B22-04-29.png]
[https://1.bp.blogspot.com/-Kr-
NCJdN61k/W0lMiQM5x0I/AAAAAAAAC0E/M_CuKo57uvEqMtVQnfrvOIRHZEuZ_EM_wCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-13%2B22-06-00.png]
O dado foi persistido

#############################################
11. ALTERAÇÃO E EXCLUSÃO
user-crud.jsx
[https://3.bp.blogspot.com/-5mon97mKdiU/W0lPywq1SpI/AAAAAAAAC0c/Lbn84hyaOts0Xs4k58AE5JpSehTfIKRvgCLcBGAs/s160
insra o console.log para você visualizar.

Renderize e abra o "inspecionar elemento no seu browser. CLique em console
NtNemnelIYM/W0lQF0vStcI/AAAAAAAAC0k/kLzvw26fxAQoTI3ed48AHPNB2meM_pNmgCLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B22-20-39.png]
[https://2.bp.blogspot.com/-Gn7J_V5XtJE/W0lQRNiIWVI/AAAAAAAAC0o/Gb7vSw8daQEH-
v_UyrlUyo26plj6hOergCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B22-21-57.png]
Estamos obtendo a lista do que esta cadastrado. Vamos inserir esses dados numa tabela: lista de usuários
Série de edição e lista
[https://1.bp.blogspot.com/-BJVMRgIZZx8/W0lVhgi7CZI/AAAAAAAAC04/btCBZ7D7rLMiF1PQMZxk0I0_ds2WX-
TLwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B22-44-16.png]
KaEqLvyUSYI/W0lXTK5mz5I/AAAAAAAAC1w/NPaLdXx2PoQA0tPJhqXioU72K4X17AeqgCLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B22-51-57.png]
Chamada na render principal
PU8CmkfSenM/W0lV0DXRIPI/AAAAAAAAC1E/JbS62qvJ5Pshfdt7kojtAWCOzy4EwUAgQCLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B22-45-33.png]
Renderizando
[https://2.bp.blogspot.com/-7qZInJCMJ2M/W0lV7cc7vmI/AAAAAAAAC1M/mjSP5OqzzPcYt77LVm3AJIwWMSGO4Rv4QCLcBGAs/
s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-13%2B22-46-07.png]
1. clique em alterar e mude um dado. Salve

EU cliquei em silvia (edite)
NezvmvxGZr8/W0lWPIwOg3I/AAAAAAAAC1Y/r6iRBnpGmCAYRIsGp6YKKMXPNWV96CsrgCLcBGAs/s1600/Captura%2Bde%2B
tela%2Bde%2B2018-07-13%2B22-47-18.png]
Ao salvar..
A lista deixa-a em primeira posição
cknTPhoiIyM/W0lWaCFysCI/AAAAAAAAC1c/R0cZSGisG1k8hbCdmMR96ruc_1QJm3fGgCLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-13%2B22-48-03.png]
Ao clicar em excluir
C23Ld8AuFiw/W0lXFhNYp_I/AAAAAAAAC1s/vKN0LnROg4ssjwE6b8bPbIbjWtBlbRecgCLcBGAs/s1600/Captura%2Bde%2Btela%
2Bde%2B2018-07-13%2B22-50-50.png]
#################################
Caso queira experimentar o react acoplado no Laravel.
php artisan preset react

npm install && npm run dev
siga o restante neste blog [http://resources/assets/js/]
##################################
REST FULL LARAVEL
Crie um banco de dados no seu mysql com o nome react. O que uso como ambiente de homologação é o
phpmyadmin.
[https://2.bp.blogspot.com/-ohs3_thyd10/W0rG9k-
RhyI/AAAAAAAAC2Y/jxLbTKe4XHAC1ovhUkgGrEdmwQnoRvrowCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-
15%2B00-59-54.png]
Criando projeto Laravel

composer create-project laravel/laravel api-rest --prefer-dist
Configure seu .env.

Obs: Se você não usar o comando acima, que já cria o projeto, vai precisar renomear este arquivo e executar php
artisan key:generate
[https://2.bp.blogspot.com/-J6oh0fYX-
5w/W0rHoRuwV_I/AAAAAAAAC2g/mVG8AYU2UNcs6r5S0QmhlWFXilv72Lj_wCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2
B2018-07-15%2B01-03-12.png]
Criando as tabelas.
Obs: estou usando o default. Caso queira integrar, basta configurar o database/migrations
php artisan migrate
Criando o seeder
php artisan make:seeder UsersTableSeeder
Conteúdo:
[https://2.bp.blogspot.com/-1BTvH4YxTn0/W0rGFYJy59I/AAAAAAAAC2E/T-9ok3x5q8Ib23jQy-
ef3N36M8awGS4wQCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B00-56-52.png]
Habilitando o seeder
svfGDXg0Xr8/W0rGdyTsqkI/AAAAAAAAC2M/A9Oa8pLxYPwBB0a0qS0QBWIaxzE5hf2xgCLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-15%2B00-57-37.png]
/Rondando o comando para gravação de dados no banco

php artisan db:seed
Conteúdo gravado
[https://2.bp.blogspot.com/-m9g8D4-6kU0/W0rIQah795I/AAAAAAAAC2o/D50d5grQzpM5Ypgi6iwtj0MDPe-
ZTx9qwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B01-05-55.png]
Criando a API
v47y81ZdMfQ/W0rI38nHLuI/AAAAAAAAC2w/m2cy4tzlkdQH8MS58D6HPAgK438afCB3gCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-15%2B01-08-47.png]
Rode o servidor php artisan serve.

Acesse a url : localhost:8000/api/user.
G9z7wmWm6fE/W0rJXaD7wiI/AAAAAAAAC24/NEc7bkWHFzQBt4TZC93UrjcPkToRN67AwCLcBGAs/s1600/Captura%2Bde%2Bt
ela%2Bde%2B2018-07-15%2B01-10-56.png]
Vá no seu arquivo user-crud.jsx, react, e mude a url e rode o sistema apenas do frontend: npm start
[https://1.bp.blogspot.com/-aBNZai2niXY/W0rJwUO5H8I/AAAAAAAAC3E/S0t6OIa-
ulQzlDR80muuXN093R6G4dsfwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B01-12-34.png]
Abra o inspector o seu browser.. E...
oWlHuB5gzoY/W0rKCwprkRI/AAAAAAAAC3M/8V4x9s1bUvMk7PKc4wwQCxSpropkdsEnACLcBGAs/s1600/Captura%2Bde%2Bt
ela%2Bde%2B2018-07-15%2B01-13-44.png]
Temos aí um erro de CORS, ou, ao acessar recursos de informações cruzadas precisamos de um cabeçalho no
header seja habilitado - Access-Control-Allow-Origin - de forma que as informações transitem com segurança.
Instale este recurso no laravel: https://github.com/barryvdh/laravel-cors [https://github.com/barryvdh/laravel-cors]
Após instalação e configuração, add na api esta chamada:
[https://2.bp.blogspot.com/-7gwA0Lz-Vfs/W0rLDTyuAXI/AAAAAAAAC3Y/o0tAM7EZpc0Q9nRdZrWDHJ7mY-
vOhlppwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B01-18-04.png]
ALém disso, adicione a permissão de acesso cors no react para o axios (ajax) para requisição getter:
crossdomain: true
XmIZohXm3bs/W0rLWaIofpI/AAAAAAAAC3g/FH2ixEgiX6Iv3OH43DeOw1mbqsAc2SvPQCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-15%2B01-18-52.png]
Vá para a url e dê um reflesh (F5)
nTHTIrSetWk/W0rLoIBdxWI/AAAAAAAAC3o/T2XeO1p7LFkr0K4gewCUqOVQ883qzzaWACLcBGAs/s1600/Captura%2Bde%2Btel
a%2Bde%2B2018-07-15%2B01-20-34.png]
Vamos acertar este warning...

Troque a ordem a tbody, eu fechei no lugar errado...
_SMsRmsuDoM/W0rSIv0e1pI/AAAAAAAAC30/QzGjrOJZDlQLgNx4r1IoOigfnf5oBW3qwCLcBGAs/s1600/Captura%2Bde%2Btela
%2Bde%2B2018-07-15%2B01-47-55.png]
Por...
[https://1.bp.blogspot.com/-rVqPqkcZxLo/W0rSWBrmd9I/AAAAAAAAC34/-GzxxT_RLIcw4uYxdX36A1jqAT-
kEfT4ACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B01-49-15.png]
Pronto...
[https://2.bp.blogspot.com/-KbytCfA60UI/W0rSeRuxApI/AAAAAAAAC4A/uvVY6RfAsMcm-VdXUXnTBMa9-
2_rFsmvACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B01-49-44.png]
A API com CORS, ficará assim - modelo default (sem uso dos controllers).
Como se trata de apenas um exemplo, não foi entrar nas validações de campo. EU costumo utilizar as rules padrões
e crio conforme minha necessidade... Da uma olhada na documentação do Laravel para rules - se realmente for
aprofundar nisso.
Outra coisa, como se trata e um WS, o correto é inserir autentificação. Ou seja, para essas mudanças, ser preciso
que o usuário log no sistema para habilitar o _token para uso.
Depois passo alguns exemplos.
[https://2.bp.blogspot.com/-BqcpZz1Py54/W0teKU6kd9I/AAAAAAAAC5M/RKEvwYXQZsYmlr9qBB39kmURkYEHwSj-
wCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-45-30.png]
COnfig..
[https://4.bp.blogspot.com/-9bQsc6LsVUA/W0tblHDviHI/AAAAAAAAC5A/XZLLsLWu3BwjCIlQ72VTaSZJdVIOTKUxQCLcBGAs/s16
Renderizando
[https://3.bp.blogspot.com/-O_0k4cXtEG4/W0tXwbWsYOI/AAAAAAAAC4U/3Ot-0TOABGQLLCYfZZoStHi-
Rxgo8nQCwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-18-26.png]
[https://4.bp.blogspot.com/-ZllKHxtdocU/W0tX68tbTfI/AAAAAAAAC4c/aq4GYQrrKcg5X7_ajtP6okPakkuZsg-
egCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-19-08.png]
Edição
[https://4.bp.blogspot.com/-8xhkIN0djxQ/W0tYGMqUhoI/AAAAAAAAC4k/nznyDFO_JDAskWbh_IImpwRoMcXRfGzBACLcBGAs/s
[https://3.bp.blogspot.com/-s6H-77bI5w0/W0tYOlg9yAI/AAAAAAAAC4o/Ho-T-
E4w4SIitnBPyg5hyFxO3ZygHiKPwCLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-20-26.png]
Reflesh
[https://3.bp.blogspot.com/-OUCeL6l3aQU/W0tj2dLoeyI/AAAAAAAAC5k/Uwwp4VOsSD85zb5Ihde8venjVs-
ru4BTACLcBGAs/s1600/Captura%2Bde%2Btela%2Bde%2B2018-07-15%2B11-52-33.png]
QqJuHYwboIY/W0tkBuR9XPI/AAAAAAAAC5o/uVO5NmVzBpkADwO7yMTsn0tBem1ERjwXACLcBGAs/s1600/Captura%2Bde%2B
tela%2Bde%2B2018-07-15%2B12-09-32.png]
É isso aí senhores. A partir dessa informação vc já pode fazer milagres. Basta inserir os demais métodos.
AGORA VC JÁ POSSUI UM "NORTE"
GITHUB [https://github.com/EuFreela/React-Backend-Frontend-LaravelWS]
Posted 12th July 2018 by Ciência da Computação - JokerHat
1 View comments
waltim 13 de maio de 2020 12:09

preciso de um programador para finalizar um projeto, tem interesse?
Reply
Digite seu comentário...
Comentar como: hernandmina@ Sair
Publicar Visualizar Notifique-me

ReactJs - CRUD - Ciência Da Computação

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

ReactJs - CRUD - Ciência Da Computação

Enviado por

Direitos autorais:

Formatos disponíveis

1/7/2021 ReactJs - CRUD | Ciência da Computação

12th July 2018 ReactJs - CRUD

Atualizando aos poucos:

Obs: O layout aqui, pelo amor de Deus, é só um exemplo didático.

veja a versão do seu: node -v

2.1. INSTALAÇÃO DO JSON-SERVER

3.2. ALTERE O PACKERGE.JSON

Obs: deixe esse terminal aberto e abra outro

Saia da pasta "backend", cd..

NO packeger.json do projeto frontend, precisamos instalar as dependencias:

"axios":"0.18.0", //utilizaremos chamadas em ajax

"bootstrap":"4.1.1", //framework css

"font-awesome":"4.7.0", //font de icones free

"react-router":"4.2.0",//vamos rotear os links das paginas

Para instalar as dependências:

Após teste com npm start no frontend.

Temos abaixo nossas duas aplicações: frontend e backend.

Em frontend/src, crie a pasta components/tempate

Crie os componentes para template, header.css e header.jsx

Componentes nav.css e nav.jsx

O árbitro (delegate) "main"

COnfigure a index.js na referencia ao .app. Já apaguei os arquivos desnecessários.

Definição das áreas:

Abra o arquivo logo.jsx. Importe a imagem. Chame na tag na arrow function.

Caso o bootstrap esteja dando erro na importação:

npm install bootstrap --save

Passando as propriedades para o header

d-nome //usamos para responsividade do header display-none

d-sm-flex //display em uma flexbox para pequenos, médios e disposiivos extragrandes

<Main icon="home" title="Início" subtitle="CRUD PROJECT"/>

Esse conteúdo esta sendo passado para

<i className={`fa fa-${props.icon}`}>

<p className="lead text-muted">{props.subtitle}</p>

Isso para ter flexibilidade. Renderizando.

Crie um diretório em component chamado HOME.JSX

10. COMPONENTE #2 - Roteamento

Crie no diretório component uma pasta "user". Dentro dela user-crud.jsx

Dentro de main crie o react router "routes.jsx" Leia a documentação. [https://reactjs.org/community/routing.html]

import React from 'react'

import { Switch, Route, Redirect } from 'react-router'

import Home from '../components/home/home'

import UserCrud from '../components/user/user-crud'

A "/" chama o componente home.

chamando no render principal

Preencha com dados, salve e verifique o arquivo db.json

O dado foi persistido

11. ALTERAÇÃO E EXCLUSÃO

insra o console.log para você visualizar.

Série de edição e lista

Chamada na render principal

1. clique em alterar e mude um dado. Salve

Caso queira experimentar o react acoplado no Laravel.

php artisan preset react

siga o restante neste blog [http://resources/assets/js/]

Criando projeto Laravel

Configure seu .env.

/Rondando o comando para gravação de dados no banco

Rode o servidor php artisan serve.

Abra o inspector o seu browser.. E...

Instale este recurso no laravel: https://github.com/barryvdh/laravel-cors [https://github.com/barryvdh/laravel-cors]

Após instalação e configuração, add na api esta chamada:

Vá para a url e dê um reflesh (F5)

Vamos acertar este warning...