Forem: Suraj Auwal

Node js modules simplified: The Path module.

Suraj Auwal — Sun, 31 Jan 2021 17:56:39 +0000

The path module is one of the most used at the same time misunderstood modules in node js. Node js has a bunch of modules that ease our lives as developers.

What is the Path module in node?

From the node js docs, The path module provides utilities for working with file and directory paths. It can be accessed using. Yes, a module that will ease your life when working with files and directories.

Like any other modules in Node, the Path module has quite a several methods. Today, I will be discussing the five methods of the path module.

1. Path.join()

This method, in my opinion, is one if not the most used method of the path module. It is sometimes confused by beginners with the resolve method.

The join method joins (as its name says) all the path chunks passed and returns a path string. so something like

const path = require('path')

const dir = path.join('home', 'work', 'my-project');

console.log(dir);
//
home/work/my-project'

I know you might be wondering why to use the path method when you can just type out the path. Well, the join method does just more than joining path segments. It joins the segments with a platform-specific separator as a delimiter, then normalizes the resulting path. The delimiter of a macOS is different from that of windows. The join module joins these path segments with a platform-specific delimiter.

That is good. Imagine you work in a team of many developers and some of them are using Mac while you are on windows. Specifying a path explicitly will result in your program breaking on your team members' computers.

2. Path.resolve()

This is an important path method that this article will be incomplete if missing. This method is also confused with the join method. True, both of them return a path, but the resolve method resolves the path segments that are passed as arguments and returns an absolute URL.

Confusing? Let take a look at what resolve method will return passing the same argument we had above.

const path = require('path')

const dir = path.join('home', 'work', 'my-project');

console.log(dir);
//
'/home/kraken/projects/personal/community/dev.to/nest_one/home/work/my-project'

As you can see, the path returned now is an absolute URL using your home directory as the base. I use this most of the time if I need to point to a file for example a png file.

3.Path.extname()

Honestly, the names of these methods are quite self-explanatory. At a glance, you know that this method has something to do with the extension name. If you think so, then you are right. This method returns the extension of a given file. Let us take a look

const path = require('path');

const fileExtension = path.extname('/foo/bar/node.js');
console.log(fileExtension);
//
'.js'

Keep in mind, this method returns the extension of the path, from the last occurrence of the. (period) character to the end of the string in the last portion of the path.

const path = require('path');

const fileExtension = path.extname('/foo/bar/node.js.md');
console.log(fileExtension);
//
'.md'

