DEV Community: Samuel Lucas

Automatically generating files in your React/Next Js app

Samuel Lucas — Fri, 22 Jul 2022 23:50:00 +0000

Creating files is actually one of the first steps in building a successful application, but having to create files that follow specific pattern, multiple times plus manually can become so tiring.😪

Hello my dear reader, how are you today?
Today, I'll be teaching you how to automate file creation in react/next js using what is called Plop.

What is Plop? It is a Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.

At least, that's what they say it is, and that's really what it is.

To the main point, how do I use this awesome package?

Install it from npm
After successful installation, you'll need to create two things
a file called plopFile.js: This is where you get to define the actions you want to carry out.
a folder called templates: within this folder, you'll create a file that the plopFile will replicate, i.e the way you want the generated file to look like.

Let's talk about the templates folder. So, in this post I'll assume we are working within the components folder to create components(such as Button, Text, Inputs...) for our app.

The goal is to create the first component, Button.

Back to the templates folder, create another folder called components, and within this folder, create a file called component.hbs. Plop works with hbs files, that's why we have it that way.

Within the component.hbs file, let's create a skeleton of what we want each of our components to look like, as shown below.

import React from 'react';

export const {{name}} = () => {
  return (
    <div>
      {{name}}
    </div>
  );
}

Every component file we create will follow this format.
You may be wondering, where the heck is {{name}} coming form, Lucas? 🧐

Let's see. {{name}} is the name we give our component when creating it, such as Button, Text..., but then where are we setting it?

That's where the plopFile.js comes in. Let's head there now.

I assume you're now within the file.

A plopfile starts its life as a node module that creates a function which accepts the plop object as its first parameter.
The plop object exposes the plop API object which contains the setGenerator(name, config) function. This is the function that you use to (wait for it) create a generator for this plopfile. When plop is run from the terminal in this directory (or any sub-directory), a list of these generators will be displayed. In our case, let's change the name to components, since we'll be working with components files.
The config is where the description, prompts and actions go. What are they?🤔 description: a simple description of what this generator does prompts: a custom user interaction function for command prompt, where you ask questions such as what component you want to create. actions: as its name implies, it's the actions folder where you define in which folder you want the component created, the format to follow(templates/components/component) and other interesting things.
finally you export the function created.

Let's see it in action.

const config = (plop) => {
  plop.setGenerator('components', {
    description: 'A component generator for the app',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Enter component name',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'components/{{pascalCase name}}/{{pascalCase name}}.jsx',
        templateFile: 'templates/components/component.hbs',
      },
    ],
  });
};

module.exports = config;

Within the prompts, you'll notice we are setting the value of name to name, and that is what we got the name within the templates/components/component from. It could be anything, could be name: something or name: another_thing, just about anything.

Within the actions, there are various type of actions that could be carried out such as append, modify, addMany..., but we'll be using add today for the purpose of this post, to add a file to a folder.

The path describes what path we want the file created. You'll also notice that we have this line {{pascalCase name}}, basically we have various case modifiers such as camelCase, pascalCase, lowerCase among others so we are basically telling plop to use the pascalCase for the file we are creating, and the name is gotten from name: name.

The templateFile is where we navigate to the format which we want our file to be created.

To run what we just created, simlpy run

yarn run plop

in your terminal.

Works like magic 🧞.

Congratulations, you have completed the mission.

Thanks for taking your time to read through this.

Let me know in the comment section below if you found this useful or if you knew about this before now or how productive you think this will make you be.

Links below to useful resources:
Plop documentation

Youtube video support.

In the next post, I'll be showing you advanced features of Plop such as a case where you can append to a file.

Bye for now 👣

A cool trick to get unique items in an array in JavaScript

Samuel Lucas — Thu, 10 Feb 2022 14:16:52 +0000

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Result: [1, 2, 3, 5]

To learn more about arrays in JavaScript, visit MDN

Cashing out from web development - React

Samuel Lucas — Mon, 03 Jan 2022 19:52:32 +0000

Every time, I do code day and night, I spend my entire time learning and developing but here I am still making nothing(or just little) from web dev, what should I do?

