The raider of the lost stacks, Day 1

It’s day one, today I’m feeling really down because my daughter is sick and woke up a lot of times at night, so bear with me 😪

I’m a 10x dad, woke up at least 10 times to make her go to sleep again.

My first project will be to implement the well-known todo app in React, without any kind of additional stuff like Redux, Mobx, Axios, React Router.

The purpose is to have the basic working project and iterate on top of that.

I will push it to Github and keep a branch for this initial work, will be cool to check the differences when adding other pieces to the mix.

As “Mark Zuckerberg” said in The Social Network:

<a href="https://medium.com/media/21de446ce3835b9709e4fea79c144e9c/href">https://medium.com/media/21de446ce3835b9709e4fea79c144e9c/href</a>

So first things first, bootstrapping.

Do I create an empty directory and begin “npming” a lot of dependencies?

Off course not…

Will I lose a lot of time configuring webpack?

Are you crazy?

Dan Abramov has been doing an amazing work in relieving the burden of starting a react app from scratch. Let’s use create-react-app and yarn.

For those who don’t know it yet, yarn is a wonderful npm alternative that allows you to install dependencies in a reliable and predictable way.

To install it you need to have npm installed 😜:

$ npm install --global yarn

So the next step is to install create-react-app:

$ yarn add global create-react-app

npm 5 promises to learn the lessons taken from yarn so I will test it as well, perhaps tomorrow.

Now we are ready to go. Let’s create our todo app:

$ create-react-app just-do-it
...
a lot of npm gibberish and half the internet on node modules
...
✨  Done in 35.30s.

Success! Created just-do-it at /Users/pedro/raider-of-the-lost-stacks/just-do-it
Inside that directory, you can run several commands:

yarn start
    Starts the development server.

yarn build
    Bundles the app into static files for production.

yarn test
    Starts the test runner.

yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd just-do-it
yarn start

Happy hacking!

$ ...

Really simple right?

Now to start the app:

$ cd just-do-it
$ yarn start

Compiled successfully!

You can now view just-do-it in the browser.

Local:            http://localhost:3000/
On Your Network:  http://192.168.1.4:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

And your browser opens:

Say what, no webpack ninja hacking and we have a running app?

<a href="https://medium.com/media/4b7c5b881957e57f1c4550434ca759c2/href">https://medium.com/media/4b7c5b881957e57f1c4550434ca759c2/href</a>

So now let’s push it to github.com

$ git init
Initialized empty Git repository in /Users/pedro/raider-of-the-lost-stacks/just-do-it/.git/
$ git add .
$ git commit -m "Just do it getting started"
[master (root-commit) 3acdcae] Just do it getting started
 14 files changed, 9001 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 package.json
 create mode 100644 public/favicon.ico
 create mode 100644 public/index.html
 create mode 100644 public/manifest.json
 create mode 100644 src/App.css
 create mode 100644 src/App.js
 create mode 100644 src/App.test.js
 create mode 100644 src/index.css
 create mode 100644 src/index.js
 create mode 100644 src/logo.svg
 create mode 100644 src/registerServiceWorker.js
 create mode 100644 yarn.lock
$ git remote add origin [email protected]:pedromig/just-do-it.git
$ git push -u origin master
Counting objects: 18, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (18/18), done.
Writing objects: 100% (18/18), 104.06 KiB | 0 bytes/s, done.
Total 18 (delta 0), reused 0 (delta 0)
To github.com:pedromig/just-do-it.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

$ ...

And there we have it, a fresh new app ready to be hacked.

You can see the progress of this project at:

https://github.com/pedromig/just-do-it

And we are done for today…

Wanted to start hacking a lot more, but need to pay my sleep debt while my daughter is sleeping. Don’t know for how long 😱

Some interesting fact, I already knew that mac has Command-Shift-4 shortcut to snapshot a part of the screen and Command-Shift-4 followed by Space to snapshot a window.

What I didn’t know is that there’s an app in utilities called Grab bundled in macOS that helps to take snapshots. Yes, up until now I used to be a Windows user so this shit is new to me 😃

<a href="https://medium.com/media/24906ee782abe5c5667c324cc5f8a78e/href">https://medium.com/media/24906ee782abe5c5667c324cc5f8a78e/href</a>

This is part of my The raiders of the lost stacks challenge.

Today’s numbers: about 40min writing/hacking and current weight 108.5kg 😢