Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions pages/hack-school/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -337,3 +337,41 @@ Here's what each part does:
## What is Next.js?

Next.js is a framework that makes it easier to build websites with React. It helps you create fast and search-engine-friendly web pages. Next.js takes care of many technical details, like how pages are loaded and how to handle website routing (i.e., moving from one page to another). It also allows you to make parts of your website dynamic while keeping it fast. Check this [reference](https://nextjs.org/learn/basics/create-nextjs-app) to learn more.

## NPM and Terminal Commands

Here are some essential commands you'll use when working with React, Next.js, and in the terminal:

- **`npm run dev`**
Creates a new process running a development build.
*AKA: Runs your code.*

- **`npm install`**
Installs all external packages necessary to run the project.

- **`npm run build`**
Builds your project for production.

- **`npm start`**
Runs your built project in production mode.

- **`cd folder_name`**
Changes the directory that your terminal is executing commands from.
You can also use `cd ..` to go up one level in the folder structure.

- **`ls`**
Lists the files in the current directory.

- **`pwd` / `dir`**
Prints the current working directory (`pwd` on Mac, `dir` on Windows).

- **`mkdir folder_name`**
Creates a new folder.

- **`touch file_name`**
Creates a new empty file.

- **`rm file_name`**
Removes a file.

These commands will help you navigate, manage files, and run your projects efficiently.
13 changes: 12 additions & 1 deletion src/components/navbar/style.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
background-color: #111;
/* Default background for navLinks (mobile) */
background-color: var(--docs-light-bg, #e5e5e560);
}

.navLinksOpen {
Expand Down Expand Up @@ -138,3 +139,13 @@
.navLinksOpen li:nth-child(5) { transition-delay: 0.3s; }
.navLinksOpen li:nth-child(6) { transition-delay: 0.35s; }
}

/* Light mode for navLinks (mobile) */
html[class~='light'] .navLinks {
background-color: #fff;
}

/* Dark mode for navLinks (mobile) */
html[class~='dark'] .navLinks {
background-color: #111;
}