The latest articles on DEV Community by @ChaseGates (@shakespeare17). https://dev.to/shakespeare17 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%2F827771%2F2c686958-30b6-4bfe-bdbd-ef765f94d87f.jpeg https://dev.to/shakespeare17 en @ChaseGates Wed, 09 Mar 2022 07:28:10 +0000 https://dev.to/shakespeare17/react-component-library-tutorial-a3m https://dev.to/shakespeare17/react-component-library-tutorial-a3m <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Avn336xK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmrq3ioumps20xfjl0bb.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Avn336xK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmrq3ioumps20xfjl0bb.png" alt="My Tweaked version of Storybooks Logo" width="880" height="248"></a></p> <p>I lucked out the other day browsing around on <strong>GitHub</strong> when i discovered a react-components tutorial authored by <strong><a href="https://github.com/alexeagleson">@alexeagleson</a></strong></p> <p><strong>If your looking to get going with Storybook and React than look no further.</strong> </p> <ol> <li>This Tutorial is very detailed and easy to understand.</li> <li>Didn't require me to search Google or Stack Overflow, not even once.</li> <li>Highly informative on multiple fronts and is an excellent introduction into project configuration.</li> <li>Leaves you with your own custom, personal react-component library, packaged and published to GitHub making your custom-components just a simple npm install away..</li> </ol> <p><strong>You can fork the tutorial over at GitHub</strong><br> <a href="https://github.com/alexeagleson/template-react-component-library">/template-react-component-library</a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>git clone https://github.com/alexeagleson/template-react-component-library.git </code></pre> </div> <p><br> Touches on: </p> <ul> <li>React-Js - Jsx </li> <li>Typescript </li> <li>Roll-up </li> <li>Npm </li> <li>Jest </li> <li>Git </li> <li>Babel</li> <li>Storybook </li> <li>Web pack</li> <li>Node-js </li> </ul> <h1> Other Tutorial by the Author: </h1> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-running-a-local-web-server-4d8g">Running a Local Web Server</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-linters-eslint-59pm">ESLint</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-prettier-214j">Prettier</a> </h2> <h2> <a href="https://dev.to/alexeagleson/building-a-modern-web-stack-babel-3hfp">Babel</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-react-with-and-without-jsx-31c74">React &amp; JSX</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-part-1-2mn1">Webpack: The Basics</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-part-2-49bj">Webpack: Loaders, Optimizations &amp; Bundle Analysis</a> </h2> <h2> <a href="https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-devserver-react-typescript-4b9b">Webpack: DevServer, React &amp; Typescript</a> </h2> <p>Big Thanks <a class="mentioned-user" href="https://dev.to/alexeagleson">@alexeagleson</a>, I enjoyed your Tutorial and look forward to doing the others!</p> javascript react storybook