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:
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?
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
Really simple right?
Now to start the app:
$ cd just-do-it $ yarn start
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?
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:
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 😃
This is part of my The raiders of the lost stacks challenge.
Today’s numbers: about 40min writing/hacking and current weight 108.5kg 😢
Create your free account to unlock your custom reading experience.