Hello my dear reader, I'm Lucas and I'll be giving you tips and tricks to make money from web development in today's post. Stay tuned 😉.

One of the hardest things in web development is getting a paid job, could be contracts, part-time or full-time, it's not easy. But why? I'll be listing some reasons I got from research below:

Real talents are wanted
Less job openings in your region
Years of experience
You have zero network

Let me take time to talk on each reasons mentioned above.

Real talents are wanted: When we talk about real talents, it means those who have the necessary skills the particular company needs, those who have worked on several projects and have built up several skills from them, that's real talent.
Less job openings in your region: If you find yourself in a location where there are very few startups or tech companies, it could be a challenge.
Years of experience: Even though this shouldn't matter in every situation, a lot of recruiters want people with several years of experience (3-5+ years) working with other companies or so, and this could be really challenging to newbies or junior devs.
You have zero network: You could be very skilled, have a very nice portfolio and so on but still have difficulties getting a tangible paid job, why? This is simply because you aren't making yourself known to the necessary set of people/circle. It's not just about randomly posting your recent works to Facebook, Twitter...it goes beyond that. It involves tagging the necessary groups/people, those who will see your work and get in touch with you for business. If you're a student, it's not all about telling your colleagues, it goes to joining tech clubs such as GDSC, Microsoft student club and much more out there.

The big question now is, how do I start making money from web development in 2022? 🤔 a very important question.

Partner with the right niche: Reach out to other developers your close to, those who are making money from web dev already and tell them what skills you possess and ask them for help by guiding you as to how you can get your very next big hit. Don't be afraid of doing this, developers love to help each other.
Start utilising LinkedIn: LinkedIn has helped people get employed. Start by uploading your resume and constantly uploading your profile, upload links to your most recent projects. Follow relevant profiles and setup your profile to get job listings.
Create a personal website: You may find this irrelevant, but it really isn't. Having a personal website says so much about you. You get to put all your recent jobs/projects there, including testimonials from those you've worked with if perhaps you have. Ensure your website isn't unprofessional, don't use just any UI, ensure it looks very professional. Feel free to buy templates or look up some UI you can use.
Start a conversation with small business owners: Do you have a store around you where people go often time? Then that's a big hit for you I say. Walk up to the owner, and introduce yourself, tell them what you've worked on in time past(very necessary) and tell them the advantage of having a website for business(you can just look that up from Google or anywhere 😁) and assure them you can give them the best they can ever ask for. You know what to do from here if you can successfully convince them. Congrats already 🤝
DO NOT WORK FOR FREE: I felt I needed to lay emphasises on this. This is very common among beginner developers, you believe "it will build up my portfolio, blah blah blah". No don't work for free. Having this mentality of working for free will really affect you both mentally and physically. Do not care of who the person involved is, the best you can do is give discount in pricing. Ensure you receive a pay on every job you do. (I'll be writing on how to negotiate with clients very soon, if you are excited, let me know in the comment section).
Freelancing: This is a two way thing. If you're not really experienced in web development, I'll advice you do not to go into freelancing just yet. It could be overwhelming and probably discouraging, thereby killing your morale. Rather, meet with people in person(startups, stores, senior developers...) for job vacancy. But if you're confident in your skills and can build big projects, kindly watch tutorials or buy good courses on freelancing for web devs. This will help a lot.
Finally, blogging: If you're like me and you love helping young/upcoming developers, writing blog could actually land you a job. Since most of the time you'll be blogging from experience, a recruiter could stumble upon your blog posts, visit your profile(could be LinkedIn or GitHub...) and reach out to you. So you should make it an habit to go into blogging about your stack.

I'll stop here for this post and I really do hope it helps. If it sure did, kindly drop a like and comment on what you think could have been added. Remember to share as well.

Thank you 🎉

React Js roadmap - 2022

Samuel Lucas — Sat, 01 Jan 2022 01:55:34 +0000

It's so exhausting trying to figure out where to start or head to while learning something, something like React Js, so much tutorials(videos and PDFs) out there but where exactly is the starting point and what are the things needed to learn so that I can be very good at React Js?

