DEV Community: Francisco Imanol Suarez

🐱‍🏍Next.JS What is it?🐱‍👤

Francisco Imanol Suarez — Thu, 30 Apr 2020 20:25:47 +0000

Some time ago I started to investigate and try Next.js and discovered how awesome is this wonderful Framework that allows us to create our views from the server side. Next.js is based on React, Webpack and Babel. It allows us to start a project in a very simple way, since we do not have to configure anything and we only have to execute simple commands so that the project is ready.

Next.js is inspired by PHP and benefits from a great system of JavaScript modules, which allows us to export the components of our application, which allows us to perform individual tests for each component, as well as download thousands of components or modules from npm
When we talk about applications in Next.js, we have to talk about a CSS system called styled-jsx, this system was specially created to work with Next.js, this system allows us to work with all the power of CSS directly in our JS Files.
Styled-jsx gives us certain benefits, for example, when we represent the components we only generate the CSS that is being used and, once the component is no longer used, it automatically removes the CSS, which means that we will never have unnecessary CSS.

Deploy

Usually when we make an application, the final idea is to share it with everyone! This with Next.js is super easy! Since we have a next build command that generates a .next folder with all the code ready for production, once loaded on the server we just have to execute next start and that’s it, our application is running🤯🤯.

Installing NextJS

The installation of Next is simple, the only requirement is to have installed NodeJS and NPM. If you do not have it installed, go to https://nodejs.org/es/ and download the stable version (LTS). After installation, open the console and enter the following to confirm that it has been installed correctly.

After installing and corroborating that NodeJS was installed correctly, we will position ourselves on the desktop and create a folder called Next, you can do it from the console with the following commands.

Command 1: we move to our desk
Command 2: Create the folder called Next
Command 3: We position ourselves inside the folder.

Once placed in the folder, we execute the following command that will help us to configure the package.json with some predefined configurations from scratch, through this file we can control and manage all the npm packages that we will use in different projects.

After executing this command, we will proceed to download and install all the dependencies of React.js and Next.js.

Cool! We have already installed our dependencies and also our package.json, now we can start to create our first application.
In our favorite editor we open the folder and the package.json file, in which we will add the scripts to run our project both in development and in production.

Now let’s go to the most entertaining part! Our first sight! We will create a folder called pages, Next will automatically search all pages in this folder.

The router you are looking for is the same name of the route (path) that we have in the folder /pages. In the pages we will create a file called index.js in which we will add everything our application needs.

In React, each component must return a single HTML object.

Example:

GET/ Show the file in: /pages/index.js

GET/medium_ Show the file in: /pages/medium.js

In our index.js file we will add the following code

Now we execute the following command in the terminalnpm run dev y en localhost:3000 We will have our home page.

The command npm run dev start a default HTTP server in localhost: 3000, if we enter we will see a welcome message in color grey and a link to /about, which when you try to access it, will return a 404 error.

Next_ it has its own 404 page, which can be modified by creating a file called _error.js within the pages of the folder.

Now we will create in the pages a new file called about.js`in which we will enter the following code

If we return to our main page and now we click on About the pagewe can see that we enter our About page that has our name, and as we can read in the code, we include an asynchronous method called getInitialProps`.

This method is executed during the rendering process on the server, to obtain the necessary data to display on the page, and also once a route change is made, it is executed to obtain the data in the browser itself.

In general, this data comes from an API external to the server that processes it. What allows us to scale our API and our server separately.

I recommend that you read about now.sh so that the implementation is done faster and you can share a self-generated URL. This service allows you to send production applications created with Node.js, static files, among others, the best thing Now is that it guarantees that the applications automatically adjust to our needs.

🤓 You can follow me on Twitter or find me on GitHub by visiting my website

How to check if a JavaScript array contains a specific value 🤔

Francisco Imanol Suarez — Wed, 29 Apr 2020 12:55:31 +0000

If this is possible and is very easy to do in Javascript, for this we will use the includes () method

method includes()

Given a array, the includes () method determines if a specific element is found in that array, in the case that this element is found to be true and in the case that it is not, it would return false.

For example:

Thanks

If the article you liked or you found interesting, please help me with 👏 🤓 You can follow me on Twitter or find me on GitHub by visiting my website.

🧐🤓Data types and values in Javascript 💻

Francisco Imanol Suarez — Sun, 26 Apr 2020 18:16:47 +0000

The data type is a property of a value that determines the values it can take, what types of operations we can perform on it and how its internal representation.
In JavaScript we find different types of values and data types to store in variables.

Values and types
Main (primitive) types

string number boolean

Composite type

Object
Array

Special type

Null
Undefined

In the case of ES6, a new type of this denomination type is presented as a symbol data type whose values are unique and cannot be changed.

JavaScript provides an operator called typeof, this operator can examine a value and tell it what type it is:

This operator is special since it allows us to know the type (number, boolean, undefined, object) that the variable has on which we are going to perform an action.

✨ String

A string value is a set of Unicode characters (letters, digits, punctuation, and more), this data type is responsible for rendering the text in JavaScript

💡 Number

In JavaScript, no distinction is made between integer and floating point values; a JavaScript number can be any one of them (internally, JavaScript represents all numbers as floating point values).

💡 Boolean

This data type stores 1 bit can be true or false, they are used to record a state (TRUE OR FALSE)

💡 Objects

Since JavaScript is designed in an object-based paradigm. We say that an object is a collection of properties, these objects can be compared to tangible objects in real life.

Another way to access the properties of these objects is as follows:

Access (by index) an Array element

Now if we think about the name of position [1], it should be Mariano, well, when starting to program this may sound a bit strange, but in programming we start counting from the number zero (0).

💡 Undefined

This data type is used when we do not know the content of a variable or it has not yet been defined.

💡 Null

The nulldata type has only the null value. Null reserved keyword cannot be used as a function or variable name
A variable containing nulldoes not contain any type of boolean number, string or value, nor an array or object. This data type is not 0 like in other languages like C or C ++, declaring a variable of type null and using the operator typeof it interprets the value as Object not as null type

Thanks for reading 💻
🤓 You can follow me on Twitter or find me on GitHub by visiting my website
https://about.me/franciscoimanol