In this tutorial Part 3, we will focus on creating a layout with header and footer. First we will create a folder inside src folder named as layouts to store our layout file as FrontLayout.jsx. After that we will also create components folder inside src folder to store our Header.jsx […]
Creating React(Vite) website UI with Chakra UI(Part 2)
Now in this tutorial part 2 we will test the Button component from Chakra UI to test whether our installation and configuration of Chakra UI is working properly or not. We need to install Chakra UI first to do so we will run following command in the terminal. Once above […]
Creating a React JS website(Part 6)
Now in this post we will work on Blog page to show the blogs by using API. To work on blog page, we will first create a posts component in components directory. Image shown below shows the posts components. Now this will make our blog page will look like shown […]
Creating a React JS website(Part 5)
Adding error page to the website. Now to add the error page we will first create the new page in pages directory named as ErrorPage.jsx ErrorPage.jsx Now to get this page working we need to update the App.jsx as shown in below screen. Now to see this page works or […]
Creating a React JS website(Part 5)
In this tutorial we will see how we can add active link css functionality to header page, so that when page is active the current link will have different colour. Now to do this we need to change Link to NavLink in Header.jsx file like shown in below screen. We […]
Creating a React JS website(Part 4)
In this tutorial we will install Router, and giving links to pages. Now to install the react router we need to run the following command. Once react-router-dom is installed we need to wrap the App component with <BrowserRouter>, as shown in below screen. main.jsx Now we need to change the […]
Creating a React JS website(Part 3)
Now in this part we will create Header, Footer section and Layout. In this tutorial, we will use this Wind UI Library to speed up the development. Reason behind using this library is simple it is the best out there as no configuration is needed we can just copy and […]
Creating a React JS website(Part 2)
Now in this part we will install Tailwind Css. Now to use tailwind css in our project we need to head over to tailwind CSS framework guide. In this guide head over to Vite JS After this command we need to initialise the tailwind config file, to do so we […]
Creating a React JS website(Part 1)
Let’s get started building a website with React Js. Earlier we used to create-react-app i.e. cra template to create React Js project. Now we have other way i.e. using Vite Js, so in this example we will create our website using Vite Js. We will not get into more technical […]