Step-by-Step Tutorial: Converting HTML Template to React Js - React js Tutorial

today we'll explore how to build a react website using an HTML template specifically we'll demonstrate the process by creating a fantastic react School website based on an existing online HTML template to begin open your web browser and go to Google in the search bar type W3 layouts and press enter look for the free responsive website link in the search results and click on it to access the website once you're on the website browse through the available templates and choose one that you find appealing in this tutorial we'll be using the wonderful School template click on free download to obtain it at no cost But be sure to sign in before downloading now it's time to set up your project start by creating a folder for your project let's call it react project afterward copy the downloaded zip file into this rre project folder and then proceed to extract its content once the extraction is complete you can safely delete the original zip file open the react project folder using visual studio code to begin working on your project within Visual Studio code open a new terminal to create a new react application named School use the following command npx create react app School once the project is created navigate into the school folder by entering the command CD School in the terminal to initiate the react development server use npm start as you can see your application is now up and running in your web browser before we proceed let me show you how this template looks like before we can convert it to react or jsx syntax this is the landing page this is the about page this is the courses page and this is the contact page let's begin the conversion process in your template directory you'll find four HTML pages about jhtml contact HTML courses HTML and index ttml to get started create corresponding components for these pages in your react project navigate to the SRC folder of your react project and create a Pages folder to store the page components begin with the about Page by creating a functional component named about JX repeat this process for the other Pages contact courses and index next we'll proceed by installing the react router Dom dependency for routing open a new terminal go to your react folder using the CD School command and then use the npm install react router Dom command to install the dependency once the installation is complete empty the contents of the appjs file and create a new functional component inside this component start by importing the page components you've previously created additionally inut browser router routes and route from react router Dom to enable routing within the return statement set up routers for the individual pages to resolve a name conflict with the index component let's rename it to home finally access the website in your browser to observe our current progress you'll notice that you can easily access all the pages by simply modifying the URL now let's move on to the next task which is transferring all the assets including CSS files JavaScript files images and fonts from your template to the public directory of your react application first go to the public directory of your react application and create a folder named assets then go to your template directory and copy all the assets into this newly created assets folder copy the Cs folder fonts folder images folder and J's folder and paste them into the assets folder you just created now let's proceed further open any of the files from your template for instance index.html copy all the contents of the head section then go to the index.html file in the public directory of your react application and replace all the contents within its head section with the copied content ensure that you adjust the relative Paths of the style font and script tags based on your assets folder for example verify that this link is correctly positioned since it is leave it confirm and adjust any other relative paths you may come across return to the same file where you previously copied the contents of the head section and this time copy the contents of the footer section just as you did with the head section follow the same process for the footer section verify the relative paths and make any necessary adjustments accordingly now it's time to begin transferring page data from HTML to jsx let's start with index.html to make this process simpler and more understandable I'll guide you through converting one section stepbystep step and then you can proceed to do the same for other sections and pages to start copy one section of the index.html file from your template let's say the header section into the home component you'll notice several errors on this page the first task is to replace all the HTML comments with jsx comments HTML comments are written like this while jsx comments are written like this to replace all the comments at once we'll use the find and replace tool locate the opening comment tag in HTML and replace it with the opening comment tag in jsx do the same for the closing comment tag as well the next step involves formatting let's start by updating the indentation of this component Ure that each element starts on a new line and is indented correctly to make it easier to track the opening and closing tags you can break long lines of code to improve readability for instance let's break this excessively long line of code notice that this element lacks an opening tag you can either remove it or add the opening tag in jsx it's essential to close all tags even self-closing ones like this input field add a forward slash just before the closing angle bracket to close it this rule also applies to tags like HR BR IMG audio and video among others always ensure they are properly closed while editing you might encounter warning errors hover over them to read more about them and debug as needed for instance this requires its corresponding HTML entity s self close this input field as well as you can see all the errors have disappeared and we have successfully converted this to jsx repeat the same procedure for all the other sections of the index TL page here are some potential issues to watch out for one inline styling you'll need to use an object with key value pairs you can refer to the styling video I uploaded in the channel for guidance on styling components two tags with no corresponding opening en closing tags ensure that you either remove them or add their counterparts as necessary it's advisable to go Section by section to make tracking these tags easier three class attribute replace the class attribute with the class name attribute as required by jsx four internal CSS and JS codes remove all internal CSS and JavaScript codes and place them in the index.html file in the public directory here is the complete HTML to jsx conversion of the index HTML page you can pause the video to examine it closely now let's verify the output in the browser as you can observe the landing page has been effectively converted to jsx please replicate this entire process for the other pages and give them a test run if needed feel free to pause the video and return once you finish to continue here are the converted Pages for index HTML about HTML courses HTML and contact HTML what's our next step we should identify any repetitive elements and convert them into components let's begin by organizing this on a per page basis for instance it appears that all pages share the same header footer and breadcrumbs we can set these aside as the components that comprise each page to do this start by creating a components folder within the SRC directory inside this components folder create three functional components header footer and breadcrumbs in the header component place the code for the header similarly put the code for the footer inside the footer component and the breadcrumbs code inside the bread breadcrumbs component the breadcrumbs component should accept props as an argument which will be used to pass the name of the page in your appjs file import the header and footer components position them above and below the page routers respectively afterward remove the header and footer code from all four of your pages save the code and then check the output in the browser as you can observe the website remains functional this indicates that our components have been successfully integrated now let's address the breadcrumbs in the about courses and contact Pages begin with the about page and import the breadcrumbs component my apologies it seems I misspoke earlier breadcrumbs should actually take two parameters the title of the page and the page name let's correct that now that we've made that adjustment proceed to use the breadcrumbs component in the about component provide it with the page name and title properties repeat the same process for the contact and courses Pages let's check the outputs in the browser as you can see we're enhancing code reusability and optimizing the templates efficiency the component has been seamlessly integrated you can repeat this entire process for generating components for any recurring elements in your templates start with larger elements and work your way down to smaller ones like buttons the more recurring patterns you identify the more efficient your code will become thanks to increased code reusability the next and final step in this tutorial is setting up navigation after all you'll want to navigate from one page to another right you might have noticed that I've been manually typing links into the browser which isn't the typical behavior for web applications to address this let's go to the header component update all the anchor tags in the header component to correspond with the roots you've created in the app component for instance replace all links to index.html with a forward slash to root to the home component similarly replace courses. HTML with courses contact HTML with M contct and about. HTML with an about to route to their respective Pages save your code and test the navigation links in the browser you'll notice that your navigation Works flawlessly to prevent the the page from refreshing during navigation you can use the link element from react router Dom instead of the anchor tag for more details on this you can refer to the video I covered in the full stack development guide additionally make sure to handle events such as onclick and onsubmit by using camel casing for event names and ensure that their Handler functions are correctly set for further guidance on this topic you can also refer to the A4 mentioned video congratulations your template is now ready for use the extent to which you decompose the template further depends on your specific requirements however at this point your application is fully functional you can find the complete source code for this project in my GitHub repository which is linked in the video tutorial feel free to use it to meet your needs and don't forget to give me a follow on GitHub if you found this video tutorial helpful please consider giving it a thumbs up and subscribing to the channel until next time goodbye

Channel: Lenntecs

Views: 8,051

Keywords: #ReactDevelopment, #HTMLTemplateIntegration, #WebDevelopmentTutorial, #ReactRouting, #CodeReuse, #FrontEndDevelopment, #WebDesign, #ReactComponents, #SEOFriendly, #ReactSchoolWebsite, #FullstackDevelopment, #GitHubRepository, #WebDevelopmentGuide, #ReactNavigation, #CodeOptimization, #JavaScript, #HTMLtoJSX, #ReactBeginners, #ReactJS, #WebDev, #CodingTutorial

Id: j9cv2Z-NqbM

Length: 15min 0sec (900 seconds)

Published: Sat Oct 07 2023