msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Merge d838b9b570 into 09f408a1b7

Browse Source
pull/180/merge
TheInfernal7 7 months ago committed by GitHub
parent 09f408a1b7 d838b9b570
commit 565ec6de9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 622 additions and 0 deletions
Show Stats Download Patch File Download Diff File

77
02_Day_Introduction_to_React/index.html
Unescape View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>30 Days Of React Challenge</title>
</head>
<body>
<div class="root"></div>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Aqui se indicará el codigo React.
// Para obtener el elemento raiz del documento HTML
const rootElement = document.querySelector('.root');
// JSX elemento
/* const jsxElemento = <h1> Bienvendidos al Curso de React </h1> */
// Creamos el encabezado, cuerpo de la pagina y pie de la página.
// Para unirlos y poder mostrarlos podemos crear un elemento JSX que los envuelva a los tres o colocandolos en una matriz.
// Para envolverlos en un JSX usaremos los corchetes ({}) y llamaremos el elemento JSX dentro del mismo.
// Styles
const headerStyles = {
backgroundColor: 'red',
color: 'black',
}
// Información
const header = (
<header
style={headerStyles}
>
<h1> Bienvenido a 30 dias de react</h1>
<h2> Empezemos con React</h2>
<h3> JavaScript libreria</h3>
<p> Sergio García Pérez</p>
<small> Jun 23, 2022</small>
</header>
)
const main = (
<main>
<p> Prerequisitos para empezar con React</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</main>
)
const footer = (
<footer>
<p>Copyright 2022</p>
</footer>
)
const app = (
<div>
{header}
{main}
{footer}
</div>
)
// Renderizamos el elemento JSX usando el paquete ReactDOM
// ReactDOM tiene el método render y el método render toma dos argumentos.
ReactDOM.render(app, rootElement)
</script>
</body>
</html>

16
02_Day_Introduction_to_React/index.js
Unescape View File

@ -0,0 +1,16 @@
// JSX sintaxis
const jsxElement = <h1> Soy un elemento de JSX</h1>
const bienvenido = <h1> bienvenido a 30 dias de React Challenge</h1>
const data = <small> Jun 23, 2022</small>
const title = <h2> Comenzemos a aprender React</h2>
const header = (
<header>
<h1> Bienvenido a 30 dias de react</h1>
<h2> Empezemos con React</h2>
<h3> JavaScript libreria</h3>
<p> Sergio García Pérez</p>
<small> Jun 23, 2022</small>
</header>
)// Tiene que ir dentro de parentesis.

