The latest articles on DEV Community by Siful Islam (@getsiful). https://dev.to/getsiful 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%2F180754%2F9b1c04a7-89a0-4189-95b1-dd39d74acebd.png https://dev.to/getsiful en Siful Islam Sat, 20 Apr 2024 13:14:17 +0000 https://dev.to/getsiful/create-a-single-page-application-in-reactjs-using-easyfrontend-4fip https://dev.to/getsiful/create-a-single-page-application-in-reactjs-using-easyfrontend-4fip <h2> What is a single page application? </h2> <p>A single-page application is a web page that loads only a single web document and changes its content based solely on APIs.</p> <h2> What is EasyFrontend? </h2> <p>A free collection of UI Components, Blocks, and Sections Built with - HTML, React, Bootstrap, and Tailwind CSS to boost your Development Workflow with over 600+ Free UI Components. You can Copy-paste Code or utilize our Powerful Editor to create, edit, and download complete websites and landing pages without the need for coding from scratch.</p> <h2> Steps to Create a Single Page Application: </h2> <p>First of all visit <a href="https://easyfrontend.com/">EasyFrontend.com</a>. The page will look like this: </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uljx4nt7sgsmt1wirx8.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uljx4nt7sgsmt1wirx8.png" alt="EasyFrontend home page" width="800" height="432"></a></p> <p>Click "Try the Editor" to begin building your project. You'll find options to select the technology and framework you want to use. Since we're creating a single-page application in React, choose React as the language, and for the CSS framework, select Bootstrap, which mainly utilizes <a href="https://react-bootstrap.netlify.app/">react-bootstrap</a>. Then, click the "<a href="https://easyfrontend.com/builder">Start Building</a>" button. <br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ec3nbb0oevkz2rkxgmv.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ec3nbb0oevkz2rkxgmv.png" alt="React and bootsrap" width="800" height="375"></a></p> <p>Once the project is created, you'll be directed to the builder page.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5j4kldmqz2cv5adow5ms.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5j4kldmqz2cv5adow5ms.png" alt="EasyFrontend editor" width="800" height="425"></a></p> <p>Use the "Add Component" button or select categories from the left sidebar to add components and create your single-page application. </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa45hn5seocte7wc80rl5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa45hn5seocte7wc80rl5.png" alt="easyfrontend sidebar category" width="800" height="433"></a> </p> <p>I added a navbar, header, service, review, and footer. Here's how the page looks:</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjczs9aly745nye4a97y.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjczs9aly745nye4a97y.png" alt="Easyfrontend components" width="754" height="1264"></a></p> <p>You can preview it on a new page by clicking the "Preview" button.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6p3zexka8bb6sdoua1e.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6p3zexka8bb6sdoua1e.png" alt="EasyFrontend page preview" width="800" height="470"></a></p> <h3> Editing text and CSS: </h3> <p>By clicking on the edit button you can edit the content and add custom css for your needs. I will only change the content.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvbi788kiinygy427faof.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvbi788kiinygy427faof.png" alt="Easyfrontned Editor" width="800" height="376"></a></p> <p>after making the necessary changes we are ready to download it. Click on the export as a zip to deploy and check it locally. </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9zbmnjz0r7jbnklcjaa.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9zbmnjz0r7jbnklcjaa.png" alt="EasyFrontend Downlaod as ZIP" width="800" height="419"></a></p> <p>Click and Download your single-page website. </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1zka19eljnjkgbstxfig.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1zka19eljnjkgbstxfig.png" alt="downlaod easyfront" width="800" height="475"></a></p> <p>You can now check it locally or deploy it on a server. I deployed it to Vercel. </p> react bootstrap tutorial webdev Siful Islam Thu, 01 Feb 2024 09:16:48 +0000 https://dev.to/getsiful/easyfrontend-free-ui-components-of-react-tailwindcss-and-bootstrap-1ce4 https://dev.to/getsiful/easyfrontend-free-ui-components-of-react-tailwindcss-and-bootstrap-1ce4 <p>Check it from: <a href="https://easyfrontend.com/">free UI Components</a></p> react tailwindcss bootstrap javascript Siful Islam Fri, 14 Jun 2019 15:57:53 +0000 https://dev.to/getsiful/just-joined-on-dev-to-3048 https://dev.to/getsiful/just-joined-on-dev-to-3048 javascript html css