Skip to content

Commit

Permalink
Aula02 react
Browse files Browse the repository at this point in the history
  • Loading branch information
@glaubermarcelino
glaubermarcelino committed May 29, 2020
1 parent 9630e04 commit ae57724
Show file tree
Hide file tree
Showing 27 changed files with 481 additions and 121 deletions.
44 changes: 44 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules
node_modules

# profiling files
chrome-profiler-events.json
speed-measure-plugin.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db
44 changes: 44 additions & 0 deletions fundamentos-react/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules
node_modules

# profiling files
chrome-profiler-events.json
speed-measure-plugin.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db
4 changes: 4 additions & 0 deletions fundamentos-react/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.App{
display: flex;
flex-direction: column;
}
.Cards{
display: flex;
flex-wrap: wrap;
}
92 changes: 64 additions & 28 deletions fundamentos-react/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,76 @@
import './App.css'
import React from 'react'
import Primeiro from './basicos/Primeiro'
import "./App.css";
import React, { useState } from "react";
import Primeiro from "./basicos/Primeiro";

import ComParametro from './basicos/ComParametro'
import ComFilhos from './basicos/ComFilhos'
import Card from './components/layout/Card'
import Repeticao from './basicos/Repeticao'
import Condicional from './basicos/Condicional'
import CondicionalComIf from './basicos/CondicionalComIf'
import ComParametro from "./basicos/ComParametro";
import ComFilhos from "./basicos/ComFilhos";
import Card from "./components/layout/Card";
import Repeticao from "./basicos/Repeticao";
import Condicional from "./basicos/Condicional";
import CondicionalComIf from "./basicos/CondicionalComIf";
import Switch from "./components/switch/Switch";
import Pai from "./components/comunicacao/direta/Pai";
import Super from "./components/comunicacao/indireta/Super";
import Input from "./components/form/Input";
import Contador from "./components/contador/Contador";
import MegaSena from "./components/comunicacao/megasena/MegaSena";

export default props =>(
export default (props) => {
const [value, setValue] = useState(false);

return (
<div className="App">
<Card titulo="#01 - Primeiro Componente">
<Primeiro/>
<h1>Fundamentos React</h1>
<div className="Cards">
<Card titulo="#01 - Primeiro Componente" color="#E94C6F">
<Primeiro />
</Card>
<Card titulo="#02 - Componente Com Parametro">
<ComParametro titulo="Meu titulo" subtitulo="Meu subtitulo component"/>
<Card titulo="#02 - Componente Com Parametro" color="#FA6900">
<ComParametro
titulo="Meu titulo"
subtitulo="Meu subtitulo component"
/>
<Switch
isOn={value}
onColor="#06d6a0"
handleToggle={() => setValue(!value)}
/>
</Card>
<Card titulo="#03 - Componente com Filhos">
<ComFilhos>
<Card titulo="#03 - Componente com Filhos" color="#E8B71A">
<ComFilhos>
<ul>
<li>Ana</li>
<li>Bia</li>
<li>Carlos</li>
<li>Daniel</li>
<li>Ana</li>
<li>Bia</li>
<li>Carlos</li>
<li>Daniel</li>
</ul>
</ComFilhos>
</ComFilhos>
</Card>
<Card titulo="#04 - Repetição - Listagem de dados" color="#D96459">
<Repeticao />
</Card>
<Card titulo="#05 - Condicional" color="#FFC33C">
<Condicional numero={105} />
</Card>
<Card titulo="#06 - Condicional Com IF" color="#DC403B">
<CondicionalComIf numero={10} />
</Card>
<Card titulo="#07 - Comunicação Direta" color="#DC403B">
<Pai />
</Card>
<Card titulo="#08 - Comunicação Indireta" color="#78C0A8">
<Super sobrenome="Santos" />
</Card>
<Card titulo="#04 - Repetição - Listagem de dados">
<Repeticao/>
<Card titulo="#09 - Input" color="#FF432E">
<Input />
</Card>
<Card titulo="#05 - Condicional">
<Condicional numero={105}/>
<Card titulo="#10 - Contador"color="#9B539C">
<Contador passo={10} valor={100} />
</Card>
<Card titulo="#06 - Condicional Com IF">
<CondicionalComIf numero={10}/>
<Card titulo="#11 - Gerador MegaSena"color="#260126">
<MegaSena qtddeNumero={8}></MegaSena>
</Card>
</div>
</div>
)
);
};
13 changes: 6 additions & 7 deletions fundamentos-react/src/basicos/ComFilhos.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react'
import React from "react";