I recently used this method to filter out images that a program I was writing does not support. A user uploads a png file and my program (as per the client's instruction) wants only a jpeg file. You can see how easy it is for me to do that.

4.Path.isAbsolute()

This method takes a string path as an argument and returns a boolean. It is the only path method that returns a boolean.
This method is used to check if a given path (passed as an argument) is an absolute path.

What is an absolute path?
An absolute path always contains the root element and the complete directory list required to locate the file.

const path = require('path');

const isValidPath = path.isAbsolute('/foo/bar/node');
// true
const path = require('path');

const fileExtension = path.extname('myfile.pdf');
//false

if you want to validate a path, you can use this method to do so.

5. Path.parse()

Last but not least, the parse method. This method is, in my opinion. very cool. The parse method accepts a path as an argument and returns an object with the "information" about the path. The 'information' returned as dir, ext, name, base, root. It is very helpful when you want to extract information about a path.

const path = require('path');

const pathProps = path.parse('/foo/bar/node.js');

//
{
  root: '/',
  dir: '/foo/bar',
  base: 'node.js',
  ext: '.js',
  name: 'node'
}

That is it, guys! I hope you have learned something out of this. I would write follow-up articles on other modules like the Event, FS, and OS modules.

Cheers and happy coding!

What, Why, When Redux for state management.

Suraj Auwal — Sat, 31 Oct 2020 18:45:58 +0000

Redux, without saying, is the most popular state management library for React. But sometimes it comes off as intimidating to beginners, well for me, it did.

Last week, I was reading through YouTube video comments when I saw someone asking why one should use redux instead of context API. This person went on with how he heard context API + hooks will make redux obsolete. (Like seriously?)
I was surprised and confused at the same time. Where and how did he get that idea from? After snooping around a little, I found out that most beginners believed that context API will replace redux and that they should not bother learning it.

This inspired me to write about the significance of redux and why everyone in the react community MUST learn and master it.

If you happen to disagree with my reasons and perspectives, feel free to drop a comment below.

So here is WHAT, WHY, WHEN redux for state management.

What is redux?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

Why you should learn and use redux.

This is perhaps the most important part of this article. I'll be frank with you, redux is not always the best option. Sometimes, depending on what you're building, you are better off with context API.
To give you an example, last month, I built an app for a client. It's a very basic app with minimal actions and app-level states. I figured out that using redux for something of that size is a bit of an overkill.
T
In that same month, I built an app for another client — a co-working space booking and management system. This app has over 10 different app-level states and a lot of actions. Imagine using context API here. I would have had one of the ugliest looking app.js file.

What I am trying to say here is that, if you are building something small, with minimal app-level states, use context API and if it's something large with lots of shared state, redux is your best bet.

Another reason why you'd want to learn and master redux is the popularity. 9 out of 10 companies that use react use redux for state management. So if you're planning on working for a company with an existing codebase, learning redux is a MUST. Some would argue you can learn it on the job, but I like learning and knowing things beforehand.

Imagine you are assigned a ticket to find and fix a bug in your company's state infrastructure(based on redux), and you don't know anything's about redux. Will you tell your manager to assign you a different ticket because you thought redux will be going away?

The last point I want to talk about is testing. I am a strong believer in code testing, so this might come off a bit personal. It is much easier for me to test redux actions than the context API.
Do the math: Easier testing = fewer bugs = quality code.

When to use redux?

Another thing that keeps off beginners from using redux is the amount of boilerplate code you need to write to set up redux. For me, that is not something big. I mean I can create a generic boilerplate and save it as a GitHub gist and use it whenever setting up redux.

Use redux when you're building something large with lots of shared state.

I plan on writing a small tutorial on how to structure your redux store, how to use the new(not so new to be honest) redux hooks, and perhaps even build a small app to elaborate better. Let me know if that is something of interest to you.

Advice on technical coding interviews.

Suraj Auwal — Fri, 17 Apr 2020 18:05:02 +0000

Technical test are scary for someone with no prior experience. I remember my first interview. It was a live coding test and I was literally shaking. Even though I was not a junior, as a freelancer, the whole interview process was very foreign. Scary foreign I reckon.
It was so scary that I was asked simple questions like the filter method and prototypes and I just sat there looking like a fool.

I did a couple of interviews after that so I'd like to share some tips that will help you as someone who has no experience with dev interviews.

Don't lie! If you're asked about a framework, language or methodology you don't know, reply with "I don't know but I am a fast learner".
If a task is vague, ask for clarification.
It's okay to make mistakes, especially in live technical test. Don't try to justify your mistakes by coming up with excuses, you'd end up embarrassing yourself.
Nervousness is a norm in live coding (believe me) . Take a deep breath and remember it's no biggie if you don't get the job, you can apply for another one.
If you get stuck somewhere, ask for the interviewer's help.
And of course, be respectful and polite even if the other person is contrary.

How to be a better react Developer.

Suraj Auwal — Mon, 13 Apr 2020 04:48:00 +0000

Hi everyone! I hope you're safe and good.

I want to talk about something different today. I want to share some tips and strategies that will help you write cleaner and better code in react.

Most of what I've written or will write in the future are about things I found difficult when I was learning to code.
As a self-taught Developer without a mentor, one of the things I found difficult was writing a clean code in react.
I know I had to get better. But how?
So I came up with a solution. Find 5 respected and professional react developers, go to their GitHub repo and find a common thing or/and pattern in their react project.

I was not trying to compare my code with anybody's. I just want to find out what these so called professionals add to their code, how they implement somethings, approaches they take and why.

As expected, things started popping out, things that are missing in my code and present in all five. Everything started to make sense. For example why add prop-types to your workflow when it's not required.

TL;DR

From that day, I started including all what I learned into my workflow. And believe me, that helped me understand react and made my code not-so-newbie-like.

Enough with the talking. I will share some tips that learned from my research and also those that I learned via projects and experience.

Here are they not in any order.

1. Prop-types

If you're new to react, you might not know what's prop-types. However those that have been working with react have at least seen or work with it a couple of times.

What's prop-types?

Basically, prop-types is a module/ package or whatever you'd call it that provides type-checking to our props.
Let's say for instance, you are expecting an object prop from a parent element, and for some reason you receive an array. That will cause a total chaos to your app , inn'it?
Here's where prop-types come into the picture. You define what type of prop you're expecting and if you pass something contrary, it'd throw an error.

Const App = ({title, id, isCompleted}) => {
//
}

App.propTypes = {
Id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
isCompleted: PropTypes.bool.isRequired

}

In the above code block , we have a component, app, that recieves three props — title, isCompleted and id. And below, we defined our prop-types, title should be a string, id should be a number and is isCompleted should be Boolean.
If we receive something contrary to what we defined, we'd get an error. That's the basic use case of prop-types. It can gets little complicated, but with time you'd learn.

Here's the link to the prop-types docs

2. Use functional components and hooks over classes.

Okay, this one is a little controversial. Some might agree with me, and other will not. I have used classes and lifecycle methods and if I have something to say regarding them, it'd be positive.

However, functional components and hooks are the future of react. React is making everything more favorable for hooks ( the react dev tools will back that claim).
In my opinion, if you're starting a new project, use hooks and functional components, but for existing codebases built with classes, don't refactor.
I personally like functional components. I mean, they are cleaner, elegant and simpler. Adding it to your workflow will significantly clean your code and make you a better Developer.

Using functional components and hooks shows that a Developer can adapt to the ecosystem. Couple of months ago, I was given a take away coding test by this company I was applying for a job. I did the whole project with hooks and the interviewer was pleased because "you're up to the trend" if I know what that means.

** I will Soon be writing a tutorial on advanced hooks soon **

3. Make your components small and reusable, but don't over abstract.

One the main feature of react is having everything in a component. Components in react are equivalent to Lego blocks — small chunks of code that build an app.

Your components should be relatively small. For example the send section of WhatsApp is a component right?
Inside that component, there's the send button component, voice message component and the text area component.
Everything is broken down into small, simple Chunks of code.
components should not only be small but also reusable. I'm not saying all components should be made reusable, only components that you know you're going to use again in another part of your application. A good example of a reusable component is a button.
If i want to create a button component, I will make it generic as possible. The size, color, Border-Radius will all be passed down as props.

That been said, you shouldn't over abstract your component. By over abstraction, I mean making all or most of your component generic.
Remember, A generic component is a component that you're sure you'd be using it in more than one place.

4. Destructure props. No more props.whatever.

This is one of my findings from the research I conducted. So before the research my code was like

const myApp = (props) =>{
 ///

   <h1>{props.title.heading}</h1>
  onChange={props.onChange}

}

Yep, ugly a** looking, I know. I can't recall the last time I did that though. Here's what I do now.

If the props is just one level deep

const myApp = ({title, onChange}) =>{
 ///
    Const {heading}= title

   <h1>{heading}</h1>
  onChange={onChange}

}

And if it's nested, for example redux state I do something like this.

const myApp = ({chat:{messages}, settings:{themes}}) =>{
 ///
    Const {sentMsg, recievedMsg}= 
    messages
    Const {dark, light}= themes

   <h1> Theme color {dark}</h1>
   <li> {sentMsg} </li>

}

Obviously, destructing is prettier and cleaner than doing the props.title.... thing.

Destructuring cleans your react code and make it very readable and once again clean.

That's it guys! I hope you enjoy it and learn something from it.

Stay safe

Array methods you must know as a JavaScript Developer

Suraj Auwal — Wed, 08 Apr 2020 17:10:56 +0000

This article is a follow up of my
object methods article

Arrays are crucial part of javascript. They let us store multiple elements in a single variable. Imagine you have 100 contacts, creating a variable for each one will be very hard. With arrays, you can store the contacts in a single variable.

Arrays come with built-in methods that give us the power to mutate and transform data as we see fit.

In this article, we'll take a look at 10 array methods and their use cases.

1. Filter()

Have you heard of Higher order functions? Basically, higher order functions are methods that take a function as a parameter or return a function as an output just like the filter method. The filter method literally filters through an array an return an output base on the condition (function) it takes as an argument.

const employees = [
  {
    id: '001',
    name: 'Siradji',
    isPermanent: true,
  },
  {
    id: '002',
    name: 'Lydia',
    isPermanent: false,
  },
];

// Filters through employees array and return permanent employees.

const permEmployees = employees.filter(
  (employee) => employee.isPermanent === true
);
console.log(permEmployees);
//  [{
//     id: '001',
//     name: 'Siradji',
//     isPermanent: true,
//   }]

2. Push()

This is perhaps one of the most used Array methods. The push method inserts the element it takes as an argument to the end of an existing array.

const fruits = ['banana', 'mango', 'apple', 'kiwi'];

fruits.push('orange');

console.log(fruits);

// [ "bananan", "mango", "apple", "kiwi", "orange"]

3. Join()

This method creates and returns a string by joining all the elements inside of an array separated by commas or string.

const names = ['Ola', 'james', 'jackie', 'nina'];
const joinAll = names.join('');

console.log(joinAll);
// Olajamesjackienina

const dashSeperator = names.join('-');

console.log(dashSeperator);
// Ola-james-jackie-nina

4. Map()

Remember Higher order functions? This also recieve a function as an argument. It creates a new array from the result of the argument it took.

const news = [
  {
    title: 'finally, tom has managed to eat jerry mouse',
    publishedAt: 10,
    isAHit: true,
  },
  {
    title: 'UFO spotted in califionia',
    publishedAt: 11,
    isAHit: true,
  },
]
const newsTitle = news.map( news => news.title)

console.log(newsTitle)
// ["finally, tom has managed to eat jerry mouse",
// "UFO spotted in califionia"]

];

