Skip to content

Instantly share code, notes, and snippets.

View abelsan's full-sized avatar

abelsan

82 followers · 0 following
View GitHub Profile
@abelsan
abelsan / hello.js
Created February 12, 2020 14:26
A simple test of Gist
// a simple console write
console.log('Hello World')
@abelsan
abelsan / reactBootstrap.html
Created June 11, 2020 02:19
React +Bootstrap basic example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello World - React Boostrap link</title>
<!-- ----------------- React scripts ----------------- -->
<!-- React libraries -->
@abelsan
abelsan / twoReactComponents.html
Created June 11, 2020 02:21
Two react components
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello World - React Boostrap link</title>
<!-- ----------------- React scripts ----------------- -->
<!-- React libraries -->
@abelsan
abelsan / reactRouter.html
Created June 11, 2020 02:22
React router
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/react-router@5/umd/react-router.min.js'></script>
<script src='https://unpkg.com/react-router-dom@5/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
@abelsan
abelsan / hooks_hello.js
Created June 12, 2020 13:27
Hello World for react hooks
import React, { useState } from 'react';
import './App.css';
function Todo({todo,index}){
return <div className="todo">{todo.text}</div>
}
function TodoForm({addTodo}){
const [value,setValue] = useState('');
@abelsan
abelsan / index.html
Created August 10, 2020 23:10
Standalone React Component
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Testing React</title>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / clock.html
Created August 14, 2020 17:25
Clock using react
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / stats.html
Created August 15, 2020 22:01
Synchronization of data between parent and child react components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / many.html
Created August 15, 2020 23:40
synchronizing 3 children counters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / index.html
Created August 16, 2020 01:36
holding state in variable outside component
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>