export default props =>
<div>
export default (props) => (
<div>
<h2>Os Filhos:</h2>
<div>
{props.children}
</div>
</div>
<div>{props.children}</div>
</div>
);
13 changes: 7 additions & 6 deletions fundamentos-react/src/basicos/ComParametro.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react'
import React from "react";

export default props =>
<>
<h3>{props.titulo}</h3>
<p>{props.subtitulo}</p>
</>
export default (props) => (
<>
<h3>{props.titulo}</h3>
<p>{props.subtitulo}</p>
</>
);
21 changes: 9 additions & 12 deletions fundamentos-react/src/basicos/Condicional.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React from 'react'
import React from "react";

export default props => {
return (
<div>
<h2>O número é {props.numero}</h2>
{props.numero % 2 === 0
?<span>Par</span>
:<span>Impar</span>
}
</div>
)
}
export default (props) => {
return (
<div>
<h2>O número é {props.numero}</h2>
{props.numero % 2 === 0 ? <span>Par</span> : <span>Impar</span>}
</div>
);
};
30 changes: 15 additions & 15 deletions fundamentos-react/src/basicos/CondicionalComIf.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React from 'react'
import React from "react";

import If from './If'
import If from "./If";

export default props => {
return (
<div>
<h2>O número é {props.numero}</h2>
<If test={props.numero % 2 === 0}>
<span>Par</span>
</If>
<If test={props.numero % 2 === 1}>
<span>Impar</span>
</If>
</div>
)
}
export default (props) => {
return (
<div>
<h2>O número é {props.numero}</h2>
<If test={props.numero % 2 === 0}>
<span>Par</span>
</If>
<If test={props.numero % 2 === 1}>
<span>Impar</span>
</If>
</div>
);
};
18 changes: 7 additions & 11 deletions fundamentos-react/src/basicos/If.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
export default function(props)
{
if(props.test)
{
return props.children
}
else
{
return false;
}
}
export default function (props) {
if (props.test) {
return props.children;
} else {
return false;
}
}
19 changes: 9 additions & 10 deletions fundamentos-react/src/basicos/Primeiro.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React from 'react'
import React from "react";

function Primeiro(){
return (
<div>
<h1>Primeiro componente</h1>
<h2>Exemplo de componente React</h2>
</div>
)
function Primeiro() {
return (
<div>
<h1>Primeiro componente</h1>
<h2>Exemplo de componente React</h2>
</div>
);
}


export default Primeiro
export default Primeiro;
37 changes: 19 additions & 18 deletions fundamentos-react/src/basicos/Repeticao.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import React from 'react'
import produtos from '../data/produtos'
import React from "react";
import produtos from "../data/produtos";

export default props =>{
function getProdutosListItem(){
return produtos.map(prod=>{
return <li key={prod.id}>
{prod.id} - {prod.nome} -> R$ {prod.preco}</li>
})
}
return (
<div>
<h2>Repetição</h2>
<ul>
{getProdutosListItem()}
</ul>
</div>
)
}
export default (props) => {
function getProdutosListItem() {
return produtos.map((prod) => {
return (
<li key={prod.id}>
{prod.id} - {prod.nome} -> R$ {prod.preco}
</li>
);
});
}
return (
<div>
<h2>Repetição</h2>
<ul>{getProdutosListItem()}</ul>
</div>
);
};
7 changes: 7 additions & 0 deletions fundamentos-react/src/components/comunicacao/direta/Filho.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

export default (props) => (
<div>
<p>{props.children} {props.sobrenome}</p>
</div>
);
10 changes: 10 additions & 0 deletions fundamentos-react/src/components/comunicacao/direta/Pai.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from "react";
import Filho from "./Filho";

export default (props) => (
<div>
<Filho sobrenome="Marcelino">Glauber</Filho>
<Filho sobrenome="Silva" >Adriano</Filho>
<Filho sobrenome="Santos" >Gabriel</Filho>
</div>
);
Loading

0 comments on commit ae57724

Please sign in to comment.