Reactjs - Revision history

Lsokolowski1: /* useId() */

2025-12-17T11:06:48Z

useId()

← Older revision		Revision as of 11:06, 17 December 2025
Line 2,911:		Line 2,911:
	<>		<>
	<input type="password" aria-describedby={passwordClueId} />		<input type="password" aria-describedby={passwordClueId} />
	<p id={passwordClueId}>		<p id={passwordClueId} />
	</>		</>
	)		)

2025-10-07T13:45:37Z

Pesel App

← Older revision		Revision as of 13:45, 7 October 2025
Line 794:		Line 794:
	#** Call ''SocNum'' component twice, with another trainer's details.		#** Call ''SocNum'' component twice, with another trainer's details.
	#** Wrap NIP stuff into another component, use context also there - provide another field ''Course Type''.		#** Wrap NIP stuff into another component, use context also there - provide another field ''Course Type''.
	#** Make context without default value (null). Fix types with optional chaining(''objVar?.prop1'').		#** Make context without default value (null). Fix types with optional chaining (''objVar?.prop1'').
	# '''Custom hook'''		# '''Custom hook'''
	#* Use custom hook to avoid testing the null		#* Use custom hook to avoid testing the null

2025-10-07T08:15:22Z

Main Exercises

← Older revision		Revision as of 08:15, 7 October 2025
Line 797:		Line 797:
	# '''Custom hook'''		# '''Custom hook'''
	#* Use custom hook to avoid testing the null		#* Use custom hook to avoid testing the null
	#** <~~a href="~~https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context~~">Helper~~</a>		#** Helper: <small>''https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context''</small>
	#* Compare with type assertion as an alternative.		#* Compare with type assertion as an alternative.
	</div>		</div>

2025-10-07T08:14:15Z

Pesel App

← Older revision		Revision as of 08:14, 7 October 2025
Line 797:		Line 797:
	# '''Custom hook'''		# '''Custom hook'''
	#* Use custom hook to avoid testing the null		#* Use custom hook to avoid testing the null
	#** [[https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context\|Helper]]		#** <a href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context">Helper</a>
	#* Compare with type assertion as an alternative.		#* Compare with type assertion as an alternative.
	</div>		</div>

2025-10-07T08:13:04Z

Pesel App

← Older revision		Revision as of 08:13, 7 October 2025
Line 797:		Line 797:
	# '''Custom hook'''		# '''Custom hook'''
	#* Use custom hook to avoid testing the null		#* Use custom hook to avoid testing the null
	#** [https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context\|Helper]		#** [[https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context\|Helper]]
	#* Compare with type assertion as an alternative.		#* Compare with type assertion as an alternative.
	</div>		</div>

2025-10-07T08:12:15Z

Pesel App

2025-10-07T08:11:52Z

Pesel App

← Older revision		Revision as of 08:11, 7 October 2025
Line 782:		Line 782:
	==== Pesel App ====		==== Pesel App ====
	[[Express#Pesel_app\|Pesel app]]		[[Express#Pesel_app\|Pesel app]]
	# Migrate from jQuery to React		Migrate from jQuery to React
	#* do it with React functions (-----:		* do it with React functions (-----:
	#* Separate validations into JS/TS module		* Separate validations into JS/TS module
	#* Collapsed by default, some additional exercs below		* Collapsed by default, some additional exercs below
	<div class="mw-collapsible mw-collapsed">		<div class="mw-collapsible mw-collapsed">
	# '''Context'''		# '''Context'''

2025-10-07T08:11:19Z

Pesel App

← Older revision		Revision as of 08:11, 7 October 2025
Line 787:		Line 787:
	#* Collapsed by default, some additional exercs below		#* Collapsed by default, some additional exercs below
	<div class="mw-collapsible mw-collapsed">		<div class="mw-collapsible mw-collapsed">
	* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).		# '''Context'''
	** Provide it from the top level parent component (''App'').		#* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).
	** Use it in ''SocNum'' component. Define the necessary '''types''' (-:		#** Provide it from the top level parent component (''App'').
	** Call ''SocNum'' component twice, with another trainer's details.		#** Use it in ''SocNum'' component. Define the necessary '''types''' (-:
	** Wrap NIP stuff into another component, use context also there - provide another field ''Course Type''.		#** Call ''SocNum'' component twice, with another trainer's details.
			#** Wrap NIP stuff into another component, use context also there - provide another field ''Course Type''.
			#** Make context without default value (null). Fix types with optional chaining(''objVar?.prop1'').
			# '''Custom hook'''
			#* Use custom hook to avoid testing the null
			#** [https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context\|Helper]
			#* Compare with type assertion as an alternative.
	</div>		</div>

2025-10-07T07:58:06Z

Main Exercises

← Older revision		Revision as of 07:58, 7 October 2025
Line 789:		Line 789:
	* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).		* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).
	** Provide it from the top level parent component (''App'').		** Provide it from the top level parent component (''App'').
	** Use it in 'SocNum' component. Define the necessary types (-:		** Use it in ''SocNum'' component. Define the necessary '''types''' (-:
	** Call SocNum component twice, with another trainer's details.		** Call ''SocNum'' component twice, with another trainer's details.
	** Wrap NIP stuff into another component, use context also there - provide another field 'Course Type'.		** Wrap NIP stuff into another component, use context also there - provide another field ''Course Type''.
	</div>		</div>

2025-10-07T07:56:25Z

Main Exercises

← Older revision		Revision as of 07:56, 7 October 2025
Line 777:		Line 777:

	=== Main Exercises ===		=== Main Exercises ===
	# Pesel app		# '''Pesel''' app
	# FTJ app		# '''FTJ''' app

	==== Pesel App ====		==== Pesel App ====
Line 785:		Line 785:
	#* do it with React functions (-----:		#* do it with React functions (-----:
	#* Separate validations into JS/TS module		#* Separate validations into JS/TS module
	#* Collapsed by default, some additional exercs ~~here~~		#* Collapsed by default, some additional exercs below
	<div class="mw-collapsible mw-collapsed">		<div class="mw-collapsible mw-collapsed">
	* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).		* Add specific '''Course data''' related to trainer: ''Course ID'', ''Course Name''. Start with '''UI''' ('SocNum' component view).