Tutorial ReactJS 21-22 - Historial de revisió

Joan: /* Crear el production build */

2022-04-26T16:13:11Z

Crear el production build

2022-04-19T13:27:26Z

Crear el production build

2022-04-18T23:25:55Z

Introducció

2022-04-18T23:25:06Z

Tutorial tic-tac-toe

2022-04-18T23:24:49Z

Tutorial tic-tac-toe

2022-04-18T23:19:51Z

Crear el production build

2022-04-18T23:10:15Z

Introducció

2022-04-18T23:07:59Z

Tutorial tic-tac-toe

2022-04-18T23:00:07Z

Adding time travel

2022-04-18T22:35:05Z

Completar el joc

@@ Línia 204: / Línia 204: @@
 Després d'implementar tots els canvis proposats, ja podem jugar al tic-tac-toe que es proposa en el tutorial.
-=Crear el production build=
+=Crear el production build: desplegament al VPS del Jaume Balmes=
 <pre>
 $ npm run build

@@ Línia 242: / Línia 242: @@
 i tornar a compilar. Ja funciona:
 *http://localhost/ruta_servidor_web/my-app/build/index.html
-o bé millor desplegar el tic-tac-toe al teu espai al núvol.
+o bé millor desplegar el tic-tac-toe al teu espai al núvol:
 {{Autor}}, abril 2022

@@ Línia 4: / Línia 4: @@
 *[[React: A JavaScript library for building user interfaces]]
-Dues opcions:
+Dues opcions per a seguir el tutorial oficial de ReactJS:
-) learn by doing:
+) learn by doing (aquest és el que seguim):
 *https://reactjs.org/tutorial/tutorial.html

@@ Línia 13: / Línia 13: @@
 =Tutorial tic-tac-toe=
-[[Fitxer:Tic-tac-toe 2122.png]]
+[[Fitxer:Tic-tac-toe 2122.png | thumbnail]]
 ==Instal·lació==
 Resultat final:

@@ Línia 13: / Línia 13: @@
 =Tutorial tic-tac-toe=
 ==Instal·lació==
 Resultat final:
@@ Línia 202: / Línia 203: @@
 Després d'implementar tots els canvis proposats, ja podem jugar al tic-tac-toe que es proposa en el tutorial.
 =Crear el production build=
 <pre>

@@ Línia 234: / Línia 234: @@
 Per tant, si disposem d'un servidor web (ja sigui local o en el núvol), podem desplegar el nostre tic-tac-toe.
+'''NOTA''': si no funciona (Linux, Mac), afegir en el ''package.json'' el camp:
 {{Autor}}, abril 2022

@@ Línia 1: / Línia 1: @@
 =Introducció=
 Nota:
-versió antiga d'aquest tutorial:
+versió antiga d'aquest tutorial (curs 19-20): (el codi del tutorial és exactament el mateix).
-*(TBD)
+*[[React: A JavaScript library for building user interfaces]]
 Dues opcions:

← Versió més antiga		Revisió del 23:07, 18 abr 2022
Línia 202:		Línia 202:

	Després d'implementar tots els canvis proposats, ja podem jugar al tic-tac-toe que es proposa en el tutorial.		Després d'implementar tots els canvis proposats, ja podem jugar al tic-tac-toe que es proposa en el tutorial.
		+	=Crear el production build=
		+	<pre>
		+	$ npm run build
		+
		+	> my-app@0.1.0 build
		+	> react-scripts build
		+
		+	Creating an optimized production build...
		+	Compiled successfully.
		+
		+	File sizes after gzip:
		+
		+	46.6 kB build/static/js/main.bc13e26f.js
		+	362 B build/static/css/main.22941023.css
		+
		+	The project was built assuming it is hosted at /.
		+	You can control this with the homepage field in your package.json.
		+
		+	The build folder is ready to be deployed.
		+	You may serve it with a static server:
		+
		+	npm install -g serve
		+	serve -s build
		+
		+	Find out more about deployment here:
		+
		+	https://cra.link/deployment
		+	</pre>
		+	S'ha creat la carpeta ''build'' en el directori arrel del projecte (és a dir, en el mateix nivell que ''src/''). Dins de la carpeta ''build/'' trobem el fitxer ''index.html'', i dins la carpeta ''static/'' trobem les carpetes 'css/'' i ''js/''.
		+
		+	Per tant, si disposem d'un servidor web (ja sigui local o en el núvol), podem desplegar el nostre tic-tac-toe.
		+

	{{Autor}}, abril 2022		{{Autor}}, abril 2022

@@ Línia 191: / Línia 191: @@
 I ja podem jugar una partida.
 ==Adding time travel==
 {{Autor}}, abril 2022

@@ Línia 144: / Línia 144: @@
 Per completar el joc, hem d'alternar les ''X'' i les ''O'' i determinar quan s'acaba el joc i qui guanya.
-Necessitem saber els valors de cada quadrat-botó, i necessitem una variable que estigui més amunt que ''Square'' (és a dir, ''Board'' o ''Game'') per tenir la visió global de tot el taulell. Per tant, el valor del ''state'' dels quadrats (que estan a nivell de Square), els hem de pujar cap amunt (''lift'').
+Necessitem saber els valors de cada quadrat-botó, i necessitem una variable que estigui més amunt que ''Square'' (és a dir, ''Board'') per tenir la visió global de tot el taulell. Per tant, el valor del ''state'' dels quadrats (que estan a nivell de Square), els hem de pujar cap amunt (''lift'').
 {{Autor}}, abril 2022