Você pode ter visto links como /public/logo.png, ./script.js ou ../styles.css antes. Mas o que esses tipos especiais de links significam? Estes são chamados de caminhos de arquivo. Existem três sintaxes principais para conhecer. Primeiro é a barra, que pode ser uma barra invertida (\) ou barra normal (/) dependendo do seu sistema operacional. O segundo é o ponto único (.). E finalmente, temos o ponto duplo (..). A barra é conhecida como o "separador de caminho". É usado para indicar uma quebra no texto entre nomes de pastas ou arquivos. É assim que seu computador sabe que naomis-files/ aponta para um diretório com esse mesmo nome, enquanto naomis/files/ aponta para um diretório files dentro do diretório naomis. Um único ponto indica o diretório atual e dois pontos indicam o diretório pai. Você normalmente verá um único ponto usado para garantir que o caminho seja reconhecido como um caminho relativo. Remember that you learned in a previous lesson about relative versus absolute paths before. No entanto, os dois pontos são muito mais comuns para acessar arquivos fora do diretório de trabalho atual. Por exemplo, dado esta árvore de arquivos:

my-app/
├─ public/
│  ├─ favicon.ico
│  ├─ index.html
├─ src/
│  ├─ index.css
│  ├─ index.js

Se o seu arquivo public/index.html precisar carregar o arquivo favicon.ico, você usaria um caminho relativo com um único ponto para acessar o diretório atual: ./favicon.ico. Se o seu arquivo public/index.html precisar carregar o arquivo index.css, você usaria um caminho relativo com dois pontos para navegar primeiro até o diretório pai my-app, depois para o diretório src e finalmente para o seu arquivo: ../src/index.css.