5. Splice()

This method removes or replaces an element of an existing array. Note that this method mutate the original array.

//  replace an element
const cars = ['audi', 'volvo', 'benz', 'honda'];

//  @params start index, delete count, new dara
cars.splice(1, 0, 'BMW');

console.log(cars);
// ["audi", "volvo", "BMW", "benze", "honda"]

6. Concat()

I reckon everyone in the javascript community knows what concatenations is. This method is self-explanatory. From the name, it concatenates two arrays into one. The method is called on the first array, and takes the second array as an argument.

const africa = ['nigeria', 'niger', 'ghana', 'kenya'];
const asia = ['korea', 'japan', 'vietnam', 'china'];

const countries = africa.concat(asia);

console.log(countries);

// ["nigeria", "niger", "ghana", "kenya", "korea", "japan", "vietnam", "china"]

7. Some()

Ah! here comes my fave array method. This method matches every element with the function it recieve and return a boolean.
i have used this method many times and below is an example of a recent use case.

const postcodes = ['45220', '46689', '56322', '44520', '23252', '6422'];

const { postcode } = { name: 'james', paid: true, postcode: 45220 };

const isValidPostCode = postcodes.some((code) => code === postcode);

console.log(isValidPostCode);

// true

What happened here? Let say we are building an order form. We have certain postcodes that we deliver to and don't want the customer to place an order to a location that we don't deliver. so we pull out the postcode they entered in the order form(line 2) and validate it using the some method. In the above code block, isValidPostCode will be true because the postcode matches what we have inside of our postcodes array.