152
02_Day_Introduction_to_React/index2.html
Unescape View File

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>30 Days Of React Challenge</title>
<style>
/* Estilos generales */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
line-height: 1.5;
font-family: 'Montserrat';
font-weight: 300;
color: black;
}
.root {
min-height: 100%;
position: relative;
}
.header-style,
.main-style,
.footer-style {
width: 85%;
margin: auto;
}
.header-style,
.main-style {
padding: 10px;
margin: 2px auto;
}
h1 {
font-size: 70px;
font-weight: 300;
}
h2,
h3 {
font-weight: 300;
}
header {
background-color: #61dbfb;
padding: 10px;
}
main {
padding: 10px;
padding-bottom: 60px;
}
ul {
margin-left: 15px;
}
ul li {
list-style: none;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60%;
background: #6cf;
}
.footer-style {
font-weight: 400;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="root"></div>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Aqui se indicará el codigo React.
// Para obtener el elemento raiz del documento HTML
const rootElement = document.querySelector('.root');
// JSX elemento
/* const jsxElemento = <h1> Bienvendidos al Curso de React </h1> */
// Creamos el encabezado, cuerpo de la pagina y pie de la página.
// Para unirlos y poder mostrarlos podemos crear un elemento JSX que los envuelva a los tres o colocandolos en una matriz.
// Para envolverlos en un JSX usaremos los corchetes ({}) y llamaremos el elemento JSX dentro del mismo.
/*
Podemos realizar calculos aritmeticos y operaciones ternarias con la inyección.
const numero = 5
const numero2 = 5
const result = (
<p>
{numero} + {numero2} = {numero + numero2};
</p>
)
*/
// Styles
// Información
const welcome = 'Bienvenido a 30 dias de react';
const react = 'Empezemos con React';
const libreria = 'JavaScript libreria';
const autor = 'Sergio García Pérez';
const fecha = 'Jun 23, 2022';
const matriz = ['HTML','CSS','JavaScript'];
const header = (
<header>
<div className="header-style">
<h1>{welcome} </h1>
<h2>{react}</h2>
<h3>{libreria}</h3>
<p>{autor}</p>
<small>{fecha}</small>
</div>
</header>
)
const main = (
<main>
<div className="main-style">
<p> Prerequisitos para empezar con React</p>
<ul>{matriz}</ul>
</div>
</main>
)
const footer = (
<footer>
<div className="footer-style">
<p>Copyright 2022</p>
</div>
</footer>
)
const app = (
<div className='app'>
{header}
{main}
{footer}
</div>
)
// Renderizamos el elemento JSX usando el paquete ReactDOM
// ReactDOM tiene el método render y el método render toma dos argumentos.
ReactDOM.render(app, rootElement)
</script>
</body>
</html>

33
30DaysOfJS/index.html
Unescape View File

@ -0,0 +1,33 @@
<!--
Formas de agregar javascript a una web
- Guión en linea (EL Script va "en linea" con un elemento del html sin especificar que es un script)
- Guión interno (Aquí el script lo podemon incluir en la cabecera(head) o en el cuerpo(body). Tenemos que indicar que es un script con "<script></script>")
- Guión externo
- Múltiples scripts externos
-->
<!-- Guión en linea -->
<!DOCTYPE HTML>
<html>
<head>
<title>30DaysOfScripts:Inline Scripts</title>
<script>
console.log("Guión interno prueba");// Lo hemos localizado en el head del codigo
</script>
<script src="pruebas.js">
// Aqui traemos el script de un fichero externo y lo llamamos para que se ejecute.
</script>
</head>
<body>
<!-- Con la función alert() crearemos una alerta que aparecerá en pantalla, en este ejemplo se ejecutará al hacer click en el boton -->
<button onclick="alert('Bienvenido a 30 days of script!')">Click Aqui</button>
<script>
console.log("Guión interno prueba 2");// En este caso hemos introducido el script dentro del body
</script>
<div>
<script>
const PI = Math.PI
</script>
</div>
</body>
</html>

1
30DaysOfJS/pruebas.js
Unescape View File

@ -0,0 +1 @@
console.log("Guión externo");

14
RepasoJavaScript/index.html
Unescape View File

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Repaso de javascript</title>
<script src="repaso.js">
// Aqui traemos el script de un fichero externo y lo llamamos para que se ejecute.
</script>
<script src="repaso2.js";>
</script>
</head>
<body>
</body>
</html>

206
RepasoJavaScript/repaso.js
Unescape View File

@ -0,0 +1,206 @@
/*
Objeto matemático (SUS PROPIEDADES Y MÉTODOS)
*/
const PI = Math.PI // Declaramos la constante PI con el valor de PI
console.log(PI); // Mostramos por consola la variable PI
//Metodos de rendondeo de la función Math
console.log(Math.round(PI)); // Con round redondeas a la baja si el siguiente decimal es menor a 5 y a la alza si es mayor o igual 5, con PI = 3.141592653589 se redondea a 3
console.log(Math.round(9.81)); // Esta prueba es para mostrar el redondeo a la alza, como es 9,81 se pasa a 10
console.log(Math.floor(PI)); // Con floor siempre se redondea a la baja independientemente del valor de los decimales
console.log(Math.ceil(PI)); // Con ceil siempre se redondea a la alza, independientemente del valor de los decimales
console.log(Math.min(-5,3,20,25,5)); // Con min al pasarle un conjunto de numeros, este tomará el de menor valor, en este caso al haber un valor negativo este será tomando
console.log(Math.max(-5,3,20,25,5)); // Con max al pasarle un conjunto de numeros, este tomará el de mayor valor, en este caso será tomando como valor el 25
console.log(Math.abs(-15)); // Con abs el valor que le indiquemos lo pasará a absoluto, un positivo seguirá positivo y un negativo pasará a positivo
console.log(Math.sqrt(200)); // la función sqrt devuelve la raiz cuadrada del número que le indiquemos.
console.log(Math.pow(3,2)); // La base elevada a la exponente siendo pow(base, exponente)
console.log(Math.E); // Representa la base de los algoritmos naturales, e, aproximadamente 2,718
console.log(Math.log(2)); // Devuelve la base neutral de un número (base e)
console.log(Math.log(10));
console.log(Math.LN2); // Representa el algoritmo natural de 2, aproximadamente 0,693
console.log(Math.LN10); //Representa el algoritmo natural de 10, aproximadamente 2,302
Math.sin(0); // Devuelve el seno de un número
Math.sin(60); // Devuelve el seno de un número
Math.cos(0); // Devuelve el coseno de un número
Math.cos(60); // Devuelve el coseno de un número
console.log(Math.random()); // El método random, nos devolverá un valor aleatorio entre 0 y 0,99999999
// Si queremos un valor distinto aleatorio tendremos que hacer calculos con este método, ya sea multiplicar si valor por otro, o pudiendo
// usar los otros métodos para generar un valor.
// Aquí unos ejemplos:
const valor = Math.random();
console.log(valor * 5);
console.log(Math.floor(valor * 5));
console.log(Math.ceil(valor * 10));
/**********************************/
/*
Métodos de cadena
length: devuelve el número de caracteres de una cadena incluido los espacios.
Este método accede al indice de la cadena, este empieza en el 0. Aunque la cadena tenga un valor de 10 caracteres, estos van del 0 al 9
*/
let cadena = 'Hola a todos me llamo sergio';
let lista = 'España, Noruega, Finlancia, Francía, Alemania';
let js = 'JavaScript';
console.log(js.length);
let firtname = 'Sergio';
console.log(firtname.length);
//Probemos a acceder a distintos caracteres de las cadenas anteriores.
let PrimerLetra = js[0];
console.log(PrimerLetra); // Nos mostrará la letra J
let SegundaLetra = js[1]; // Para referirnos a un indice especifico usaremos los corchetes[]
let TercerLetra = js[2];
console.log('PrimerLetra: '+PrimerLetra+' '+'SegundaLetra: '+SegundaLetra+' '+'TerceraLetra: '+TercerLetra)
let Mayus = js.toUpperCase(); // toUpperCase transforma las letras de la cadena en Mayusculas.
console.log(Mayus);
let Minus = js.toLowerCase(); // toLowerCase transforma las letras de la cadena en Minusculas.
console.log(Minus);
let substraer = js.substring(0,4); // Toma dos argumentos, del indice primero y final, pero no se incluye el indice del final.
console.log(substraer); // Estamos extreyendo los 4 primeros caracteres, indicamos que empiece con el 0 = J y finalice en 4 = S, pero mostrará 'Java'.
// este metodo substring hace un lenght - 1 al final de forma predefinida.
/* El metodo split divide la cadena en un lugar específico, esto quiere decir que si no le indicamos ningun argumento al metodo este creara un array con valor unico
que será la cadena en cuestión.
Si la cadena es una palabra unicamente, si indicamos split('') esta creará un array en el que cada letra ocuperá un hueco del array.
Si la cadena es de una frase/oración, tendremos que indicar split(' ') para que cada palabra ocupe un hueco del array.
Si la cadena es un conjunto de elementos separados por comas a modo de lista, indicaremos split(',') para que nos cree un array de cada elemento.
*/
console.log(js.split()); // Array de un solo elemento.
console.log(js.split('')); // Array con cada letra de la variable ocupando un hueco.
console.log(cadena.split(' ')); // Array con cada palabra de la variable ocupando un hueco.
console.log(lista.split(',')); // Array con cada palabra de la lista ocupando un hueco.
// Usamos trim(), para quitar los espacios iniciales y finales de la cadena. Si es cadena compleja usamos trim(''), y si es simple trim().
let QuitarEspacioFin = ' Aqui se quita el espacio final ';
console.log(QuitarEspacioFin);
console.log(QuitarEspacioFin.trim(''));
// Usamos includes() para comprobar si una cadena contiene el argumento que nosotros le pasemos, si existe da un valor true, en caso contrario false.
// Este metodo es case sensitive, es decir, a de estar el argumento perfecto, si la palabra es igual pero con una minuscula dará false.
console.log(cadena.includes('Sergio'));
console.log(cadena.includes('sergio'));
// Usamos replace() para reemplazar una cadena antigua por una nueva, primero le pasamos el elemento antiguo, y después el nuevo.
// Ej. cadena.replace(oldcadena, newcadena): Este metodo tambien el case sensitive.
console.log(cadena.replace('sergio', 'juan'));
// Usamos charAt() para tomar el valor del indice.
let letra = cadena.length - 1;
console.log(cadena.charAt(0));
console.log(cadena.charAt(letra))
// Usamos charCodeAt() para conseguir el codigo char del valor del indice que le indiquemos.
console.log(cadena.charCodeAt(0));
console.log(cadena.charCodeAt(letra));
// Usamos indexOf() para conseguir la primera posición donde exita el elemento que le pasemos, este comprobará si existe, en caso de no existir no devolverá -1.
//
let NewCadena = '30 Dias de curso de JavaScript';
console.log(NewCadena.indexOf('D')); // Devolverá el valor 3 que es donde empieza el elemento.
console.log(NewCadena.indexOf('Dias')); // Devolverá el valor 3 que es donde empieza el elemento indicado.
console.log(NewCadena.indexOf('c')); // aqui devuelve el valor 11
// lastIndexOf() usa la misma logica que indexOf pero este nos dará el ultima posición donde aparezca el elemento dado. En caso de no encontrarse nos devolverá -1.
console.log(NewCadena.lastIndexOf('c')); // en cambio en este caso devuelve el valor 25
// Usamos concat() para unir varios elementos.
let string = '30';
console.log(string.concat('Days','Of','JavaScript'));
// Usamos startsWith() o endsWith() para comprobar si el argumento que le pasamos coincide con le inicio de la cadena o el final de la cadena.
// En caso de coincidir nos devolverá el valor booleano true, en caso de no coincidir nos devolverá el valor booleano false.
console.log(cadena.startsWith('Hola')); // Devuelve true
console.log(cadena.startsWith('hola')); // Devuelve false
console.log(cadena.endsWith('sergio')); // Devuelve true
console.log(cadena.endsWith('Sergio')); // Devuelve false
// search(): le pasamos un argumento de busqueda y este nos devolverá el índice de la primera coincidencia.
console.log(cadena.search('todos')); // indice 7
// match(): se le puede pasar el argumento de forma normal, o con un patrón de expresión. Si existe una coincidencia este devolverá una matriz, de lo contrario un
// valor nulo.
// Un patrón de expresión se indica de la siguiente manera.
let patron = 'love';
let patterOne = /love/;
let patterTwo = /love/gi; // el atributo 'g' sirve para que busque en todo el texto, el atributo 'i' no distingue entre mayusculas y minusculas.
let cadena2 = 'I love JavaScript. If you do not love JavaScript what else can you love.';
console.log(cadena2.match(patron));
console.log(cadena2.match(patterOne));
console.log(cadena2.match(patterTwo));
// repeat(): le pasamos un numero como argumento y este repetirá la cadena tantas veces como le indiquemos.
console.log(cadena.repeat(2)); // Aparecerá esto: Hola a todos me llamo sergioHola a todos me llamo sergio
/*
Comprobación de datos y conversión.
*/
let num = 0;
let afirmativo = true;
const Objeto = new Object();
console.log(typeof cadena); // string
console.log(typeof cadena2); // string
console.log(typeof num); // number
console.log(typeof afirmativo); // boolean
console.log(typeof Objeto); // object
// Para poder convertir un tipo de dato a otro tipo de dato tendremos que usar los siguientes metodos:
/*
-parseInt();
-parseFloat();
-Number();
- '+' signo.
- str();
*/
// Cualquier número dentro de comillas, es un numero de cadena. Si queremos pasar un numero_cadena a número usaremos lo siguiente:
let num1 = '10';
let num2 = '9.81';
let numInt = parseInt(num1);
let numInt2 = Number(num1);
let numInt3 = +num1;
let numFloat = parseFloat(num2);
let numFloat2 = Number(num2);
let numFloat3 = +num2;
console.log(num1); // string
console.log(numInt2); // convertido con Number()
console.log(numInt); // convertido con parseInt()
console.log(numInt3); // convertido con +
console.log(num2); // string
console.log(numFloat); // convertido con numFloat()
console.log(numFloat2); // convertido con Number()
console.log(numFloat3); // convertido con +
// Con parseInt podemos transforma un número flotante (9.10) a numero entero.

123
RepasoJavaScript/repaso2.js
Unescape View File

@ -0,0 +1,123 @@
/*
MATRICES
*/
// constructor de matrices
const arr = Array();
// or
// let arr = new Array();
console.log(arr); // []
// usando corchetes
const arr2 = [];
console.log(arr2); // []
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables
const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries
// Mostrar por pantalla los arrays y el tamaño de este
console.log('Numbers: ',numbers);
console.log('Numero de Numbers: ',numbers.length);
console.log('Fruits: ',fruits);
console.log('Numero de fruits: ',fruits.length);
console.log('vegetables: ',vegetables);
console.log('Numero de vegetables: ',vegetables.length);
console.log('AnimalProducts: ',animalProducts);
console.log('Numero de AnimalProducts: ',animalProducts.length);
console.log('webTechs: ',webTechs);
console.log('Numero de webTechs: ',webTechs.length);
console.log('countries: ',countries);
console.log('Numero de countries: ',countries.length);
// Podemos crear una matriz con diferentes datos dentro de la misma
const arr3 = [
'Sergio', // Strings
26, // Number
{ pais: 'España', ciudad: 'León'}, // array
{ skills: ['HTML', 'CSS','JS','React']} // array
];
console.log(arr3);
// Para acceder a cualquier dato dentro del array haremos uso de los indices. Como los arrays empiezan desde el 0 hasta el tamaño -1 el primer valor
// del array se encontrará en el indice 0.
console.log(numbers[2]); // Con esto accederemos al valor numero 3 de array que es 9.81
// Si queremos modificar el valor de dicha posición haremos lo siguiente:
numbers[2] = 10.82; // Le hemos dado otro valor a la posición de array.
console.log(numbers[2]);
/*
Metodos para manipular arrays
*/
// Array
const arr4 = Array(3); // Creamos un array. El valor que indiquemos entre parentesis indicará el tamaño del mismo.
console.log(arr4);
// Fill (relleno)
arr4.fill('X'); // Rellenamos el array con el valor que le indiquemos, en este caso con 'X'
console.log(arr4); // ['X','X','X'] esto será lo que veamos dentro.
// Concat: Para concatenar dos arreglos.
const PrimerArreglo = ['1','2','3'];
const SegundoArreglo = ['4','5','6'];
const TercerArrerglo = PrimerArreglo.concat(SegundoArreglo);
console.log(TercerArrerglo); // ['1','2','3','4','5','6']
// lenght : Longitud del array.
console.log('Longitud: ',TercerArrerglo.length);
// indexOf: Para comprobar si un indice existe dentro de la matriz, si existe devuelve el valor dentro de la matriz, si no existe devuelve -1
console.log(TercerArrerglo.indexOf('4')); // Existe en la posición 3
console.log(TercerArrerglo.indexOf('0')); // No existe entonces devuelve -1
// join: Para unir elementos de la matriz. El argumento que indiques unirá la matriz y devolvera todo los elementos como una cadena.
const numeros = [1,2,3,4,5];
console.log(numeros.join());
const webTechs2 = [
'HTML',
'CSS',
'JS',
'React',
'MongDB'
];
console.log(webTechs2);
console.log(webTechs2.join(' # '));
// Slice : Usado para cortar elementos de un rango que le indiquemos. Toma dos parametros, posición inicial y final. No incluye la posición final.
/*
En estos tres casos el resultado será el mismo. Nos mostrará todos los resultados
console.log(numeros.slice());
console.log(numeros.slice(0));
console.log(numeros.slice(0, numeros.length));
*/
console.log(numeros.slice(0,2)); // Mostrará los elementos [1,2]
// Splice : Toma tres parámetros: Posición inicial, número de veces que se quitará y número de elementos que se agregarán.
// Este método funciona haciendo los cambios a la matriz, probando usandolo dentro del console.log() da fallos.
const numeros2 = [1,3,4,5,6];
//console.log(numeros2.splice()); // Elimina todos los elementos.
//console.log(numeros2.splice(0,1));
console.log(numeros2);
numeros2.splice(1,0,2);
console.log(numeros2);
numeros2.splice(3,3,7,8,9);
// Push: Metodo para añadir elementos al array. Estos se añaden al final de la matriz
// unshift: Metodo para añadir elementos al array. Estos se añaden al inicio de la matriz.
const numeros3 = [1,2,3,4,5,6];
numeros3.unshift(0);
numeros3.push(7);
console.log(numeros3);
// Pop: Elimina el ultimo valor del array.
// shift: Elimina el primer valor del array.
numeros3.shift();
numeros3.pop();
console.log(numeros3);

0
soluciones/dia_01/level1.js
Unescape View File

Write Preview
Loading…
Cancel
Save