DEV Community: jyeett

Drag and Drop in React with React DnD

jyeett — Fri, 14 Jan 2022 18:39:51 +0000

Drag and drop is a common feature that many websites you interact with may have. While there are ways to do this with vanilla javascript, html, and css, it doesn't have to be that hard with React DnD. Here we will go through a super simple example of how to implement drag and drop functionality.

Getting Started

Once you have your react application set up, you will want to install React DnD as well as the backend which takes care of all the HTML drag and drop functionality behind the scenes.

npm install react-dnd react-dnd-html5-backend

Importing and Initializing SetUp

Now that we have React DnD in our project packages, we will want to wrap the main component that is being rendered with a DndProvider. Be sure to import DndProvider and the Backend from the packages you just installed. Our HTML5Backend will be passed as a prop to the DndProvider component.

Next we will take a look at that Dragdrop component, which will render the interface for our drag and drop example.

Containers and Items

The goal of this tutorial will be to drag images from one container to populate an initially empty drop board. We will start with an array of objects that will store our image urls attached to an id number. This will become important a little bit later when specifying what image we want to drop into our drop board.

Then to render our pictures, we will map over our list and send each individual picture to a separate Picture component. All the picture components we accumulate will be added to the initial box that images can be dragged from.

Now we'll take a look at our Picture component which is taking in the url and id as props from our list of images.

Draggable Component

We want our pictures to be draggable, so this is where we will use the useDrag hook from React DnD.

Notice how useDrag is being initialized, with the object isDragging, and a ref drag. The useDrag hook is initialized with an object containing keys type, item, and collect. The type can be named arbitrarily, but we will soon see that our Drop hook will have to take the same type so it can receive the correct item. Our item will use the picture id so our app knows which picture has been selected to drag. Finally, React DnD looks for our user's action through monitor to determine if an item is currently being dragged or not. This response information is associated with the collect key.

Our final return for the Picture component will take in the drag ref and isDragging boolean so we can make some stylistic changes when the user is dragging an item.

Dropping Items

Now that we can drag items, we need to have a place to drop them. Back in our Dragdrop component, we can use a state variable to hold an array of all the items we are dropping into the drop board. Then similarly to the useDrag hook, we will now use the useDrop hook to take our item and add it to our drop board.

Alternatively to drag, isOver and drop will now be used to see if the item is being held over a valid place to drop. The useDrop hook will look to accept the type that was specified in our draggable component. When the item is dropped over a valid section, the item will be added to the board state, filtering from the original list of pictures by the id that we gave the item. And again, to determine if the user is holding the item over a valid place to drop, the monitor will look to see if it is over a corresponding container.

Once we have the new updated board in state, we can render the picture again but this time in the new drop board. To make a new container where we can drop items, we need to add the drop ref. To visualize, we can again use isOver to change some styling about our drop container.

Final Product

Now with a bit of styling to our components we can see the following when dragging one of the images over the drop board.

Once it is dropped, the board will have our new picture!

These are the css styles I used for this simple example:

I would highly recommend taking a look at the official React DnD documentation where they give even further capabilities to this library.
https://react-dnd.github.io/react-dnd/about

If you're interested in the code used for this tutorial you can find the full repository here:
https://github.com/jyeett/dragdrop

What is Bcrypt and Why?

jyeett — Thu, 23 Dec 2021 13:35:48 +0000

In a large majority of the apps we use today, there will be a sign-in feature that requires you to have an account associated with a username or email, and a password. But how can we ensure that our password will be safe from malicious attacks targeting our data? To do this, our app will need a way to encrypt our user's password and store it in a place where it can only be accessed on the backend. While there are many algorithms out there that can do this, we will talk a bit about why bcrypt is one of the leading choices.

What is Bcrypt?

Bcrypt is an algorithm that will allow your application to take the user inputted password and convert it into a hash, which can be thought of as a "digital fingerprint." This hash cannot be reversed back into the original password, so upon login, the application must compare hashes to determine if the correct password was given. Creating just this hash may sound pretty good, but bcrypt can make it better still. Bcrypt will add a random chunk of data called a salt to the password before it is hashed to make it even more unique. To top that off, there is an adaptable cost parameter that can be used to control the number of iterations the algorithm will go through. We will talk about the importance of the cost in the next section.

Why Bcrypt?