8. Sort()

It wont be fun if we cannot sort the elements inside of an array. Fortunately, There's a method that let us do just that. The sort method in javascript returns an array of sorted elements base on the function it recieve as an argument. By default, it sort in ascending, but we can change that.

const fruits = ['banana', 'mango', 'apple', 'kiwi'];

fruit.sort();

console.log(fruits);

// ["apple", "banana", "kiwi", "mango"]

const numbers = [9, 5, 7, 3, 2];

//  descending
numbers.sort((a, b) => b - a);

console.log(numbers);
// [9, 7, 5, 3, 2]

// ascending
numbers.sort((a, b) => a - b);
console.log(numbers);
// [2, 3, 5, 7, 9]

9. FindIndex()

Finding the index of an element inside of array can be quite daunting espcially if that array is very big. Thankfully, with the findIndex method, we can do that with ease. The findIndex method takes a function and returns the index of the first element or a -1 If the element does not exist.

const cars = ['audi', 'volvo', 'benz', 'honda'];

//  returns true
const carIndex = cars.findIndex((car) => car === 'honda');

console.log(carIndex);
// 3

//  returns false
const carIndex = cars.findIndex((car) => car === 'toyota');
console.log(carIndex);
//  -1

10. Slice()

This method slice through an array and returns the sliced part base on the starting index and slice count. it takes two arguments. The first argument is the starting index and the second argument the is the slice count from the starting index.

