Skip to content

Instantly share code, notes, and snippets.

View douglasabnovato's full-sized avatar
:octocat:
<Html/><Css/><Javascript/><ReactJS/>

Douglas Antonio Braga Novato douglasabnovato

:octocat:
<Html/><Css/><Javascript/><ReactJS/>
View GitHub Profile
{
"status":200,
"data":[
{
"id":1,
"name":"John Doe",
"age":20
}
]
}
{
"status":200,
"data":[
{
"id":1,
"name":"John Doe",
"age":20
},
{
"id":2,
render() {
return <img classBane="logo" src="logo.png" />
}
@douglasabnovato
douglasabnovato / modern_js.md
Created November 30, 2022 19:45 — forked from gaearon/modern_js.md
Modern JavaScript in React Documentation

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

  • We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
  • We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav
@douglasabnovato
douglasabnovato / index.html
Created October 28, 2022 13:24 — forked from gaearon/index.html
Add React in One Minute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
@douglasabnovato
douglasabnovato / index.html
Created October 28, 2022 13:24 — forked from gaearon/index.html
Multiple React components on a single HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
@douglasabnovato
douglasabnovato / minification.md
Created October 28, 2022 13:24 — forked from gaearon/minification.md
How to Set Up Minification

In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.

Here's one way to set it up:

  1. Install Node.js
  2. Run npm init -y in your project folder (don't skip this step!)
  3. Run npm install terser

Now, to minify a file called like_button.js, run in the terminal:

<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Inconsolata"
/>
<link rel="shortcut icon" href="./public/favicon.ico">
@douglasabnovato
douglasabnovato / useEffectComponentWillUnmount.jsx
Created September 5, 2022 12:33
Para execução equivalente ao componentWillUnmount, uma função que executa logo antes do componente sair da tela, vamos retornar uma função dentro do useEffect.
function App(){
useEffect(() => {
console.log("componente montou")
return () => console.log("componente vai desmontar...")
}, [])
}
@douglasabnovato
douglasabnovato / useEffectAllRender.jsx
Created September 5, 2022 12:29
Se quiser que esta função execute toda vez que o componente renderizar é só passar a função de efeito e não passar nada como segundo argumento do useEffect
function App() {
useEffect(() => {
console.log("componente renderizou novamente...")
})
}