Hello 👋, I'm Lucas and I'll be walking you through the React Js roadmap for 2022 - here you'll know so what you should learn to become a real react developer, and what you need to apply for the next job.

The best way to become a pro in this profession is by constantly keeping yourself up-to-date by reading docs of whatever technology you wish to learn. Take for example, if I were to post a tutorial on React, in the next few months it will be outdated because a newer version would be out and surely better, but then the docs would be updated. That's why you should learn to read docs first.

To develop yourself in React Js, you need certain level of knowledge in JavaScript itself. Let's see what you should know:

Variables
Functions
Data Types(objects & arrays)
Dom manipulation
Asynchronous

Knowing these I can assure you success on your journey to learning React Js.

One of the best places to learn all these from is MDN

What you're expected to know as a React Js developer are:

Components
Routing
Props
States
Inspecting/developer's tools
Hooks(useState, useEffect, useContext...)
Redux
Styling UI (chakra UI, tailwind...)
Testing(jest...)
API consumption (a good recommendation)

A very good place to learn is from the documentation

Ensure you add every of your project to github.

Some cool projects you can work on are:

Weather app (teaches you to fetch api)
To-do app(teaches you how to pass props and other things)
E-commerce(teaches you to fetch api and use stores - such as redux. Instead of writing the backend, simply use Commerce Js

While doing all these, don't be afraid of applying for jobs. Do not be afraid. Follow good resumẹ́ template. No matter how many times you get turned down, DO NOT GIVE UP

Don't be afraid to take on projects(not free, but paid). Why should I take paid projects/contract offers? The moment you collect part payment upon accepting the project, you'll know you've got to just finish it. But if it's unpaid, you might never complete or do it as supposed.

Talking about projects, how do you start building one? Consider this: I'm a react js developer but projects always seem complex to me, how do I go about with that?

The most important thing is this; no matter how small or huge the project is, always break it down into components. Example, let's create our very own Facebook.

What are the features you'll ask?

View posts
Create post

Let's assume this is all what it does.

Knowing this info already, all you need to do is very simple:

Create a component that fetches (GET) from the API and display the results.
Create a component that sends (POST) via API - within that component, you'll have input button for the post and send button.

Building with react is very easy if you learn to break things down into components

Quickly, take this test. Break Twitter home page into components and comment your answer.

If this post really does help, kindly leave a like and share. Thanks.

Reducing nodes in Dom using Fragment - React js

Samuel Lucas — Thu, 30 Dec 2021 10:42:14 +0000

I want to create a component but with minimal nodes added to the dom. How do I do that plus what's the effect of extra/unnecessary nodes getting added to the dom?

Hello my dear reader, welcome to today's tips and tricks in React. Briefly, we'll see discussing about React fragment, what it is and how it's used. Enjoy 😊

Fragments let you group a list of children without adding extra nodes to the DOM. - React official website.

React Fragments serve as a cleaner alternative to using unnecessary divs in your code.

Using divs in Fragments place, you tend to get UI malfunctions and unnecessary nodes added to the dom.

The question now is, how do I use it⁉️

import React from "react";
<React. Fragments>
  <h5>Applying Fragments</h5>
  <p>This is a simple way of doing it</p>
</React. Fragments>

Or better still

<>
  <h5>Applying Fragments</h5>
  <p>This is a simpler way of doing it</p>
</>

Not using fragments:

<div>
  <h5>Not applying Fragments</h5>
  <p>This is the casual way of doing it</p>
</div>

When you render the dom for the first two, you get something like this, which is cleaner:

<h5>Applying Fragments</h5>
<p>This is a simple way of doing it</p>

But for that with div, you get something like this, which can cause certain inconsistency in your UI:

<div>
  <h5>Not applying Fragments</h5>
  <p>This is the casual way of doing it</p>
</div>

The difference between the first two, i.e <React. Fragments>...</React. Fragments> & <>...</> is that, just in case you want to pass a key prop maybe after mapping through an array, you can achieve that only with <React. Fragments key={...}>...</React. Fragments> and not the other one.

For more info on React fragment, kindly read the official docs: https://reactjs.org/docs/fragments.html

Have you been using fragments or you're just getting to know if it? Let me know in the comment section.

Kindly drop a like and share if it helped.

Handling form input in React(including drop-down and checkbox)

Samuel Lucas — Wed, 29 Dec 2021 23:37:51 +0000

I have a form that requests for user's details - username and password, how do I get them in react?

Hello my dear reader, my name's Lucas and today we'll be solving the problem above and beyond that.

To start with, I need you to know that the way you create forms in react is very similar to that of vanilla html. Let's create a simple login form.

<form>
  <h3>Username:</h3>
  <input type="text"  />

  <h3>Password:</h3>
  <input type="password" />
</form>

This is the simple form we'll be using.

Let's start by creating a state for each input, with empty string to start with

const initialData = {username: "", password:""};

const [userData, setUserData] = useState(initialData);

Next, we destructure the state so that we can interact with its data.

const {username, password} = userData;

What we'll be doing next is this. We want to recognize each input by their names, so we will be giving both of them a corresponding name plus we'll also set the values to the state's value(username and password in useState()):

<form>
  <h3>Username:</h3>
  <input type="text" name="username" value={username} />

  <h3>Password:</h3>
  <input type="password" name="password" value={password} />
</form>

Up next, we'll create a function that updates setUserData whenever there's a change within it.

const onChangeHandler =(e) => {
  setUserData({... userData, [e.target.name]: e.target.value});
}

Or shorter

const onChangeHandler =(e) => {
  const {name, value} = e.target;
  setUserData({... userData, [name]: value})

  console.log(userData):
}

Finally all we've got to do is attach the function to each input.

<form>
  <h3>Username:</h3>
  <input type="text" name="username" value={username} onChange={onChangeHandler} />

  <h3>Password:</h3>
  <input type="password" name="password" value={password} onChange={onChangeHandler} />
</form>

I really love to do for checkbox but then I discovered it will be interesting if you tried it out yourself, using this example. Let me know in the comment section if you did it. I'd be glad to know.

To read and understand more about this topic, visit Reacts official website: https://reactjs.org/docs/forms.html

Did you find this post helpful? Why not give it a like and share with others. 😉

Conditional rendering in React

Samuel Lucas — Wed, 29 Dec 2021 10:17:31 +0000

Real quick, I have two components I want to render(show) based on the role of login status, if it's an admin then I want to display the admin UI or else if it's a user, display the user UI.
How do I do this?

Hello my dear reader, welcome to today's post where I'll be teaching the tricks and tips to solve the problem above. Enjoy you stay reading the post 📯.

When you have components you want to conditionally render, React has a way of helping you achieve that. Let's see it in action.

Let's use the problem above as an example. Say we have Admin & User components.

...
{
  return ({user && user.role === 
   "Admin" ? <Admin /> : <User />})
}

So what's going on here. If a user is logged in, he's either having a role of User or Admin. Now we checked if there's a user, if there's one, check for the role and display the corresponding UI.

What about a situation where it's just a component you want to render?
Let's take a scenario where you want to display an error if password attempt's more than 3 times.

Simply do this in your return block:
Assume you have a variable called attempt holding the number of times the user tried logging in, and a component called ErrorToast that will display the error.

return({attempt >= 3 ? <ErrorToast /> : null})

Here we are saying if the attempt is 3 times already, display the error if not, do nothing.

Or the easier way

return({attempt >= 3 && <ErrorToast />})

And that's all for now.
If you did learn something, kindly share and give it a like 😉

Error boundaries in React

Samuel Lucas — Tue, 28 Dec 2021 14:40:03 +0000

Hello my dear reader, enjoy your stay reading today's content.

Let begin with knowing what error boundaries are. Simply, they are react components that catch errors from your code, log them and display the UI you set for error(fallback).

How can this be of help to you?
Whenever you have a break(💔) in your UI, this helps discover it and effect an action immediately. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.

Read more on error boundary on the react official website. https://reactjs.org/docs/error-boundaries.html

How do you use it?
You can implement error boundary in react hooks with the help of react-error-boundary package.

npm install --save react-error-boundary

Then:
import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)

