DEV Community: Sedrick Tha Dev

How To Set Up a React Project with Vite. Faster than CRA! - by Sedrick

Sedrick Tha Dev — Tue, 08 Nov 2022 13:37:35 +0000

Using npm

The company NPM claims it found more than 1,300 malicious npm packages in 2021 in npm. That's bad, but 1,300 out of 1.8-million is only 0.007222%. If you were to just randomly grab JavaScript packages for your program, odds are you'll be safe. As of 03 Feb,2022.

So what is better than npm?

In terms of speed and performance Yarn is better than NPM because it performs parallel installation. Yarn is still more secure than NPM. However, Yarn uses more disk space than NPM. According to "knowledge-hut".

So what is the alternative solution?

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

How to install Vite
$ npm create vite@latest - using npm.

$ yarn create vite - using yarn.

Setting up our React-vite project

yarn create vite

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
      - create-vite
      - cva
? Project name: » react-vite-project

After entering your project name, Vite will prompt you to select a framework:

Output

? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

After setting up the framework, you will see an output that the project has been scaffolded. Vite will then instruct you to install dependencies using Yarn:


Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

  cd digital-ocean-vite
  yarn
  yarn dev

Done in 129.89s.

Navigate to your project folder as directed:

$ cd digital-ocean-vite

Then, use the yarn command to install the dependencies of the project:

`$ yarn`

After installing all the dependencies, you will see how long it took to install dependencies:

Output
success Saved lockfile.
Done in 43.26s.

Now to start the dev server, just simply type the following and you're good to go.

$ yarn run dev

If you reached this far, your're AWESOME and thank you!

How to implement Lazy Loading in REACT | code splitting

Sedrick Tha Dev — Wed, 17 Aug 2022 09:35:00 +0000

Here is a simple App component:

import Bids from './components/Pages/OnlineAuction/Auctions/Bids'
import { GeneralGoods } from './components/Pages/Galleries/GeneralGoods/GeneralGoods'

class App extends Component {
  render() {
    return (
    <div>
      <BrowserRouter>
      <div>
        <Routes>

            <Route path="/galleries-general-goods" element={<GeneralGoods />} />

        </Routes>
      </div>
      </BrowserRouter>
      </div>
    );
  }
}

export default App;

React imports all the components as soon as the Application starts. But there's a problem to this.

React takes some time to load all components and the App is accessible only after all the components have been imported.
So if a user to your site or app does not visit 7 out of 8 of your components, they will still be loaded and this has an impact on the performance of your app.

Luckily, there is a solution made available to us by REACT.

Lazy Loading
We can choose when to load the required components. So components are only imported by REACT App only when the relevant route is visited.

Below are the 5 simple steps to achieve this:
1- Import Lazy & Suspense from REACT.

import {lazy, Suspense} from 'react'

2- Use the import function

const myComponent = () => import('./components/myComponent')

3- Wrap your imports in lazy()

const myComponent = lazy (() => 
import('./components/myComponent'))

4- Wrap the returns inside Suspense()

function App() {
    return (
      <Suspense>
        //ALL YOUR RETURN COMPONENTS HERE
      </Suspense>
)
}

5- Specify fallback for Suspense()

<Suspense fallback={<div><p>I am Loading</p></div>}
    //ALL YOUR RETURN COMPONENTS HERE
</Suspense>

Complete component should be something like this:

import {lazy, Suspense} from 'react'
import {Switch, Route} from 'react-router-dom'
const Bids = lazy(() => import('./components/Bids'))
const GeneralGoods = lazy(() => import('./components/GeneralGoods'))

function App() {
    return (
      <Suspense fallback={<div><p>I am Loading</p></div>} >
<Switch>
       <Route path="/bids" exact>
         <Bids />
       </Route>
       <Route path="/goods" exact>
         <GeneralGoods />
      </Route>
</Switch>

       </Suspense>
   )

}

