---
# System prepended metadata

title: codelab-20220920
tags: [code]

---

---
tags: code
---

# codelab-20220920

let's get started with
- nextjs, which also means
    - js, generally
    - react
    - css
    - html
    - other stuff


## steps

open up your Development folder in Terminal

`cd Development`

then let's create a next app

`npx create-next-app name-of-my-project`

then open in vscode

```
cd name-of-my-project
code .
```

then start the development server with

`npm run dev`

then open up [localhost:3000](http://localhost:3000/) to start the app.

```

export default function SecondPage() {
    return (
        <div>
            <h1>my second page</h1>
            <p>stuff will go here!!</p>
        </div>
    )
}

```

### my first component

```

const BigText = ({children}) => {
    return(
        <h1
            style={{
                color: "rgba(255, 0, 30, 0.9)"
            }}
        >{children}</h1>
    )
}

export default function SecondPage() {
    return (
        <div>
            <h1>my second page</h1>
            <BigText>MY RANDOM TEXT</BigText>
            <p>stuff will go here!!</p>
            <ol>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>etc</li>

            </ol>
        </div>
    )
} 
```

next try these additional style components:

```
fontWeight: "900",
fontSize: "200px"
```

you'll need to include them in that js object you defined above in the style attribute, like so:

```
<h1
            style={{
                color: "rgba(255, 0, 30, 0.9)",
                fontSize: "200px",
                // etc.
            }}
        >{children}</h1>
```

for a complete list of css in js properties, check out [this link](add it here)

### my first npm install and import

first, install `react-draggable` with 

`npm i react-draggable`

(make sure you are in your project folder when you do this!!!)

then add this to the top of your page file

`import Draggable from 'react-draggable'`

then `<Draggable>` is a component you can wrap your other elements in to make them draggable, like:

```
<div>
            <h1>my second page</h1>
            <BigText>MY RANDOM TEXT</BigText>
            <p>stuff will go here!!</p>
         
            <Draggable><div><ol>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>etc</li>

            </ol></div></Draggable>
            
            
            
            
        </div>
```



## reference
and for "block quotes" of code, this:

```
this is
a lot
of code
```