Good news is this just the tip of an iceberg, read the full docs to see more awesome features
https://www.npmjs.com/package/react-error-boundary

There we have it for this trick and tips in React hooks.

If this blog post helps, kindly give it a like and share. Thanks.

How to use fetch in JavaScript

Samuel Lucas — Mon, 27 Dec 2021 09:43:00 +0000

You received a project that you're needed to fetch data from an API and you've got no idea about it, well I'm here to teach you the necessary tricks to get started.

To fetch, wait what's fetch? There are several definitions there but they just aren't simple enough.

Simply, fetch is a way to interact with the database; pass information between frontend and backend.

There are different ways to do this, we have GET, POST, PUT & DELETE. Let's talk a bit about them.

GET: Just as the name implies, it is a way to get data through the API to the frontend.
POST: Well it's still as its name implies. This time you're sending data you created to backend through the API, could be an image or text it any other thing.
PUT: It's very similar to POST just that in the case your updating a data and then sending it back to the backend.
DELETE: Yep, it's just deleting data from the backend via API.

Use case for each.

GET: It receives a single parameter and that's the endpoint you're wanting to fetch data from.

fetch("https://endpoint.com")

POST & PUT: The fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

To know more about this, read up on https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

DELETE: The fetch() method can optionally accept a second parameter, an init object that allows you to control the method and headers

