Nota: o que estiver depois do igual coloque entre aspas
mas de vez em quando é opcional
Titulo= <h1> Y</h1>
uma linha = <hr>
sub título em ordem de maior para menor= <h2> Y</h2>
até <h6> Y</h6>
texto= <p> Y<p>
negrito= <strong> Y </strong>
aglomeramento de textos= <div> Y </div>
botar= <input type= Y>
tipo num= number
tipo botão= button
tipo texto= text
palavra no botão ou guardar resultados= value
fazer com que o input não possa ser enviado até que
seja preenchido= required
1
{ para assinalar apenas uma opção=
<label>
<input type= 'radio' name= 'indoor-outdoor'> o que
estará escrito
<input type= 'radio' name= 'indoor-outdoor'> o que
estará escrito
</label> }
Caixa onde pode selecionar múltiplas opções, talvez ter
que usar label= type= 'checkbox'
marcar por padrão= checked
exportar imagem= <img src= link>
caso a imagem não carregue, o que deve aparecer?=
<img src= “link” alt= “Y” >
carregar= onLoad
tabela= <select> </select>
linhas na tabela= size= Y
escrever na tabela= <option> Y </option>
2
comentário= <!-- Y -->
link= <a href= link> o que estará escrito </a>
para fazer um link com uma parte da página= <a href=
#ID> o que estará escrito </a>
criar uma lista com pontos=
<ul>
<li>o que estará escrito </li>
<li>o que estará escrito</li>
<li>o que estará escrito </li>
</ul>
{ criar uma lista com pontos numerados=
<ol>
<li>o que estará escrito </li>
<li>o que estará escrito</li>
<li>o que estará escrito </li>
</ol> }
botar um input no centro, com utilidade indefinida=
<form action= link>
</form>
3
Enviar dentro de um form= <button type= 'submit'> o
que estará escrito </button>
para de marcação pode ser usado= <head> Y </head>
/*e*/ <body> </body>
para dizer que é html5 se usa= <!DOCTYPE html>
tags html= <html> Y </html>
Como botar um áudio?=
<audio controls>
<source src='link' type='audio/tipo de audio'>
</audio>
para fazer uma legenda use= <legend> Y </legend>
como botar uma barra para botar uma data?= <input
type=’date’>
para dispositivos auxiliares acessarem a data se bota
ao redor dessa data=
<time datetime='ano-mês-dia'> data </time>
para linkar um botão a uma tecla se usa= <button /*ou
outra coisa*/ accesskey='tecla'>
4
{
para adicionar bootstrap = <link rel="stylesheet"
href="[Link]
[Link]"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4V
a+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
para dizer que deve ser fluido = class= ‘container-fluid’
para fazer a imagem ocupar no máximo o tamanho das
laterais = class = ‘img-responsive’
para centralizar = class =‘text-center’
estilo para botão = class='btn btn-default'
para adicionar o botão em 100% da linha adicione =
btn-block
para mudar a cor do botão para azul mude o btn-default
para = btn-primary
para botar um azul mais claro como cor do botão faça =
btn-info no lugar de btn-default
para botar um vermelho como cor do botão faça =
btn-danger no lugar de btn-default
para definir a largura em colunas de algo bote em uma
div col-tamanho-número de colunas sendo que os
tamanho pode ser xs → extra pequeno e md → médio
para aninhar as linhas bote = row
crie uma tabela = well
{
5
para acessar uma blibioteca de botoes = <link
rel="stylesheet"
href="[Link]
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+n
qUivzIebhndOJK28anvf" crossorigin="anonymous">
/*Nota: sempre se deve adicionar fa nas classes.*/
para adicionar um like dentro de algo bote uma class
com um <i> ou <span> = fa-thumbs-up
para adicionar um sinal de informação dentro de algo
bote uma class com um <i> ou <span> = fa-info-circle
para adicionar uma lixeira dentro de algo bote uma
class com um <i> ou <span> = fa-trash
para adicionar um avião = fa-paper-plane
}
{
jQuery
para adicionar o jquery bote um $ e tem que ser pelo
javascript botando o seguinte código entre as funções =
$(document).ready(function(){/*função*/})
para fazer algo pular = $(‘/*alguma comparação como
classe, id ou nome*/’).addClass('animated bounce')
para fazer algo se mexer = $('/*alguma comparação como
classe, id ou nome*/').addClass('animated shake')
para fazer algo desaparecer = $('/*alguma comparação
como classe, id ou nome*/').addClass('animated
fadeOut')
também se pode usar a classe do bootstrap na segunda
parte
6
para remover uma classe = $('/*alguma comparação como
classe, id ou nome*/').removeClass('/*o que ira
remover*/')
para modificar o css =
$("/*alguma comparação como classe, id ou
nome*/").css("/*modificador css*/", "/*o valor*/");
Para ativar ou desativar algo = $("/*alguma comparação
como classe, id ou nome*/").prop("/*modificador*/",
/*true ou false*/);
Para mudar o texto dentro de uma tag use o .html()
mara botar tags e o .text() para ele entender as tags
como letras
para remover um elemento completamente use
.remove()
para mover um elsemenatpp = $('/*alguma comparação
como classe, id ou nome*/').appendTo('/*alguma
comparação como classe, id ou nome*/')
Para clonar use .clone()
Para acessar o pai de algo use .parent()
Para transformar os filhos de um elemento use a função
.children()
Para acessar um filho específico =
$("/*classe*/:nth-child(/*número*/)")./*função*/
Para ‘derrubar’ algo use .addClass(‘animated hinge’)
}
{
Sass
7
Para fazer uma variavel no CSS faça =
$nome-da-variável: o valor
Para fazer uma função no CSS faça = @mixin nome da
função(variáveis que são opcionais){o código}
E quando for usar a função = @inclued nome da
função(possivel variável)
para botar um if faça = @mixin nome(variável) {
@if variavel == teste {
resultado
}
como usar o for = @for variavel from número inicial
through número final {
.col-#{variável} { dado utilizado com possível utilização
da variável }
}
Ex: @for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
Outro tipo de lope é = @each variável in dado, dado,...{
.#{variável}-text {valor: variável;)
}
Ex: @each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
8
loop com o while = @while variavel sinal número {
.nome-#{variável} { função }
adição da variável
}
Ex: $x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
Pra copiar as coisas de uma classe para outra se pode
utilizar de = @extend .classe
}
{
React
Para adicionar o JSX no html bote entre os bodys =
<script crossorigin
src="[Link]
<script crossorigin
src="[Link]
ipt>
<script
src="[Link]
E adicione no JS o type = type='text/babel'
O JSX sempre deve estar envolto de <div>
Para adicionar um comentário faça = {/* */}
9
Para criar uma function no JSX sempre o nome dela
deve começar com letra maiúscula e o return tem que
estar entre parênteses.
Outra forma de declarar uma variável e a tal utilizará o
ES6 = class nome extends [Link] {
constructor(props) {
super(props);
}
render(){
return(
a função
)
}
}
para mandar um componente com o ES6=
[Link](<variável />,
[Link](id de um HTML))
para definir algo como padrão= [Link] = {
nome2: valor
}
10
Para botar estado em um componente =
[Link] = { nome2: [Link]}
para definir um texto como diferente além de uma
função fora do constructor se deve botar = [Link]ção
= [Link]çã[Link](this)
para fazer a função bote entre o construtor e o render =
função{
[Link](state => ({
variável: [Link]ável função
}))
}
para acionar uma função conforme é escrito em uma
caixa de texto bote = onChange= {função}
se quiser jogar algo para outra função bote = <função
nome={dado} />
e para acessá la = {[Link]}
11
se você digitar event entre parênteses na função e
digitar no valor do objeto [Link] ele vai
receber o valor digitado
a seguinte função faz com que o componente carregue
depois de um tempo = componentDidMount() {
setTimeout(() => {
[Link]({
valor: valor-recebido
});
}, tempo em milissegundos(1000 = 1 segundo));
}
para ver se o novo props será aceito ou não, faça =
shouldComponentUpdate(nextProps, nextState) {
if([Link] função){
return true
}else {
return false
}
}
para botar um style direto na div faça = style={{nome:
‘dado’, nome2: ‘dado2’}}
12
para usar um ‘if/else’ mais simples faça = {condição &&
o que acontece}
Estratégia do ‘bigodinho’ =
{string${variavel}resto-da-string}
}
{
Redux
crie um estado= declaração-da-variável =
[Link](nome-da-função)
Para pegar o estado use = variá[Link]()
Para enviar função a um estado =
variá[Link](função(possivel-texto))
Para fazer uma função toda vez que outra é chamada
faça = variá[Link]()
Para combinar reducers faça =
[Link]({
chave: função,
chave2: função2
})
13
para adicionar o markdown ao seu código bote =
[Link]
/[Link]
[Link]
<script src="[Link]
Para selecionar a primeira tag que aparecer → variavel
= [Link]('valor da tag (ex: h1)’)
Para dar um texto a variável → variá[Link](‘texto’)
Para selecionar todas as tags → variável =
[Link]('valor da tag (ex: h1)’)
Para lidar com dados passados faça →
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
[Link]('h2').data(dataset).enter().append('h2').t
ext('New Title')
O .selectAll seleciona todos os elementos iguais ao que
foi escrito, mesmo que não existam, o .data lê a
variável, o .enter roda a quantidade de vezes que é
igual a todos os valores da variável, o append cria uma
tag básica e o text adiciona o texto
14
Para acessar o valor da variável faça → .text((variavel)
=> (variavel e possíveis outras coisas))
Para adicionar estilos → .style(‘palavra chave (ex:
color), valor (ex: blue))
Para adicionar class ou id a sua tag use → attr(‘class/id
(outros valores também são válidos)', ‘nome’)
Para adicionar um retângulo e definir suas direções e
tamanhos →
.append(react)
.attr(‘x’, num)
.attr(‘y’, num)
.attr(‘height’, num)
.attr(‘width’, num)
15
