The latest articles on Forem by sakito🐕Frontend Dog (@__sakito__). https://forem.com/__sakito__ https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F174672%2F851ee6dc-c745-46be-8601-570325ed9fd2.jpg https://forem.com/__sakito__ en sakito🐕Frontend Dog Thu, 22 Jul 2021 11:06:45 +0000 https://forem.com/__sakito__/useful-information-and-books-to-help-you-learn-react-4l6j https://forem.com/__sakito__/useful-information-and-books-to-help-you-learn-react-4l6j <p>The tutorials in the official React documentation are out of date⚠️</p> <p>Here are some sites that you can refer to in order to develop using TypeScript and React Hooks.</p> <p>I'm sure there are many other useful links out there, but too many would be too much work, so I've narrowed it down to those that I think are useful and don't seem to have any overlap.</p> <p>In this Issue, we introduce the renewal of the official React documentation.</p> <p>New React Docs · Issue #3308 · reactjs/reactjs.org<br> <a href="https://github.com/reactjs/reactjs.org/issues/3308" rel="noopener noreferrer">https://github.com/reactjs/reactjs.org/issues/3308</a></p> <h2> JavaScript </h2> <p>For people who are worried about JavaScript itself before React.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk78sx32y5bijm4yefcxb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk78sx32y5bijm4yefcxb.png" alt="https://wesbos.com/javascript"></a></p> <p>Beginner JavaScript Notes - Wes Bos<br> <a href="https://wesbos.com/javascript" rel="noopener noreferrer">https://wesbos.com/javascript</a></p> <h2> React </h2> <p>For those who want to learn React comprehensively.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplk7n3h94z6n5sghsw94.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplk7n3h94z6n5sghsw94.jpeg" alt="Alt Text"></a></p> <p>Learning React, 2nd Edition [Book]<br> <a href="https://www.oreilly.com/library/view/learning-react-2nd/9781492051718/" rel="noopener noreferrer">https://www.oreilly.com/library/view/learning-react-2nd/9781492051718/</a></p> <h2> React + TypeScript </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzfymm2ghovtuda3dahk.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzfymm2ghovtuda3dahk.png" alt="Alt Text"></a></p> <p>React TypeScript Cheatsheets.<br> <a href="https://react-typescript-cheatsheet.netlify.app/" rel="noopener noreferrer">https://react-typescript-cheatsheet.netlify.app/</a></p> <h2> React Hooks </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgqeduhgw0okpa4tjbmbv.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgqeduhgw0okpa4tjbmbv.png" alt="スクリーンショット 2021-07-23 0.10.03"></a></p> <p>This is an unofficial but React documentation site that has been changed to a tutorial on React Hooks.</p> <p>React – A JavaScript library for building user interfaces<br> <a href="https://reactwithhooks.netlify.app/" rel="noopener noreferrer">https://reactwithhooks.netlify.app/</a></p> <h2> React + GraphQL </h2> <ul> <li>Learn a comprehensive implementation of React + Apollo + GraphQL.</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ujyrl1nzro2b3jdxy9w.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8ujyrl1nzro2b3jdxy9w.png" alt="Alt Text"></a></p> <p>Course Introduction | GraphQL React Apollo Hooks Tutorial<br> <a href="https://hasura.io/learn/graphql/react/introduction/" rel="noopener noreferrer">https://hasura.io/learn/graphql/react/introduction/</a></p> <ul> <li>Learn React + GraphQL + TypeScript web service development from front-end to back-end comprehensively.</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz9ehtfepr9gfj86fdp0.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz9ehtfepr9gfj86fdp0.png" alt="Alt Text"></a></p> <p>Full stack open 2021<br> <a href="https://fullstackopen.com/en/" rel="noopener noreferrer">https://fullstackopen.com/en/</a></p> <h2> React + Test </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focmr50mhnq2in0begyr8.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focmr50mhnq2in0begyr8.png" alt="Alt Text"></a></p> <p>Learn comprehensive front-end testing using the concept of Testing Trophy and React testing.</p> <p>Testing JavaScript with Kent C. Dodds<br> <a href="https://testingjavascript.com/" rel="noopener noreferrer">https://testingjavascript.com/</a></p> <h2> React + Redux </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvv9foqkgk9r79mwgto88.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvv9foqkgk9r79mwgto88.png" alt="Alt Text"></a></p> <p>Learning Resources | Redux<br> <a href="https://redux.js.org/introduction/learning-resources" rel="noopener noreferrer">https://redux.js.org/introduction/learning-resources</a></p> <h2> Paid service </h2> <p>If you are fine with paid service, this is the way to go.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faenn88vmnafvtci5iuvf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faenn88vmnafvtci5iuvf.png" alt="スクリーンショット 2021-07-23 0.08.44"></a> </p> <p>Frontend Masters<br> <a href="https://frontendmasters.com/" rel="noopener noreferrer">https://frontendmasters.com/</a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe89oc2hm2qeba3pclslf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe89oc2hm2qeba3pclslf.png" alt="スクリーンショット 2021-07-23 0.09.16"></a> </p> <p>Get Really Good at React<br> <a href="https://epicreact.dev/" rel="noopener noreferrer">https://epicreact.dev/</a></p> react graphql typescript javascript