fetch('https://example.com/profile', {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json',
  }
})

To know more about this, read up on https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

There you go.

Creating variables in JavaScript

Samuel Lucas — Mon, 27 Dec 2021 08:36:18 +0000

Variables: what are variables? A variable can be thought of as a container that stores items.

There are two types of variables, you have one which you can reassign values to and another which you can't reassign values to.

Let's see the different variables we have with examples and how they function.

1. var
✅ how to use: var name = "Lucas"
✅ function: it is a "reassignable" variable. Meaning you can do something like this in your code
var name = 'Lucas'
var name = 'Samuel'
The result is that the variable name will hold the last assigned item, meaning it will hold Samuel.

2. let
✅ how to use: let name = "Lucas"
✅ function: it is a "reassignable" variable. Meaning you can do something like this in your code
let name = 'Lucas'
let name = 'Samuel'
The result is that the variable name will hold the last assigned item, meaning it will hold Samuel.

3. const
✅ how to use: const name = "Lucas"
✅ function: it is a "non reassignable" variable. Meaning you cannot do something like this in your code
const name = 'Lucas'
const name = 'Samuel'
An error will occur that you cannot reassign values it items to name.

There's a catch to var tho' and that's the fact that it's no longer in use from the previous es6.

Why? I don't know as well 🤷, just kidding. Read it up from here to learn more. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

React hooks

Samuel Lucas — Sun, 26 Dec 2021 22:35:17 +0000

React hooks...what is this? Yep, I know you might have heard of it some how, somewhere but don't have complete knowledge of what it is, if that's the case fear not I'm here to break it down to you the simplest way to digest it.

Let's start with React itself. What is React? In a simple word, it is a JavaScript framework that allows you to write your code easier and faster by reducing the amount of code you have to write, through the already made functions you can call and use; rather than creating yours afresh.. Oh that's a lot.

Now what are hooks? Hooks are now special functions that allow you to access some special functions in react; which will greatly minimize how many lines of code you write.

Let's see some examples that will make it simpler to understand.

Take for example, you want a particular section of your code to run immediately a page loads, you apply useEffect() function in react by importing it as in import {useEffect} from react.
Taking this React function as an example, you can call a function or a part of your code whenever, for example you can have an e-commerce and you want the cart items to increment when a user adds an item to cart, all you do is to check if the increment button was clicked and if it's clicked, increment the cart items by 1. Very simple and basic.

This is just a basic introduction to hooks, you can learn more from the official site https://reactjs.org/docs/hooks-intro.html