
---

# Why use that tools together?

Prettier and ES Lint can work together. _Prettier_ can keep your code in wanted format (e.g. use only single quotes) , _ES Lint_ make sure to keep code style in good shape (e.g. always use imported variable). Prettier has more built-in rules, is less editable than ES Lint. ES Lint, on the other hand, is very flexible and you can choose the rules yourself. You can find a list of React rules examples [here](https://www.npmjs.com/package/eslint-plugin-react).

## First steps

Make sure that you have both extension installed in your code editor. You can read how to install Prettier in one of my previous posts. ES Lint can be installed by following steps:

1. install ES Lint into your project:

```js
npm install eslint --save-dev
```

2. create configuration file:

```js
npm init @eslint/config
```

After answering a few questions **.eslintrc.json** file will appear in your root folder inside application. Make sure to add:

```json
"extends": ["plugin:react/jsx-runtime"]
```

to be sure, that you don't have to import _React_ in every file inside your project. You can now add your rules inside to be sure, that ES Lint watch them. If you set value to **1** VS Code will throw a warning if you break that particular rule and if you set **2** will be an error. Example below show how to make sure that you can have only one component in every file:

```js
"rules": {
		"react/no-multi-comp": 1
}
```

## Combine it together

When you installed extension and have both file:

- .prettierrc.js
- .eslintrc.json

install two more packages:

- **eslint-config-prettier** which turns off all ES Lint rules that could conflict with Prettier
- **eslint-plugin-prettier** which integrates the Prettier rules into ES Lint rules

by typing inside terminal:

```html
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

Last thing you have to do is update _.eslintrc.json_ to have following configuration:

```json
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}
```

That's it. From now on, there should be no conflicts between these two packages.

---

> see you around!


Prettier + ES + React


---

NextJS is a **framework for ReactJS**.

_framework_ is bigger then library (e.g. React), contains rules and more build-in elements. NextJS solves many basic problems and makes it easier to build React applications.

![what give us NextJS as framework](next-framework.png)

### What makes Next special?

As see above, thera are three major reasons to use NextJS:

1. preparing pages content on the server, not in browser
2. simple file-based routing
3. possibility of making backend code

#### 1. SEO and SSR or SSG

Google robots, when looking for your page created by plain ReactJS, don't see your content, because server sending all your pages inside JavaScript, which controls what you see in browser. It is not good if you care about SEO (Search Engine Optimization). NextJS has a solutions for that:

- SSR - static site rendering - pages are generated at build time with the 'build' script and possibly, if we add such an option, updated every specified period of time to keep the content up to date, which may change after the upload (e.g.: comments added by users).
- SSG - server site generation - pages are generated 'on the fly' after deploying, after each request received.

SSR and SSG use special function, which you can put inside javascript files inside _pages_ folder (about _pages_ folder below). Just there. Both function's code is visible only on server, so your credentials are safe here, NextJS take care about that.

SSR use function **getStaticProps()**, which looks like that:

```js
export async function getStaticProps(context) {
  //fetch some data here
  return {
    props: {
      data: myFetchedData,
    },
    revalidate: 60,
  };
}
```

- context - argument giving us access to our url to create dynamic pages.
- return - function return an object, which have to contain key: _props_ which value is another object whit data passing to our component as props.
- revalidate - another key, which take number as value. That number is a period in seconds after which pages will be re-rendered if they are requested.

This is just a brief highlighting of the topic. If is that interesting for you, you can read more in official [documentation](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering).

#### 2. Page folder.

NextJS has a file-system based router built on the concept of pages. When a file is added to the _pages_ folder, it is automatically available as a route.

- index routes: the router will automatically route file name _index_ to the root of the directory:

```js
'pages/index.js' -> '/'
```

- nested routes: if you create a nested folder, files will automatically routed in the same way. Next route to the index.js file when route fit to the folder name, if you want reach files inside folder with specific name, rout must contain it:

```js
'pages/blog/index.js' -> '/blog'
'pages/blog/my-post.js' -> '/blog/my-post'