const asia = ['korea', 'japan', 'vietnam', 'china'];

// @params starting index, slice count
const sliced = asia.slice(1, 3)

console.log(sliced)
// ['japan', 'vietnam']

You can check out the github repo here. Don't forget to leave a star.

Thanks for reading and I hope you learn something from this article.

React without create react app. Start building your react project like a professional

Suraj Auwal — Wed, 08 Apr 2020 08:22:58 +0000

The memory of my first react app is still fresh in my memory. I can remember how ridiculously easy it was to set up a new project.
But as I go deeper into front end Development, I learned that CRA has many limitations. Don’t get me wrong, CRA is an amazing tool which I still use. But its lack of flexibility made me look for other alternatives.
There are different ways to set a react project without CRA, but in this article, I will show you how to set up a react project using Webpack and Babel
What is webpack and Babel?
Basically, webpack is a javascript bundler that bundles your static assets into one big file. Babel is a transcompiler that converts ES6 Javascript to an older version (typically, ES5) of javascript for compatibility on all browsers.
Even though I won’t be going deep into the aforementioned tools, I really recommend that you checkout their respective docs before proceeding.
Let’s get started!
I am a big fan of yarn, so that’s what I will be using throughout this tutorial.

let’s create and go into our project folder.

Mkdir react-boiler-plate
Cd react-boiler-plate

We’ll be installing packages, so let’s create a package.json file

Yarn init -y

Running this will create a package.json file that will contain the info of our app and all its dependencies.
Before installing any package, let’s start by laying the structure of our app. This of course will be simple, nothing complicated.

react-boiler-plate
public
Src
Package.json

Here we have two empty folders and a package.json. Does this structure ring a bell? Yeah, we will be mimicking the structure of our beloved CRA.
Now let’s add some packages. We’ll start with the dependencies.

Yarn add react react-dom

These packages are the only required dependencies
Let’s install the dev dependencies. I will be breaking this into two parts — the webpack packages and the Babel package.

Yarn add — dev webpack webpack-cli webpack-dev-server html-webpack-plugin

Tip: the — dev flag is similar to — save-dev in npm
Let’s get over each package.
The first package is webpack for assets bundling, webpack-cli will let us use webpack cli. Remember

yarn start

or

npm start

in create-react-app ? Webpack-dev-server gives us a development server. It comes with many things include hot reloading, that’s for later.
Let’s move on to installing Babel.

Yarn add — dev @babel/core @babel/preset-react @babel/preset-env babel-loader style-loader css-loader

So we’ve installed Babel preset for both react and the environment (browser), style loaders to handle the importation of our assets and Babel loader for our .js files.
Next, let’s create two files in our root directory.

touch webpack.config.js .babelrc

our project structure should look like this

-react-boiler-plate
public
src
.babelrc
webpack.config.js
package.json

In our webpack.config.js file, let add some code. There’s lots of different ways to write your webpack config and it all depends on your preference. I will stick to my convention in this article.
First, we’re gonna need to require two packages. One is the path Module that comes with node and the other one is html-webpack-plugin, the package we installed.

const path = require(‘path’)
const HTMLplugin = require(‘html-webpack-plugin’)

Now let’s set up our rules. This will be an array of objects. The objects is for each rule we want to set. In this project, there will be only two rules. You can add as many rules as you want depending on your needs and project.
This is one of the many reasons as to why I like webpack — flexibility.

const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [“style-loader”, “css-loader”]
}
]

The first object, We’re telling webpack to use babel-loader on all .js files in our project, but we exclude the node_modules file.
This is also the case in the second object. We tell webpack to use our style loaders on our .css files.
Next let’s export our config.

