---
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