What makes bcrypt a bit more special than some other encryption algorithms is that it is considered a slow algorithm. Many algorithms you may be familiar with are looking for the fastest possible runtime in order to maximize optimal response time and space complexity. However in the case of bcrypt, we want the slowest runtime within reason of our user experience. Slowing down this algorithm reduces the possible number of 'guesses' an attacker could make to access your password. For example, we could have users wait for our algorithm to run for 1 or 2 seconds before logging them in, but this amount of time would drastically slow an attacker who would want to try thousands of passwords a second. The cost is what controls how optimized our bcrypt algorithm will be. When deciding on a cost, you want to find a balance between security and usability. The higher the cost, the more secure it will be, but the longer it will take to run.

Comparing to Other Encryption Algorithms

Bcrypt has been compared largely to md5 and SHA algorithms when considering cryptography. The main difference as previously mentioned is that bcrypt is a slow algorithm, while both md5 and SHA are built to be fast. Md5 has been found to be severely compromised due to the fact that its hashes can easily be read through a collision attack, where modern computers can find matching hashes in a matter of seconds. SHA1 in particular is comparable to md5, while the SHA-2 series of algorithms has been built to be more robust, but still has the vulnerabilities of being a fast algorithm.

Bcrypt Compatibility

Being one of the leading encryption tools, bcrypt naturally has implementations in many languages such as C based languages, Golang, Java, Python, PHP, Ruby, and others. In Ruby on Rails for example, by adding the bcrypt gemfile to your application, you will have access to the method "has_secure_password" which includes all of bcrypt's necessary functionality, making implementation much easier on developers. Likewise in other languages, there will be many built in methods to the respective libraries.

If you would like to learn more about bcrypt here are some great resources:

The Basic Necessities of a Mock User Authentication with json-server-auth

jyeett — Wed, 24 Nov 2021 10:56:02 +0000

When first building a react app as a beginner, you may have all these cool ideas you want to include in your project, but the one thing holding you back is a user authentication system where you can store the information of different users to your app. Maybe you want to hone your skills on the front-end and just don't have the resources to build out an extensive back-end to handle this. Here, we will walk through the BARE MINIMUM of what you need to do to mock this functionality.

THE LIBRARIES

Our example will be making use of the json-server and json-server-auth libraries to make all the magic happen. Using both in tandem will allow us to prototype and mock our front-end application with an authentication like system. These libraries will make use of a local JSON file to store all of the data as if we were making a request to a server. Instead, json-server will watch our database JSON file to retrieve that information fully on the client side.

To install json-server and json-server-auth in your project run the corresponding command depending on which package manager you are using for your react app:



# NPM
npm install -D json-server json-server-auth

# Yarn
yarn add -D json-server json-server-auth

CONFIGURING YOUR FILES

Make sure to include a JSON file where you want to store your data (we'll call this db.json) and give it a collection. The name of that collection is important, and has to be named 'register', 'signup', or 'users'. When you are making a POST request, json-server-auth will look for these to route correctly. For our example we will use 'users'.



{
 "users": []
}

Now you are set up to create any sign up and log in forms necessary to be able to manage users! To run our react app with json-server auth, run the following command in one terminal:



json-server --watch db.json -m ./node_modules/json-server-auth

Then you may start your react app with the appropriate command:



#NPM
npm start

#YARN
yarn start

Going through the flow of a new user, we will first want to sign up component that will be shown on our front end. Here we have set up a controlled form that will be used to collect our new user information and on submit, will create the new user in our database.



import { useState } from "react"

function Signup() {
    const [formData, setFormData] = useState({
        email: '', // required
        password: '', // required
        username: '' // optional
    })

    function handleSubmit(e) {
        e.preventDefault()
        fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {'Content-Type' : 'application/json'},
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data => console.log(data))
    }

    function handleChange(e) {
        setFormData({...formData, [e.target.name] : e.target.value})
    }

    return (
        <div>
            <h1>Signup Form</h1>
            <form className='login-form' onSubmit={e => handleSubmit(e)}>
                <input type='text' placeholder='Username' value={formData.username} name='username' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Email' value={formData.email} name='email' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Password' value={formData.password} name='password' onChange={e => handleChange(e)} ></input>
                <button className='login-btn' type='submit'>Sign Up</button>
            </form>
        </div>
    )
}

export default Signup

Looking at our handleSubmit function, we'll want to make a POST request to /users of where our localhost server is running. The formData body that we are giving that request MUST include at least 'email' and 'password', while all other keys can be optional for additional user information.