module.exports ={
entry: path.join(__dirname, ‘src’ ‘index.js’),
Output: {
filename: ‘bundle.js’,
Path: path.resolve(__dirname, ‘./build’)
},
module: {rules},
plugins: [
new HTMLwebpackplugin({
template: ‘./public/index.html’
})
}

Here, we specify our entry and output file. The entry file is not created yet, obviously. This file is similar to the index.js file in create-react-app.
The output file is where our bundled app will be created. We specify the name to bundle.js and the parent folder to build.
The module key is where we set our rules. I see many people put their rules hers, but i like to just put it in a constant and then call it here. It makes everything cleaner.
Since we have already done that we can just do

module:{rules: rules} or module:{rules} (ES6)

.
Lastly, the plugins key contains an array of all the plugins we want to use. There are many plugins which you can use in your projects. Here is a list of some.
Our webpack.config.js file should look like this:

const path = require(‘path’)
const HTMLplugin = require(‘html-webpack-plugin’)
const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [“style-loader”, “css-loader”]
}
]
module.exports ={
entry: path.join(__dirname, ‘src’ ‘index.js’),
Output: {
filename: ‘bundle.js’,
Path: path.resolve(__dirname, ‘./build’)
},
module: {rules},
plugins: [
new HTMLwebpackplugin({
template: ‘./public/index.html’
})
]
}

Before we forget, let’s create the files we specified above. The index.html in the public folder and the index.js file in the src folder.
Our project structure should look like this:

— react-boiler-plate
public
index.html
src
index.js
.babelrc
webpack.config.js
package.json

Next, Let’s configure babel. In our .babelrc file, add the presets we installed earlier. The content of this file should be in JSON format.

“presets”[“@babel/preset-env”,”@babel/preset-react”]

We have finished setting up our react project — well, 90% of it. In our index.html file, let’s add a simple html boilerplate. if you are using vscode, type the exclamation mark and press enter. This will auto generate a HTML document for you. Then add an empty div with the ID of root and save.
Our index.html should look like this

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>React boilerplate</title>
</head>
<body>
<div id=’root’></div>
</body>
</html>

Next, let’s go to our index.js file in the SRC folder. First we need to
Import React and ReactDom. After that, Let’s create a constant that will store the div that we created in our index.html file.
Our file should look like this:

import React from ‘react’
import ReactDom from ‘react-dom’
const root = document.getElementById(‘root’)

In the index.js file, let’s create a functional component called app and wrap up.
Now our index.js should look like this:


import React from ‘react’
import ReactDom from ‘react-dom’
const root = document.getElementById(‘root’)
const App = () => {
return (
<h1>Hello from React</h1>
)
}
ReactDom.render(<App />, root)

Voila! our react project is completed — mostly.
Remember how we use to start a dev server and build our app in a create-react project?

yarn start

yarn build

webpack-dev-server is an amazing tool that let us do just that. we can create our script, customize how our server should run, also offers hot reloading. You can check out the official documentation here
So let’s head to package.json to set up our scripts. Since we won’t be doing any testing and ejecting, we only need two scripts for this projects — start to start the dev server and build to compile our app.
In the package.json file, add a new key,scripts, with an object value. Inside the object, add the following code.

“start”: “webpack-dev-server — mode development — open — hot”,
“build”: “webpack — mode production”

What we added in the package.json file should look like this:

“scripts”: {
“start”: “webpack-dev-server — mode development — open — hot”,
“build”: “webpack — mode production”
}

save and exit.

Voila!

Our react project is now complete.

yarn start

will start the development server. And if everything is okay, We should see a “hello from react in our” browser.
I know that is a long one, perhaps too long. you can use this as a boilerplate for all your react projects. You can also customize it and add more functionalities and rules.
If you’re relatively new to webpack, i recommend you to learn more about it. It’s a handy tool that you can’t live without it (at least in my case).
The whole project is available on my github repo. You can check it out here

5 object methods you must know as a javascript Developer

Suraj Auwal — Mon, 06 Apr 2020 23:46:06 +0000

Almost everything is an object in javascript and unfortunately, not all of us know the goodies that it comes with.

In this article, i will show you the five most used Object methods and their examples.

1. Object.assign()

This is perhaps the most used object method in javascript. So basically, this method copies all the values from one or more source to a targeted object.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