If you managed to reach this far, thank you very much. I also post similar content on LinkedIn at [https://www.linkedin.com/in/eng-sedrick-nyanyiwa-39110aa6]

Create charts in your React app.

Sedrick Tha Dev — Mon, 11 Jul 2022 07:09:32 +0000

In this case, we will use Billboard.js which is a JavaScript chart interface based on D3.js. The library supports a wide range of chart types such as area, bar, line, gauge, scatter, candlestick, polar, pie, and etc.

INSTALLATION
of from the terminal inside your project folder, run either the below:

npm i billboard.js
yarn add billboard.js

USAGE
Locate the section where you want to render the chart inside your component:

import {bb, area, bar, zoom} from "billboard.js";

class Welcome extends React.Component {

// generate the chart
generate = () => {
var chart = bb.generate({
    bindto: "#chart-area",
    data: {
      // for ESM import usage, import 'line' module and execute it as
      // type: line(),
      type: "line",
      columns: [
          ["data1", 30, 200, 100, 400, 150, 250] // or you can load data from an API
      ]
    },
    zoom: {
      // for ESM import usage, import 'zoom' module and execute it as
      // enabled: zoom()
      enabled: true
    }
});
}
  render() {
    return <div id="chart-area"></div>
  }
}

Token authentication requirements for Git operations

Sedrick Tha Dev — Sat, 14 Aug 2021 12:58:02 +0000

Hi guys!
Github recently some emails warning us about some of the deprecated methods of authentication we were using to push, clone etc on our repos. And incase there were some like me, we ignored this til the day it all stopped working and got stuck.

Anyway, don't worry. There's an easy I found to fix this asap.

In the upper-right corner of any page, click your profile photo, then click Settings. Settings icon in the user bar
1. In the left sidebar, click Developer settings. Developer settings
2. In the left sidebar, click Personal access tokens. Personal access tokens
3. Click Generate new token. Generate new token button
4. Give your token a descriptive name. Token description field
5. To give your token an expiration, select the Expiration drop-down menu, then click a default or use the calendar picker. Token expiration field
6. Select the scopes, or permissions, you'd like to grant this token. To use your token to access repositories from the command line, select repo.
7. Selecting token scopes
8. Click Generate token. Generate token button
9. Copy safe your Newly created token as you will use this as your password every timeyou want to perform a push.

**** Warning: Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs.

Using a token on the command line ###########

Once you have a token, you can enter it instead of your password when performing Git operations over HTTPS.

For example, on the command line you would enter the following:

$ git clone https://github.com/username/repo.git
Username: your_username
Password: your_token

Happy Coding!

Looking for an easy way to deploy your Dev build React project?

Sedrick Tha Dev — Sun, 01 Aug 2021 07:58:15 +0000

Assuming you already have an account on Github and Heroku

Create a new repository on github,
Open your terminal and navigate to your React project,

3. The below commands will initialize your project with github and link it to the repository you created in step 1.

FOR THE FIRST PUSH ONLY
git init
git add .
git commit -m "my first commit message, can be any message"
git remote add origin https://github.com/repositoryName.git
git remote set-url origin https://github.com/yourGithubUserName/repositoryName.git
git push origin master
git push --set-upstream origin master

FOR THE SECOND PUSH ONWARDS, YOU WILL NOW USE:
git add .
git commit -m "changes made in the files being committed"

git push

On Heroku, create a new app and give it a name of your choice (NB: name will be used to create a subdomain for your app)
Connect the Heroku App with your Github repo created in step 1.
Allow auto deploy so that whenever you do a git push, those changes will now reflect on Heroku as well.
After build is success, use the url given or simply visit YourHerokuAppName.herokuapp.com

Remember, you will only be using the below 3 commands onwards after this:
git add .
git commit -m "changes made in the files being committed"
git push

HAPPY CODING! 👨‍💻

The ultimate list of places you can host your apps - free:

Sedrick Tha Dev — Mon, 21 Sep 2020 14:23:19 +0000

Free Hosting The ultimate list of places you can host your apps for free. Enjoy.

Netlify: https://netlify.com
FIrebase: firebase.google.com
AWS: aws.amazon.com
Heroku: heroku.com
Github Pages: pages.github.com
Vercel vercel.com
Surge: surge.sh
Render: render.com
Gitlab Pages docs.gitlab.com/ee/user/project/pages

If you liked this article, be sure to ❤️ it.

3 Useful tricks for every new developer out there...

Sedrick Tha Dev — Thu, 17 Sep 2020 06:58:05 +0000

1- KNOW HOW TO SEARCH 🕸 🙃
What will be the ideal solution is some tool that you can use to find the piece of code that you are looking for. Possibly, a file searching tool. Many of them exist, I use AstroGrep at work. It is a GUI version of grep for Linux. What it helps you to do is: to search for a piece of text through a directory.

2- READ THOSE ERROR MESSAGES 😫
What I discuss is simple, but paying close attention to those small details is a time-saver. Eventually, you will become self-reliant and more productive at your job. YES! THEY ARE DISPLAYED FOR YOU.

3- MY CLOSEST FRIEND 🕺💃
Try debugging the application by stepping through the code and see how it works. This will help you to have a better sense of what the code is doing. STEP BY STEP...

CONCLUSION 🏁
The goal is for you to become a better self-reliant developer. Thanks for reading.

HAPPY CODING!🎊

How I became an efficient software engineer

Sedrick Tha Dev — Mon, 14 Sep 2020 09:43:29 +0000

AUTOMATE
Personally, if I find myself doing twice something that I can automate, it is time to write a script.

PREMATURE OPTIMISATION
Your focus should be to write code that works and later make it efficient. Write code, use a profiler to find the real bottlenecks, and focus on optimizing them.

RUBBER DUCK DEBUGGING
A rubber duck in use by a developer to aid code review

In software engineering, rubber duck debugging is a method of debugging code. The name is a reference to a story in the book The Pragmatic Programmer in which a programmer would carry around a rubber duck 🦆 and debug their code by forcing themselves to explain it, line-by-line, to the duck.

Adding Twitter to your website...

Sedrick Tha Dev — Mon, 14 Sep 2020 08:33:12 +0000

Building a dynamic website for a client and want to escape the struggle of developing a blog from scratch?

Convince them to use twitter! Follow the below link and just type in any keyword such as: -message -handle -tweet etc.

https://publish.twitter.com/#