inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

ๅฎŸ่ทตReactใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชๅฎŒๆˆ โ€“ ๅ…ฌๅ…ฑAPI + ๅœฐๅ›ณใ‚ตใƒผใƒ“ใ‚นไฝœใ‚Š๏ผˆใƒ‡ใƒ—ใƒญใ‚คใพใง๏ผ‰

ใ“ใ‚“ใชๆ‚ฉใฟใ€ๆŠฑใ„ใŸใ“ใจใฏใ‚ใ‚Šใพใ›ใ‚“ใ‹๏ผŸ Reactใฏๅญฆใ‚“ใ ใ‘ใฉใ€ใ„ใ–ไฝ•ใ‚’ไฝœใ‚Œใฐใ„ใ„ใ‹ใ‚ใ‹ใ‚‰ใชใ„ ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไฝœใ‚ŠใŸใ„ใ‘ใฉใ€Todoใ‚ขใƒ—ใƒชไปฅๅค–ๆ€ใ„ใคใ‹ใชใ„ ๅœฐๅ›ณAPIใ‚„ๅ…ฌๅ…ฑAPIใฏ้›ฃใ—ใใ†ใงใ€ๆŒ‘ๆˆฆใ™ใ‚‰ใงใใชใ‹ใฃใŸ ใƒ‡ใƒ—ใƒญใ‚คใพใงใ—ใŸใ“ใจใŒใชใใ€ใ„ใคใ‚‚ใ€Œใƒญใƒผใ‚ซใƒซใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ€ใง็ต‚ใ‚ใฃใฆใ—ใพใ† ใ‚ณใƒผใƒ‰ใŒใฉใ‚“ใฉใ‚“่ค‡้›‘ใซใชใ‚Šใ€่จญ่จˆใ‚’ใฉใ†ใ™ในใใ‹ใ‚ใ‹ใ‚‰ใชใ„ ๐ŸŽฏ ใ“ใฎ่ฌ›็พฉใŒ่งฃๆฑบใ™ใ‚‹ๅ•้กŒ ใ“ใฎ่ฌ›็พฉใฏใ€ๅ˜ใซๅœฐๅ›ณใ‚’่กจ็คบใ™ใ‚‹ๆ–นๆณ•ใ‚’ๆ•™ใˆใ‚‹่ฌ›็พฉใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ โœ” ๅ…ฌๅ…ฑAPIใ‚’ๅฎŸ้š›ใฎใ‚ตใƒผใƒ“ใ‚นใซ้€ฃๆบใ•ใ›ใ‚‹ๆ–นๆณ• โœ” ๅœฐๅ›ณSDKใ‚’Reactใฎๆง‹้€ ๅ†…ใงๅฎ‰ๅฎš็š„ใซ่จญ่จˆใ™ใ‚‹ๆ–นๆณ• โœ” ใƒžใƒผใ‚ซใƒผใฎๆœ€้ฉๅŒ–ใจๆƒ…ๅ ฑใ‚ฆใ‚ฃใƒณใƒ‰ใ‚ฆใฎๅ†ๅˆฉ็”จๆง‹้€  โœ” Contextใ‚’ๆดป็”จใ—ใŸ็Šถๆ…‹็ฎก็†ใฎ่จญ่จˆ โœ” Tailwind + SCSSใฎๅฎŸๆˆฆๆดป็”จ โœ” GitHubใฎๆ•ด็†ใŠใ‚ˆใณVercelใงใฎใƒ‡ใƒ—ใƒญใ‚คใพใง ใ€ŒๆฉŸ่ƒฝใฎๅฎŸ่ฃ…ใ€ใงใฏใชใใ€ๅฎŸ้š›ใฎใ‚ตใƒผใƒ“ใ‚นๆง‹้€ ใจใ—ใฆ่จญ่จˆใ™ใ‚‹ๆ–นๆณ•ใ‚’ใŠๆ•™ใˆใ—ใพใ™ใ€‚ ๐Ÿ’ก ๅ˜ใชใ‚‹ใ€Œๅ†™็ตŒใ€ใฎ่ฌ›็พฉใงใฏใ‚ใ‚Šใพใ›ใ‚“ ใชใœuseRefใ‚’ไฝฟใ†ใฎใ‹ ใชใœใƒžใƒผใ‚ซใƒผใ‚’ๆฏŽๅ›žๆ–ฐใ—ใไฝœใฃใฆใฏใ„ใ‘ใชใ„ใฎใ‹ ใชใœ็Šถๆ…‹ใ‚’ๅˆ†้›ขใ—ใชใ‘ใ‚Œใฐใชใ‚‰ใชใ„ใฎใ‹ ใชใœใƒ‡ใƒ—ใƒญใ‚ค็’ฐๅขƒใงใฏ็’ฐๅขƒๅค‰ๆ•ฐใ‚’ๅˆฅใซ็ฎก็†ใ—ใชใ‘ใ‚Œใฐใชใ‚‰ใชใ„ใฎใ‹ ใ™ในใฆใฎ้ธๆŠžใซใฏ็†็”ฑใŒใ‚ใ‚Šใพใ™ใ€‚ ใ“ใฎ่ฌ›็พฉใฏใใฎใ€Œ็†็”ฑใ€ใ‚’่ชฌๆ˜Žใ—ใพใ™ใ€‚ ๐Ÿš€ ๅ—่ฌ›ๅพŒใ€ใ‚ใชใŸใฏใ“ใฎใ‚ˆใ†ใซใชใ‚Šใพใ™ ๅœฐๅ›ณใƒ™ใƒผใ‚นใฎใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ‚’1ใคๅฎŒๆˆ ๅ…ฌๅ…ฑAPIใฎ้€ฃๆบ็ตŒ้จ“ใ‚’็ขบไฟ ๅค–้ƒจSDKใ‚’Reactใซ็ต„ใฟ่พผใ‚€ๆง‹้€ ใฎ็†่งฃ ๅฎŸๅ‹™ๅž‹ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆๆง‹้€ ใฎ่จญ่จˆ็ตŒ้จ“ ใƒ‡ใƒ—ใƒญใ‚ค็ตŒ้จ“ใฎไฟๆœ‰ ใใ—ใฆใ€้ขๆŽฅใงใ“ใฎใ‚ˆใ†ใซ่ฉฑใ™ใ“ใจใŒใงใใพใ™ใ€‚ ใ€Œๅ…ฌๅ…ฑAPIใƒ™ใƒผใ‚นใฎๅœฐๅ›ณใ‚ตใƒผใƒ“ใ‚นใ‚’่‡ชใ‚‰่จญ่จˆใ—ใ€ใƒ‡ใƒ—ใƒญใ‚คใพใง่กŒใ„ใพใ—ใŸใ€‚ใ€ ใ“ใฎไธ€่จ€ใŒๅคงใใชๅทฎใ‚’็”Ÿใฟใพใ™ใ€‚ ๐Ÿ‘ฉโ€๐Ÿ’ป ใ“ใฎใ‚ˆใ†ใชๆ–นใซใŠใ™ใ™ใ‚ใงใ™ ReactใฎๅŸบๆœฌๆ–‡ๆณ•ใฏ็Ÿฅใฃใฆใ„ใ‚‹ใŒใ€ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆ็ตŒ้จ“ใŒไธ่ถณใ—ใฆใ„ใ‚‹ๆ–น ๅฐฑ่ท็”จใฎใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใ‚’ไฝœใ‚ŠใŸใ„ๆ–น ๅœฐๅ›ณ/ๅ…ฌๅ…ฑAPIใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ‚’ใ‚„ใฃใฆใฟใŸใ‹ใฃใŸๆ–น ๅฎŸๅ‹™ใซ่ฟ‘ใ„่จญ่จˆใ‚’ๅญฆใณใŸใ„ๆ–น ๐Ÿ”ฅ ใ“ใฎ่ฌ›็พฉใฎ็›ฎๆจ™ ใ“ใฎ่ฌ›็พฉใฏใ€Œๅœฐๅ›ณใฎไฝœใ‚Šๆ–นใ€ใงใฏใชใใ€ใ€Œใ‚ตใƒผใƒ“ใ‚นใ‚’่จญ่จˆใ™ใ‚‹ๆ€่€ƒใƒ—ใƒญใ‚ปใ‚นใ€ใ‚’ๅญฆใถ่ฌ›็พฉใงใ™ใ€‚

26ๅ ใŒๅ—่ฌ›ไธญใงใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel
React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel

ใŠ็Ÿฅใ‚‰ใ›

ๆ–ฐใ—ใ„ใŠ็Ÿฅใ‚‰ใ›ใŒใ‚ใ‚Šใพใ›ใ‚“ใ€‚

ๆœŸ้–“้™ๅฎšใ‚ปใƒผใƒซใ€ใ‚ใจ3ๆ—ฅๆ—ฅใง็ต‚ไบ†

๏ฟฅ1,621

66%

๏ฟฅ4,863