console.log(honda);
// {type: "sedan", price: 10000, isLuxury: true}

In the above code block, we created a new object chevrolet that hold some data in it.
And for some reason we want another object with the same data. So we basically copy the data inside of chevrolet to honda using the assign method.

2. Object.create()

This method is quite similar to Object.assign() — you can make a new object base on a reference object. However, the difference is that objects created with the assign() method are linked with the reference object. Changes made to one of them will affect the other (inheritance chain).

//  with  assign
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

honda.price = 2000; // this will overwrite both
//  the price property in honda
//  and chevrolet

console.log(chevrolet);
// {type: "sedan", price: 2000, isLuxury: true}

//  with object.create
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.create(chevrolet);

honda.price = 2000;
//  change will not affect reference object (chevrolet)

console.log(chevrolet);
// {type: "sedan", price: 10000, isLuxury: true}

console.log(honda);
// {type: "sedan", price: 2000, isLuxury: true}

3. Object.entries()

The entries.() method return an array with all the data (key/values) inside of an object.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};

const chevArr = Object.entries(chevrolet);

console.log(chevArr);
// [ [type,sedan,], [price,10000,], [isLuxury,true,]]

4. Object.freeze()

This method literally freeze an object making it immutable. Properties can not be changed or deleted.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
Object.freeze(chevrolet);

chevrolet.price = 20000;

console.log(chevrolet.price);
//  10000 instead of 20000.

5. Object. is()

This method compares two objects and return a boolean.

const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

const isEqual = Object.is(honda, chevrolet);

console.log(isEqual);
//  true

Update: if you like this, you should checkout my article on array methods
That is it guys and i hope you learn something from this.
Happy coding.

Say Bye to create react app. Here's how to Build your react project from scratch with webpack and Babel.

Suraj Auwal — Sat, 29 Feb 2020 21:45:43 +0000

The memory of my first react app is still fresh in my memory. I can remember how ridiculously easy it was to set up a new project. Oh! My beloved npx create-react-app myAwesomeApp.

But as I go deeper into front end Development, I learned that CRA has many limitations. Don't get me wrong, CRA is an amazing tool which I still use. But its lack of flexibility made me look for other alternatives.

There are different ways to set a react project without CRA, but in this article, I will show you how to set up a react project using webpack and Babel.

What is webpack and Babel?

Basically, webpack is a javascript bundler that bundles your static assets into one big file. Babel is a transcompiler that converts ES6 Javascript to an older version (typically, ES5) of javascript for compatibility on all browsers.

Even though I won't be going deep into the aforementioned tools, I really recommend that you checkout their respective docs before proceeding.

Let's get started!

I am a big fan of yarn, so that's what I will be using throughout this tutorial.

let's create and go into our project folder.

Mkdir react-boiler-plate
 Cd react-boiler-plate

We'll be installing packages, so let's create a package.json file

Yarn init -y

Running this will create a package.json file that will contain the info of our app and all its dependencies.

Before installing any package, let's start by laying the structure of our app. This of course will be simple, nothing complicated.

react-boiler-plate 
 public
 Src
 Package.json

Here we have two empty folders and a package.json. Does this structure ring a bell? Yeah, we will be mimicking the structure of our beloved CRA.

Now let's add some packages. We'll start with the dependencies.

Yarn add react react-dom

These packages are the only required dependencies

Let's install the dev dependencies. I will be breaking this into two parts— the webpack packages and the Babel package.


Yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin

Tip: the --dev flag is similar to --save-dev in npm

Let's get over each package.

The first package is webpack for assets bundling, webpack-cli will let us use webpack cli. Remember

yarn start

or

npm start

in create-react-app ? Webpack-dev-server gives us a development server. It comes with many things include hot reloading, that's for later.

Let's move on to installing Babel.


Yarn add --dev @babel/core @babel/preset-react @babel/preset-env babel-loader style-loader css-loader

So we've installed Babel preset for both react and the environment (browser), style loaders to handle the importation of our assets and Babel loader for our .js files.

Next, let's create two files in our root directory.

touch webpack.config.js .babelrc

our project structure should look like this

-react-boiler-plate
  public
  src
  .babelrc
  webpack.config.js
  package.json

