ãã®è¨äºã§ã¯ãReactã§ã·ã³ãã«ãªååæ¼ç®ãã§ããè¨ç®æ©ã¢ããªãä½æãã¾ãã
Reactã«ãããã³ã³ãã¼ãã³ãã®åºæ¬ååã®è§£èª¬ã¨ãåå¿è ã«å½¹ç«ã¤Reactã³ã³ãã¼ãã³ãã©ã¤ãã©ãªã®ç´¹ä»ãæä¾ãã¾ã
ä»åã¯ãJavaScriptã®ãã¹ããã¬ã¼ã ã¯ã¼ã¯ã¨ã³ã³ãã¼ãã³ãããã¹ãããããã®Reactã¦ã¼ãã£ãªãã£ã®çµã¿åããã¨ãã¦äººæ°ã®é«ããJestã¨React Testing Libraryã使ã£ã¦Reactã¢ããªã±ã¼ã·ã§ã³ããã¹ãããæ¹æ³ã«ã¤ãã¦èª¬æãã¾ãã ãã¹ãã¨ã¯ ã¦ããããã¹â¦
Reduxã¯ãReactã¢ããªã±ã¼ã·ã§ã³ã®ç¶æ 管çã©ã¤ãã©ãªã§ãããã¢ããªã±ã¼ã·ã§ã³å ã®ç¶æ ãããå¹ççã«ç®¡çããããã«ä½¿ç¨ããã¾ãã
Reactå é¨ã§JQueryãæ£ãã使ç¨ããæ¹æ³ã¨æ³¨æç¹ã«ã¤ãã¦è§£èª¬è´ãã¾ãã
React-Query-libraryã®ä½¿ãæ¹ã¨ãã®éè¦æ§ã«ã¤ãã¦åå¦è æ§ã«è§£èª¬ãè´ãã¾ãã
Reactããã¯ã§useStateã使ç¨ããç¶æ å¤æ°ã®æ´æ°æä½ãåå¿è ã«ç¶²ç¾ ãã¦ãããçºã®å®å ¨çã§ããuseStateã®ä½¿ãæ¹ã注æç¹ãè¸ã¾ãã¦å¦ã³ã¾ãããã
Reactã«ã¯å¤ãã®å©ç¹ãããã¾ãããèæ ®ãã¹ãããã¤ãã®æ¬ ç¹ããããã¾ãã React.jsã使ç¨ããåã«ãããReactã®å ¨ä½åãææ¡ããããã«å¦ãã§ããã¾ãããã
React.jsã§ã®ã¤ã³ãã¼ãã¨ã¨ã¯ã¹ãã¼ãã®æ±ãæ¹ã»æ¦å¿µã»éè¦ãªçç±ãªã©åå¦è æ§ã«è§£èª¬è´ãã¾ãã
React JSXã§ã«ã¼ãå¦çããæ¹æ³ãåå¦è æ§åãã«è§£èª¬è´ãã¾ãã forã»forEachã»ãããé¢æ°ã§ã®ã«ã¼ãã¨ãªãã¾ãã
æè¿ã§ã¯React 18ããªãªã¼ã¹ãããã°ããã§ããå½ããã°ã§ã¯ç¥ã£ã¦ããã¹ãå¿ è¦ã®ãããã¹ã¦ã解説ãã¦ããã¾ãã
package.jsonã¨ã¯ï¼ React(CRA)package.jsonã®ä¸èº« node_modules æå¾ã« 以åã¯ãReactã¢ããªã±ã¼ã·ã§ã³ãä½æããã®ã«ã¯ãwebpackãBabelãªã©ãå¤ãã®è¨å®ãå¿ è¦ã§ããã ããããCreate-React-Appã¨ããåªãããã¼ã«ãç»å ´ããReactã¢ããªã±ã¼ã·ã§ã³ãç°¡åâ¦
Reactã®ãã«ã¹ã¿ã ããã¯ãã³ã³ãã¼ãã³ããä½æãã¹ã¯ãã¼ã«ã¤ãã³ããªã¹ãã¼ã§ã¦ã¼ã¶ã¼ã®ç¾å¨ã®ã¦ã£ã³ãã¦ä½ç½®ãåå¾ããæ¹æ³ã解説ãã¾ãã
React.jsããªãããã¾ã§å¼·åãªJSã©ã¤ããªã¨è¨ãããããã«ãªã£ãã®ãã æ´å²ã®ä¸ãããæ¢ã£ã¦ããã¾ãããã
Reactéçºè ã«ãªãã«ã¯æ¬ ãããªããWebpack&Babelã«ã¤ãã¦ããªãã¹ããã£ããã¨è§£èª¬è´ãã¾ãã ã¾ãã¯ãªãå¿ è¦ãªã®ããç解ãã¦ããã¾ãããã
è¤æ°ã§ã®å¯ä½ç¨ã®å ´åãuseEffectãã¯ï¼ã¤ã«ã¾ã¨ãã¦çµã¿åãããã®ã§ã¯ãªãããuseEffectããè¤æ°å¼ã³åºãåããªããã°ããã¾ããã
React Hook useCallbackã®åºç¤ã«ãªãã¾ãã
React.jsã®ä¸ç´è ã«ãªããã¦ã®æ¹ãåãã«ããããä½ãå¦ã¶ããç§ããã®ææ¡ã§ãããã¾ãã
Reactããã¯ã®useRefãä½ã«å½¹ç«ã¡ãããã¦ãããã©ã®ããã«æ±ãã®ã解説è´ãã¾ãã
React Hooksã®ãuseEffectãã¨ãuseLayoutEffectãã®éãã解説è´ãã¾ãã
useStateã®ç解ãã§ããæ¹ã¯ããã«1ã©ã³ã¯ä¸ã®ç¶æ 管çã¸ããã¾ãããï¼ React Hookã®ãuseReducer()ãã®è§£èª¬ãè´ãã¾ãã
æ¬æ¥ã¯Reactããã¯ã§ããç¨ãããããuseContextã§ã®ãã¼ã¿å ±æã«ãªãã¾ãã useContextããã¯ã¯ãReact16.8以éã®ãã¼ã¸ã§ã³ã§ä½¿ç¨å¯è½ã§ãã useContextã¨ã¯ useContextãã㯠使ãæ¹ æå¾ã« useContextã¨ã¯ æ¬æ¥Reactã§ã®è¦ªã³ã³ãã¼ãã³ãããåã®ã³ã³ãâ¦
Reactã«é¢é£ããå¹ççãªUIæ§ç¯ã¨ãããã°ã®ããã®å¿ é ãã¼ã«ãç´¹ä»ãã¾ãã
React.jsã®Hooksã«ã¤ãã¦åãã¦å¦ã¶åå¿è ã®æ¹ã åãã«ãç°¡æ½ãã¤åããããã説æããã¾ã¨ããè¨äºã¨ãªãã¾ãã
ã¯ããã« ã©ã¤ãã©ãª ãã¬ã¼ã ã¯ã¼ã¯ æå¾ã« ã¯ããã« Webéçºãå¦ã¶éãå¿ ãã¨è¨ã£ã¦ããã»ã©åºãããç¨èªããã©ã¤ãã©ãªãã¨ããã¬ã¼ã ã¯ã¼ã¯ãã§ãã ãããããããã®ç¨èªã®éãã«ã¤ãã¦ç解ãããã¨ã¯ç°¡åã§ã¯ããã¾ããã å¤ãã®äººã¯Googleã§æ¤ç´¢ãã¦â¦
Reactã§ã®ã¨ã©ã¼å¦çã«ãå°ãã®æ¹ã¯ã¾ããã¡ããå¦ãã§ãããå¥ã®è§£æ±ºçã«é²ãã§ä¸ããã
æ§æ Propsã®åãæ±ã ç¶æ ã©ã¤ããµã¤ã¯ã« ç¬èªãã㯠è£è¶³ æå¾ã« Reactã§ã³ã¼ããæ¸ãå§ããã¨ãJSXæ§æãé¢æ°ã³ã³ãã¼ãã³ãã¨ã¯ã©ã¹ã³ã³ãã¼ãã³ãã®éããªã©ãReactã®ããã¤ãã®ç¹ã§æ··ä¹±ãããã¨ãåå¿è ã§ã¯ããããã¾ãã æ¬æ¥ã¯React JSã®ã¯ã©ã¹ã³â¦
Reactãå¦ç¿ä¸ã®æ¹ããSPAã®éçºãæ軽ã«å§ãããæ¹ã«ã¯ãCreate-React-Appï¼CRAï¼ã¨ããCLIãã¼ã«ãããããã§ãã ãã®ãã¼ã«ã¯ãReactããã¸ã§ã¯ãã®éå½¢ãæä¾ããåæè¨å®ãèªåçã«è¡ã£ã¦ããã¾ãã CRAã使ç¨ããã¨ããã£ã¬ã¯ããªæ§æãèªåçã«ä½æâ¦
ãã®è¨äºã§ã¯ãåå¿è åãã«ãReactã®ããã¯ã使ã£ã¦ãç°¡åãªæé ã§APIãåå¾ããæ¹æ³ã«ã¤ãã¦ãç´¹ä»ãã¾ãã
ç°¡åã«ã¿ãå®è£ ããããªãééããªãreact-tabsãåå¦è ã§ãè¦ããæãå°ãªãã®ã§ããã«å®è£ ãå¯è½ã¨ãªãã¾ãã