{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnElectronJS","result":{"data":{"blog":{"frontmatter":{"title":"LEARN ELECTRON JS","thumbnail":"blog50","date":"March 11, 2021","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  Electron JS is a JS framework for Desktop App Development. It\n                  is based on three basic web development tools HTML, CSS, and\n                  Javascript. Electron JS is used for making cross-platform\n                  desktop app development.\n                </p>\n                <p>\n                  If you can build a website, you can build a desktop app. It\n                  takes care of the hard parts so you can focus on the core of\n                  your application.\n                </p>\n                <p>\n                  Electron uses Chromium and Node.js so you can build your app\n                  with HTML, CSS, and JavaScript. Applications built with\n                  Electron JS are compatible with Mac, Windows, and Linux,\n                  Electron apps build and run on three platforms.\n                </p>\n                <p>\n                  <strong>Prerequisites</strong> to get started with Electron JS\n                  are HTML, CSS, JavaScript and some basic knowledge about Node\n                  JS such as path & url module.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Creating & configuring a new browser window</li>\n                  <li>Main process & renderer process</li>\n                  <li>Web contents</li>\n                  <li>Inter process communication</li>\n                  <li>Application menu</li>\n                  <li>Context menu</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Parent & Child Windows</li>\n                  <li>Acceletors(Keyboard shortcuts)</li>\n                  <li>Global Shortcuts</li>\n                  <li>Shell modules: Open a particular file/folder from pc</li>\n                  <li>Tray Module</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>CRUD operations on files</li>\n                  <li>Offscreen Rendering</li>\n                  <li>\n                    Integrating any JS framework/libary such as Angular/React JS\n                    + Electron JS\n                  </li>\n                  <li>Sending push notifications</li>\n                  <li>Native file drag & drop</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"250\"\n                    src=\"https://youtube.com/embed/playlist?list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"250\"\n                    src=\"https://www.youtube.com/embed/2RxHQoiDctI\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <p class=\"\">\n                  <a href=\"/blogs/electronJSProjects\">Click here</a> for projects to develop desktop apps using\n                  Electron JS.\n                </p>\n            </div>\n","html":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  Electron JS is a JS framework for Desktop App Development. It\n                  is based on three basic web development tools HTML, CSS, and\n                  Javascript. Electron JS is used for making cross-platform\n                  desktop app development.\n                </p>\n                <p>\n                  If you can build a website, you can build a desktop app. It\n                  takes care of the hard parts so you can focus on the core of\n                  your application.\n                </p>\n                <p>\n                  Electron uses Chromium and Node.js so you can build your app\n                  with HTML, CSS, and JavaScript. Applications built with\n                  Electron JS are compatible with Mac, Windows, and Linux,\n                  Electron apps build and run on three platforms.\n                </p>\n                <p>\n                  <strong>Prerequisites</strong> to get started with Electron JS\n                  are HTML, CSS, JavaScript and some basic knowledge about Node\n                  JS such as path & url module.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Creating & configuring a new browser window</li>\n                  <li>Main process & renderer process</li>\n                  <li>Web contents</li>\n                  <li>Inter process communication</li>\n                  <li>Application menu</li>\n                  <li>Context menu</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Parent & Child Windows</li>\n                  <li>Acceletors(Keyboard shortcuts)</li>\n                  <li>Global Shortcuts</li>\n                  <li>Shell modules: Open a particular file/folder from pc</li>\n                  <li>Tray Module</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>CRUD operations on files</li>\n                  <li>Offscreen Rendering</li>\n                  <li>\n                    Integrating any JS framework/libary such as Angular/React JS\n                    + Electron JS\n                  </li>\n                  <li>Sending push notifications</li>\n                  <li>Native file drag & drop</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"250\"\n                    src=\"https://youtube.com/embed/playlist?list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"250\"\n                    src=\"https://www.youtube.com/embed/2RxHQoiDctI\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <p class=\"\">\n                  <a href=\"/blogs/electronJSProjects\">Click here</a> for projects to develop desktop apps using\n                  Electron JS.\n                </p>\n            </div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M234%2082v15h5c4%200%205%200%205-2s-1-2-3-2h-3V80c0-13%200-14-2-14s-2%201-2%2016m16%200v15h6c5%200%205%200%205-3%200-2%200-2-3-2-2%200-3%200-3-4%200-3%200-4%202-4l2-2c0-2-1-3-2-3-2%200-2-1-2-4%200-4%200-4%203-4s3%200%203-2c0-3%200-3-5-3h-6v16m21-15l-2%2014c-2%2016-2%2016%200%2016l3-3c0-4%204-4%205%200%200%202%201%203%203%203s2%200%202-2l-3-13c-2-17-2-16-5-16l-3%201m17%2015v15h3c2%200%202%200%202-7s1-7%202%202c1%204%201%205%204%205l2-1-1-7v-9c3-7-1-14-8-14h-4v16m20-1c0%2015%200%2016%202%2016s2-1%202-8c0-9%201-9%203%201%202%206%203%207%205%207h2V66h-2c-3%200-3%200-3%208v9l-2-8c-2-7-3-9-5-9s-2%200-2%2015M87%2070c-4%203-1%2010%204%209%207-2%207-2%2011%203%207%2011%2010%2031%207%2047l-2%209c3%202%205-11%205-24%200-16-5-31-12-37l-4-5c0-4-6-5-9-2M63%2087c-10%202-14%2014-9%2022%203%204%204%203%203-1-6-11%200-19%2014-19%208%200%2011-1%205-2H63m48%200c-1%201%200%202%205%202%202%201%206%202%207%204%206%205%205%2011-3%2023-2%203%200%204%202%201%209-11%209-24%200-28-4-2-11-3-11-2m-17%202c-20%207-42%2027-42%2039l-2%205c-3%206%204%2012%209%207l2-4c0-1-4-6-6-6v-3c3-13%2021-29%2041-35l6-3c0-2-1-2-8%200m145%2026c-2%202-2%203-2%2014%200%2013%200%2015%204%2016%204%202%208-1%208-7%200-5-4-6-4-1l-2%204-1-11%201-12%202%204c1%204%204%204%204-1%200-4-3-8-6-8l-4%202m57%200c-2%202-2%202-2%2014%200%2014%200%2016%206%2016%205%200%206-3%206-15%200-16-3-20-10-15m64%201c-3%203-2%207%203%2015%203%206%204%2010%201%2010l-2-3-2-2c-3%200-3%201-2%205%203%209%2015%204%2012-5l-4-8c-3-5-4-10-2-10l2%202%202%202c5-1%201-9-4-9l-4%203m-175%2014v15h6c5%200%205%200%205-2%200-3%200-3-3-3s-3%200-3-4c0-3%200-4%202-4l2-2c0-2-1-3-2-3-2%200-2-1-2-4%200-5%200-5%203-5%202%200%203%200%203-2s-1-2-5-2h-6v16m18%200v15h6c4%200%205%200%205-2%200-1-1-2-3-2h-3v-14c0-13-1-13-3-13s-2%200-2%2016m17%200v15h5c5%200%205%200%205-2%200-3%200-3-3-3s-3%200-3-4c0-3%200-4%202-4%203-1%204-5%201-5-4-1-4-8%200-9%202%200%203-1%203-2%200-2-1-2-5-2h-5v16m35-14l2%202c2%201%202%202%202%2014v13h5v-13c0-13%200-14%202-14l2-2c0-2-1-2-6-2-6%200-7%200-7%202m19%2014v15h3c2%200%202%200%202-7s1-6%202%202c1%204%201%205%204%205%202%200%202%200%202-2-3-12-3-13-1-16%203-6-1-13-8-13h-4v16m39%200v15h5v-8c-1-9%200-9%203%201%201%206%202%207%204%207h2v-31h-3c-2%200-2%200-2%208%201%209%200%209-2%200-2-7-3-8-5-8h-2v16m33-3l-1%2014-1%202c0%202%200%203%202%202%204-1%205-3%205-17v-14h-5v13m-285-8c0%202%2017%2015%2026%2019%2011%205%2027%207%2033%204h5c6%201%209-6%205-10s-9-1-9%205c0%202-1%203-5%203-13%203-38-7-49-19-3-3-6-4-6-2m12%2021l6%2011c3%204%2010%207%2014%206%205-1%2015-11%2011-11l-3%203c-3%204-7%206-11%206s-12-8-14-13c-1-4-3-5-3-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/231319e06ad2ce52c58b12292e916202/ee604/blog50.png","srcSet":"/static/231319e06ad2ce52c58b12292e916202/69585/blog50.png 200w,\n/static/231319e06ad2ce52c58b12292e916202/497c6/blog50.png 400w,\n/static/231319e06ad2ce52c58b12292e916202/ee604/blog50.png 800w,\n/static/231319e06ad2ce52c58b12292e916202/f3583/blog50.png 1200w,\n/static/231319e06ad2ce52c58b12292e916202/5707d/blog50.png 1600w,\n/static/231319e06ad2ce52c58b12292e916202/9ddc6/blog50.png 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnElectronJS","thumbnail":"thumbnails/blog50.png"}},"staticQueryHashes":["2987289216","63159454"]}