Day 5 - ng-select clone in React

  • Task

    • To make clone of an angular component ng-select in React.js

      Hey <GEEKS/>

      Yesterday, with the end of day I got a task, not any project related but for learing purpose only. In this task I have to build a clone of an angular component ng-select in reactjs using eslint (airbnb setup) and sass/scss. So, in this task my knowledge of previous task was to be applied. The link for the original component is this. This morning as soon I wake up I got ready and started the setup of this project.
      The foremost step was to creating the react app and then installing the dependencies which goes like this:-

      npx create-react-app ng-select-clone
npm install node-sass --savenpm run lint
npm i eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev

      Along with eslint, I also installed prettier to format my code everytime I will save it. Here --save-dev means the dependency is installed for development purpose and is not compulsory for working of the app. So, eslint dependencies are dev dependencies and they are optional for user to be included, therefor in package.json they are saved in dev object and those with --save are included in the project so they are compulsory for the right working of app.
      After installing eslint we need to initialise it, so that it can check and show error of codes we are writing.
      So, you need to run the following command in order to intitialise it:

      npm run lint

      If you are using editors like vscode, you donot need to install eslint through node, you can just add the extension to your editor and it will work well and though it is easier way to go.
      After my setup was done, the next thing I looked at was number of components to be made. If you are react developer or you ever coded in react then you would know that how important it is to count components you needed in the project before you start coding.
      Hence, in this project there were two main components, one was header and other was body. Both of these components had further sub components.
      So, I wrapped both of these components inside a container so that I could use flex here.
      In sass I used variables, mixing, modules and operations and it made my work lot more easier. The main component was in the body which was dropdown, after a lot of surfing on google I found a react package react-select, using this package I made a dropdown and did the needed. Installation of this module is as simple as others.

      npm install react-select --save

      After coding all these components, I added sass for mobile version. I tried to make it as responsive as possible and it came out to be decent for desktop and mobile screens.
      Then I hosted the react app to the github pages. Link of the deployed app is this and github code repository is this.
      Have a look and please give me feedback at my email : jaswantsinghjsn@gmail.com and PR is welcomed. After deployment I submitted my task and now I am waiting for its evaluation. I will let you know the reviews once it got evaluated.
      Till then goodbye.

      Thank You for readingā€¦!!!

      Happy Cloning šŸ’„