Forem: Yessine Agrebi

Why is React so popular?

Yessine Agrebi — Mon, 29 Aug 2022 19:24:00 +0000

** Why is React so popular?
**
Before we start talking about popularity, let's understand what React is in the first place.

React is a javascript library developed by Facebook, it allows developers to easily create user interfaces for web and mobile (React Native).

Now we will demonstrate how its become so popular by listing some of its features.

*Flexibility:
*
React flexibility can offer a huge advantage, it allows us to determine how to handle routing, folders structure and even testing.

One other important aspect of React’s flexibility is its ability to be sprinkled into existing applications. Individual elements in a page can be replaced by React, until the entire application makes the transition. (This is actually how Facebook slowly moved from server-rendered PHP to client-side rendered React.).

*Developer Experience:
*
React offers the option of declaring classes or functions for components, which in turn allows HTML to be housed within JavaScript. This design is opposite to competitors like Angular or Ember, which require developers to learn a special syntax.

*Community Support:
*
React is in the top most starred repos on GitHub, and it’s downloaded more than 6.6 million times every week. But more important than the number of developers using React is the quality of their experience with the framework.

For those who need support there are hundreds of thousands of react-related stackoverflow answers available to peruse.

With an ecosystem that includes popular names like React Router, React Redux, the community is second to none.

*Performance:
*
While React isn’t necessarily the absolute fastest technologie available, its use of a virtual DOM helps it benchmark quite well compared to the competition. This saves battery and CPU, and simplifies the programming model by re-rendering the screen when necessary.

In conclusion, React is a good library to work with but it’s not perfect. It has many advantages. We will talk about them in another article.

javascript #html #react #github #design #programming #community #facebook #technologie #testing #developer

Most Used Git Commands

Yessine Agrebi — Sun, 31 Jul 2022 12:48:59 +0000

What is Git ?

Git is one of the most popular Version Control Systems. It is a crucial part of daily programming.
In this article you will find the most used commands that every developer should know.

Git Clone

GIT CLONE :For downloading an existing project

git clone <https://name-of-repository-link>

Git Branch

Give the ability to work in parallel on the same project.

git branch : New branch
git push -u : Push the modification into the branch
git branch -list : List all the branches
git branch -d : Delete the branch
git checkout : Switch to new branch (create it if doesn't exist)
git status : Give the necessary informations about the current branch.

Git add / commit / push / pull / revert

git add : Include changes to the next commit
git commit -m "commit-message": Used to save modification under a commit with generated id.
git push : Used to send the updated or the new branch to the remote branch.
*git pull *: Used to update from the remote repository
git revert : Used to undo the modification related to specific commit.

Git merge

git merge :Used to merge the current branch with the
parent branch, with these steps :

git checkout : go to a specific branch.
git fetch : Update the specific branch
git merge : Merging

Tips :the best place to get more details about
Git is documentation on the official website.
It is advised to work with Git via the Git bash
terminal . Every command mentioned up can
be used with many tags.

How to upload files with multer in your MERN App

Yessine Agrebi — Wed, 27 Jul 2022 15:07:58 +0000

File upload is a common operation for any applications. In Node.js, with the Express web framework and the Multer library, adding file upload feature to your app is very easy. In this tutorial, we are going to learn how to upload files on the server with the help of Multer and Express in Node.js and display it in React App. At the end of this blog, you will be able to integrate the file uploads in your own apps.

What is Multer?

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of the busyboy, for maximum efficiency. By this, you can understand that multer is used to handle multipart/form-data.
**

What is Multipart Data?

**
When a “form” is submitted, browsers use “application-xx-www-form-urlencoded” content-type. This type contains only a list of keys and values and therefore are not capable of uploading files. Whereas, when you configure your form to use “multipart/form-data” content-type, browsers will create a “multipart” message where each part will contain a field of the form. A multipart message will consist of text input and file input. This way using multipart/form-data you can upload files.

Multer adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.

Multer will not process any form which is not multipart (multipart/form-data).
Now Let's dive into the code..
First of all you need to install multer in your Node.js app following this command:

//installation of multer module
npm install multer --save

in this project we will store files into a folder named "images" in the "public" folder.
We will create a files named "upload.js" (named as you like) and load multer in it, i'm using the import method if you work with require feel free.
import multer from 'multer';
DiskStorage
The disk storage engine gives you full control over storing files to disk. We will create a storage object using the diskStorage() method.
The following code will go in upload.js

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './public/images');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + "--" + file.originalname);
    }
});

There are two properties, destination, and filename. They both are functions.

destination - It can also be given as a string (e.g. './public/images'). If no destination is given, the operating system's default directory for temporary files is used. It is mandatory to create a directory when you are using destination as a function. Otherwise, if you are using destination as a string, multer will make sure that the directory is created for you.

filename - It is used to determine what the file should be named inside the folder. If you don't provide any filename, each file will be given a random name without any file extension. It is your responsibility to provide a function that should return a complete filename with a file extension. Both these functions take 3 arguments - the request object, the file object and a callback function (here, cb is callback function). The 2 arguments to cb are:

null : as we don’t want to show any error.
file.originalname: the name of the files where they are uploaded.
We are going to use Date.now() + "--" + file.originalname
to make sure the uniqueness of the files names.

let upload = multer({ 
storage: storage,
 limits : {fileSize : 3000000
});

Here, we have called the multer() **method. It accepts an options object, with storage property, which tells Multer where to upload the files . and **limits (it's an option not mandatory) to limit the fileSize. (1000000 bytes = 1mb).

Other Options:
fileFilter - Set this to a function to control which files should be uploaded and which should be skipped. The function should look like this:

const fileFilter = (req, file, cb) => {
    if((file.mimetype).includes('jpeg') || (file.mimetype).includes('png') || (file.mimetype).includes('jpg')){
        cb(null, true);
    } else{
        cb(null, false);
    }
};

export default upload.single('file-demo')

.single() is used for uploading a single file.

Note that the field name that you are providing in form data should be the same as the one provided in the multer({..}).single() (here the name is file-demo)

We have to export default the upload to use it as a middleware in the routes.
No go to the routes folder and add the following code:

import upload from "./upload.js";
const router = express.Router();
router.post('/', upload, (req, res) => {
   const file = req.file.filename;
   const newImage = {file-demo : file}
   try{
     await newImage.save();
     res.status(201).json(newimage );
   }catch(error){
     res.status(409).json({ message: error.message });
   }

});

to display the images in your react app use the following :

// the url of your api following /public/images/
const url_imgs = "http://localhost:3001/public/images/"
<img
   src={`${url_imgs}${demo-file}`}
   alt=""
   />

Now, we know how to integrate file upload using multer in any application. Go ahead! make your own application with complete frontend and integrate the file upload by using the above-acquired knowledge.

Don't Stop Learning!