In our webpack.config.js file, let add some code. There's lots of different ways to write your webpack config and it all depends on your preference. I will stick to my convention in this article.

First, we're gonna need to require two packages. One is the path Module that comes with node and the other one is html-webpack-plugin, the package we installed.

const path = require('path')
const HTMLplugin = require('html-webpack-plugin')

Now let's set up our rules. This will be an array of objects. The objects is for each rule we want to set. In this project, there will be only two rules. You can add as many rules as you want depending on your needs and project.
This is one of the many reasons as to why I like webpack — flexibility.

const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'

   }
},

{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]
}


]

The first object, We're telling webpack to use babel-loader on all .js files in our project, but we exclude the node_modules file.
This is also the case in the second object. We tell webpack to use our style loaders on our .css files.

Next let's export our config.

module.exports ={
entry: path.join(__dirname, 'src' 'index.js'),
Output: {
filename: 'bundle.js',
Path: path.resolve(__dirname, './build')

},
module: {rules},
plugins: [
    new HTMLwebpackplugin({
      template: './public/index.html'
    })
}

The module key is where we set our rules. I see many people put their rules hers, but i like to just put it in a constant and then call it here. It makes everything cleaner.
Since we have already done that we can just do

module:{rules: rules} or module:{rules} (ES6)

.

Lastly, the plugins key contains an array of all the plugins we want to use. There are many plugins which you can use in your projects. Here is a list of some.

Our webpack.config.js file should look like this:


const path = require('path')

const HTMLplugin = require('html-webpack-plugin')

const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'

   }
},

{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]
}


]

module.exports ={
entry: path.join(__dirname, 'src' 'index.js'),
Output: {
filename: 'bundle.js',
Path: path.resolve(__dirname, './build')

},
module: {rules},
plugins: [
    new HTMLwebpackplugin({
      template: './public/index.html'
    })
]
}

Before we forget, let's create the files we specified above. The index.html in the public folder and the index.js file in the src folder.

Our project structure should look like this:

— react-boiler-plate
 public
   index.html
 src
   index.js
 .babelrc
 webpack.config.js
 package.json

Next, Let's configure babel. In our .babelrc file, add the presets we installed earlier. The content of this file should be in JSON format.


"presets"["@babel/preset-env","@babel/preset-react"]

We have finished setting up our react project — well, 90% of it. In our index.html file, let's add a simple html boilerplate. if you are using vscode, type the exclamation mark and press enter. This will auto generate a HTML document for you. Then add an empty div with the ID of root and save.

Our index.html should look like this

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React boilerplate</title>
</head>
<body>
    <div id='root'></div>
</body>
</html>

Next, let's go to our index.js file in the SRC folder. First we need to

Import React and ReactDom. After that, Let's create a constant that will store the div that we created in our index.html file.
Our file should look like this:

import React from 'react'
import ReactDom from 'react-dom'

const  root  = document.getElementById('root')

In the index.js file, let's create a functional component called app and wrap up.

Now our index.js should look like this:


import React from 'react'
import ReactDom from 'react-dom'

const  root  = document.getElementById('root')

const App = () => {
return (
<h1>Hello from React</h1>
)

} 


ReactDom.render(<App />, root)

Voila! our react project is completed — mostly.

Remember how we use to start a dev server and build our app in a create-react project?

yarn start

yarn build

So let's head to package.json to set up our scripts. Since we won't be doing any testing and ejecting, we only need two scripts for this projects — start to start the dev server and build to compile our app.

In the package.json file, add a new key,scripts, with an object value. Inside the object, add the following code.

"start": "webpack-dev-server --mode development  --open --hot",
 "build": "webpack --mode production"

What we added in the package.json file should look like this:

"scripts": {
    "start": "webpack-dev-server --mode development  --open --hot",
    "build": "webpack --mode production"
  }

save and exit.

Voila!

Our react project is now complete.

yarn start

will start the development server. And if everything is okay, We should see a "hello from react in our" browser.

I know that is a long one, perhaps too long. you can use this as a boilerplate for all your react projects. You can also customize it and add more functionalities and rules.

If you're relatively new to webpack, i recommend you to learn more about it. It's a handy tool that you can't live without it (at least in my case).

The whole project is available on my github repo. You can check it out here