|
| 1 | +# Lesson Plan |
| 2 | + |
| 3 | +## Part 1 |
| 4 | + |
| 5 | +### Why React and Next.js? (10 min) |
| 6 | + |
| 7 | +- Limitations of Javascript |
| 8 | +- Purpose of React |
| 9 | +- Purpose of Next.js |
| 10 | + |
| 11 | +### Thinking in Components (10 min) |
| 12 | + |
| 13 | +- What are components? |
| 14 | +- Breaking down UI into reusable components |
| 15 | +- Hierarchy and composition of components |
| 16 | + |
| 17 | +### Creating and running a Next.js app (10 min) |
| 18 | + |
| 19 | +- Creating a new app using `npx create-next-app@latest` |
| 20 | +- folder structure |
| 21 | +- Running the app using `npm run dev` |
| 22 | + |
| 23 | +### Basic Routing (10 minutes) |
| 24 | + |
| 25 | +- Explanation of routes |
| 26 | +- Creating subfolders in `app` directory with `page.jsx` file. |
| 27 | +- Create a component that defines a page |
| 28 | + |
| 29 | +## Part 2 |
| 30 | + |
| 31 | +### Writing your first static component (20 min) |
| 32 | + |
| 33 | +- Creating a Functional Component |
| 34 | +- Returning JSX |
| 35 | + - Single Root Element Requirement |
| 36 | + - Fragments |
| 37 | +- Using components inside components |
| 38 | + |
| 39 | +### Use {} to execute JS inside JSX (10 minutes) |
| 40 | + |
| 41 | +- Embedding Expressions in JSX |
| 42 | +- Conditional Rendering |
| 43 | + |
| 44 | +### Setting attributes (5 min) |
| 45 | + |
| 46 | +- HTML attributes |
| 47 | +- className |
| 48 | + |
| 49 | +### Importing / exporting .jsx (5 min) |
| 50 | + |
| 51 | +- defauls exports and named exports |
| 52 | + |
| 53 | +### Importing .css (5 minutes) |
| 54 | + |
| 55 | +- Global styles vs. component-specific styles |
| 56 | +- CSS modules in Next.js |
| 57 | + |
| 58 | +## Exercises |
| 59 | + |
| 60 | +### Exercises Part 1 |
| 61 | + |
| 62 | +#### 1. Set up a new Next.js project (5 minutes) |
| 63 | + |
| 64 | +- Create a new app using `create-next-app` following [Setting up a new Next.js app](#setting-up-a-new-nextjs-project). |
| 65 | +- Start the web app |
| 66 | + |
| 67 | +#### 2. Writing static components (10 minutes) |
| 68 | + |
| 69 | +- Create a functional component called `Greeting` that returns an `h1` element with the text "Hello, React!". |
| 70 | +- Create a functional component called `Card` that returns a `div` element with a nested `h2` element and a `p` element. The `h2` should display the text "Card Title", and the `p` should display the text "This is a card component". |
| 71 | + |
| 72 | +#### 3. Nesting components (10 minutes) |
| 73 | + |
| 74 | +Create a functional component called `Cards` that renders two instances of the `Card` components from the previous exercise |
| 75 | + |
| 76 | +#### 4. Executing JS inside JSX (10 minutes) |
| 77 | + |
| 78 | +Create a functional component called `Person` containing two constants `name` and `age`. The component should display the text: `{name} is an adult` if the age is 18 or higher or `{name} is a minor` if the age is less than 18. |
| 79 | + |
| 80 | +### Exercises Part 2 |
| 81 | + |
| 82 | +#### 5. Setting properties such as className and value (15 minutes) |
| 83 | + |
| 84 | +- Create a functional component called `Button` that renders a `button` element with a `className` prop set to `btn btn-primary`. |
| 85 | +- Create a functional component called `DangerButton` that renders a `button` element with a dangerous text and a `className` prop set to `btn btn-primary`. |
| 86 | +- Create a functional component called `TextInput` that renders a text input field with a placeholder value `Type something here`. |
| 87 | +- Create a functional component called `ProfileImage` that renders an image of a person. |
| 88 | +- Add all of the above components to your app |
| 89 | + |
| 90 | +#### 6. Create sub pages (5 minutes) |
| 91 | + |
| 92 | +- Create a subpage `/why-us` with a list of 3 reasons your site is worth visiting |
| 93 | +- Create two subpages `/products/{product name}` for two fictional products your site contains. Add a simple header with the product name on both pages. |
| 94 | + |
| 95 | +#### 7. Add basic styling (5 minutes) |
| 96 | + |
| 97 | +- Create a global CSS file that changes the color of all buttons to blue |
| 98 | +- Add component styles for the `DangerButton` which makes it large and red |
| 99 | + |
| 100 | +#### (Bonus) Create a simple component structure |
| 101 | + |
| 102 | +- Design a basic layout with header, main content, and footer |
| 103 | +- Create separate components for each section |
| 104 | + |
| 105 | +## Help |
| 106 | + |
| 107 | +### Setting up a new Next.js project |
| 108 | + |
| 109 | +To create a new Next.js project, you can use the `create-next-app` command provided by [the React.js team](https://react.dev/learn/start-a-new-react-project): |
| 110 | + |
| 111 | +```bash |
| 112 | +npx create-next-app@latest |
| 113 | +``` |
| 114 | + |
| 115 | +You will presented with a few options for the project you are generating. For this module we will use the following options: |
| 116 | + |
| 117 | +| Option | Value | |
| 118 | +| ---------------------- | -------------------- | |
| 119 | +| Project name | Name of your project | |
| 120 | +| Use TypeScript | No | |
| 121 | +| Use ESLint | Yes | |
| 122 | +| Use Tailwind | No | |
| 123 | +| Use `src/` directory | No | |
| 124 | +| Use App Router | Yes | |
| 125 | +| Customize import alias | No | |
| 126 | + |
| 127 | +This will set up a new Next.js project with the necessary dependencies and a basic file structure. |
| 128 | + |
| 129 | +> [!NOTE] |
| 130 | +> Understanding all the options is out of the scope of this module, but if you are interested you can read more about it here: |
| 131 | +> |
| 132 | +> - _[TypeScript](https://www.typescriptlang.org/)_ is a superset of Javascript and introduces type checking which means it checks if the specified types match before running the code, not while running the code. It helps identifying errors early on. |
| 133 | +> - _[ESLint](https://eslint.org/)_ is an a tool which analyzes your code to ensure it follows good coding conventions. This helps keep the code clean and maintainable. |
| 134 | +> - _[Tailwind CSS](https://tailwindcss.com/)_ is a CSS framework which comes with a lot of utility classes to quickly add CSS styling to your components. It enables you to add styling without having to add most of the common CSS classes. |
| 135 | +> - Using a `src/` directory is a common pattern to separate your source code from your configuration of the app. It can help you get a better overview of the project as it grows, but this option ultimately comes down to personal preference and won't affect your app. |
| 136 | +> - _[App Router](https://www.freecodecamp.org/news/routing-in-nextjs/)_ enables us to easily navigate between pages found in the `/app/pages/` folder. It is a build-in feature of Next.js and will solve most of your needs for page navigation. |
| 137 | +
|
| 138 | +#### Running the development server |
| 139 | + |
| 140 | +First make sure to navigate to your project folder in the terminal |
| 141 | + |
| 142 | +```bash |
| 143 | +cd my-app # replace 'my-app' with the name of your app |
| 144 | +``` |
| 145 | + |
| 146 | +To start the Next.js development server, run the following command: |
| 147 | + |
| 148 | +```bash |
| 149 | +npm run dev |
| 150 | +``` |
| 151 | + |
| 152 | +#### Next.js project structure overview |
| 153 | + |
| 154 | +A typical Next.js project structure looks like this: |
| 155 | + |
| 156 | +```text |
| 157 | +my-app/ |
| 158 | +├── node_modules/ |
| 159 | +├── app/ |
| 160 | +│ ├── page.jsx |
| 161 | +│ ├── layout.jsx |
| 162 | +│ ├── globals.css |
| 163 | +│ ├── favicon.ico |
| 164 | +│ └── ... |
| 165 | +├── components/ |
| 166 | +├── public/ |
| 167 | +├── .gitignore |
| 168 | +├── next.config.js |
| 169 | +├── jsconfig.json |
| 170 | +├── package.json |
| 171 | +└── package-lock.json |
| 172 | +``` |
| 173 | + |
| 174 | +- `app/` directory contains the React components that represent different pages in your application. |
| 175 | +- `components/` directory contains the React components that represent all the custom components built by you. |
| 176 | +- `public/` directory is where you can store static assets like images, documents, etc. |
| 177 | +- `next.config.js` is a configuration file for customizing Next.js behavior. |
0 commit comments