Next for our login component we can define as follows:



import { useState } from "react"

function Login() {

    const [formData, setFormData] = useState({
        email: '', // required
        password: '' // required
    })

    function handleSubmit(e) {
        e.preventDefault()
        fetch('http://localhost:3000/login', {
            method: 'POST',
            headers: {'Content-Type' : 'application/json'},
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data => console.log(data.user))
    }

    function handleChange(e) {
        setFormData({...formData, [e.target.name] : e.target.value})
    }

    return (
        <div>
            <h1>Login Form</h1>
            <form className='login-form' onSubmit={e => handleSubmit(e)}>
                <input type='text' placeholder='Email' value={formData.email} name='email' onChange={e => handleChange(e)} ></input>
                <input type='text' placeholder='Password' value={formData.password} name='password' onChange={e => handleChange(e)} ></input>
                <button className='login-btn' type='submit'>Login</button>
            </form>
        </div>
    )
}

export default Login

We have a very similar POST request to our sign up form, however this time we are only looking for the user's email and password in order to authenticate existing users in our database. Also note we are posting to /login in this instance even though we do not explicitly create a login collection.

OUR FRONT-END

You will want to style your form components to your liking and perhaps have proper routing to the corresponding pages in your app, but for simplicity we will render them on one page to demonstrate json-server-auth. Rendering our components to the DOM we now have:

Our user can then input information to sign up and once submitted, will post to our db.json file our new user:



{
  "users": [
    {
      "email": "user@email.com",
      "password": "$2a$10$TGpBQYJF6bQFEipnwaaoiuCRVht/.jAyrOYQnq8Xz5CvXYNu6O2LO",
      "username": "myusername",
      "id": 1
    }
  ]
}

Notice that json-server-auth has encrypted the user's password, but once we log in with the appropriate data, we will be able to access the contents of that user object. Once our user submits their log in form, we can access their data from our fetch's response. In our log in component above we log data.user and that gives us the following:

From this data we can access the username, email, and an id given to our user.

WRAPPING UP

On a larger scale for your applications, you will probably make use of more optional fields when it comes to creating your user's information. However, once you are able to handle the user's log in, the sky is the limit to what you can do with their data. This will work at a basic level with just an email and password, but if you wish to read more about json-server-auth and some of it's further capabilities with tokens or authorization flow you can find its documentation here.

Breaking Down Array Iterator Methods with Callback Functions

jyeett — Fri, 12 Nov 2021 10:54:35 +0000

At first glance, figuring out how to use all the different array methods can be confusing and difficult to understand. Why is there a function declaration inside my array? What does the arrow I see so often do? Where did that random variable inside the method come from?? Isn't that variable undefined???

It doesn't have to be this complicated even if it looks like it. Once you understand the pattern these array methods share, you will be able to take any array and mutate its data to your heart's content.

The Array Methods

Now there are many array methods, but our focus will be those that take in callback functions. A few common ones to name are map, filter, forEach, find, and reduce. What makes these methods so special as to take in a completely new function? They are iterable methods! That means it will look through each individual element in the array and perform the function that is declared. The array methods do have their specific purposes though, so be mindful of what you want to accomplish and choose the appropriate method. It is best to know what you want to do with your data during and after the method call and then check the return value of your method.

The Callback Function

If you look at an MDN document for your array method, for example map, you will see under the parameters "callbackFn". This means you must create a function inside of your method call. There is more than one way to do this so we will take a look to better understand how they work.

Here we are creating an anonymous function with a parameter of element. Our map method will iterate through our array and one at a time, pass each element to the function we created. Every time our callback function returns, it will add the modified element to a new array. Once map passes through all the elements in the array, we will have a new array with each element acted upon by our callback function.

A similar, shorter alternative will be to use an arrow function. Here we can use the element parameter in the same manner and take advantage of the arrow function's implicit return.

To show the same callback function structure in another array method, let's take a look at filter. Again, our element parameter is looking at each individual element and our function is implicitly returning a boolean based on the condition that the element is not yellow. Filter will add to a new array each element that returns true in that condition.

Conclusion

At a basic level it is the most important to understand how our callback function works within array methods. Identify what the parameter is and what kind of elements are going to be passed in. Once the concept of iterating through the array one element at a time clicks, you will be ready to tackle any of the array iterator methods.