```

- dynamic routes: to match a dynamic segment, you can use the bracket syntax. This allows you to match named parameters:

```js
'pages/blog/[slug].js' -> '/blog/:slug' '(e.g. /blog/id-1)'
'pages/[username]/my-posts.js' -> '/:username/my-posts' '(e.g. /tom/settings)'
'pages/posts/[...all].js' -> '/posts/*'  '(e.g. /posts/2020/id/title)'
```

More information inside [documentation](https://nextjs.org/docs/routing/introduction).

#### 3. Fullstack App

NextJS allows you to put backend code inside _getStaticPrpos()
_ and _getServerSideProps_ but also allow you to make your own REST API to make requests and responses to reach some data. You just need to make in folder _pages_ folder named: **api**. Inside, similar to file-based routing, name of js file is our api endpoint.

```js
'pages/api/fetchData.js' -> '/api/fetchData'

```

Inside you can write code similar to Node and express.js where you have access to response and request object of http request. If you want, you can [read more](https://nextjs.org/docs/api-routes/introduction).

---

> see you around!


Why do we need NextJS?


---

## What is Markdown?

Markdown is a lightweight markup language that you can use to add formatting elements to your plain text in documents. Created by John Gruber in 2004. Main goal of this language syntax is to make it as readable as possible, even before rendering it. Idea is easy: you just put some special characters inside your text (for example: **# Heading One**) and you receive a special tag (**<h1>Heading One<h1/>**) after rendering whole text document. The questions is why use such tool as markdown when you can use some WYSIWYG editor like Notepad, Microsoft Word instead? So, there are answers:

- versatility – you can use markdown to write websites, documents, notes, books, presentations, emails and messages
- portable – files containing markdown-formatted text you can open by any application which supported that format
- independent – you can create Markdown-formatted text on any device running any operating system
- safe – even in the future, if application you are using stops working, you will still be able to read your documents because of readable syntax
- common – a lot of webpages support this language (all readmes in GitHub use Markdown).
- easy – it does not take long time to learn Markdown syntax

### How does it work?

When you write in Markdown, the text is stored in plaintext file that has an .md or .markdown extension. Next some application (like Dillinger) open your text and convert Markdown-formatted text to HMTL so it can be displayed in web browsers. Alternatively you can use this app to save the text in a different format (e.g. pdf).

### How does Markdown syntax looks like?

The rules are simple: every line of text is rendered into paragraph tag <p> unless you use some special syntax that let know to the compiler that some piece of code should be treated differently. For example, below you can see some example how achieve this:

```md
# h1 title
```

Code above will return:

```html
<h1>h1 title</h1>
```

The more \# characters, the smaller the header. If yo want bold text, simply wrap content between to asterixes:

```md
**bold content**
```

Code above will return:

```html
<strong>bold content</strong>
```

To italicize text, add one underscore before and after a word op phrase:

```md
_italic text_
```

Code above will return:

```html
<em>italic text</em>
```

Want put a link? No problem, just use special syntax and enclose the link text in brackets and then follow it immediately with the URL in parentheses:

```md
[Duck Duck Go](https://duckduckgo.com)
```

Code above will return:

```html
<a href="https://duckduckgo.com">Duck Duck Go</a>
```

And so on! There are so many places in the Internet with Markdown's syntax documentation, where you can read more, for example open-source [Markdown Guide](https://www.markdownguide.org/). If you want to practice and see in real time result of your work, you can use one from many online applications to write in Markdown, like recommended by Markdown Guide [Dillinger](https://dillinger.io/).

### How I use Markdown?

All posts on this blog are made thanks to Markdown. In a simple and fast way, using the appropriate syntax, I write the content and save it in a file with the _.md_ extension. Then I import the content of these files via **Next.js** and convert it to HTML, then display in the browser. I am using the [react-markdown](https://github.com/remarkjs/react-markdown) package as a converter.

---

> see you around!


Hi, I'm Tom

Featured Posts

Prettier + ES + React

Why do we need NextJS?

Markdown language