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 , without any kind of additional stuff like Redux, Mobx, Axios, React Router. React 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 “ ” said in The Social Network: Mark Zuckerberg <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 and . create-react-app yarn For those who don’t know it yet, is a wonderful alternative that allows you to install dependencies in a reliable and predictable way. yarn npm 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 git@github.com: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 shortcut to snapshot a part of the screen and followed by to snapshot a window. Command-Shift-4 Command-Shift-4 Space What I didn’t know is that there’s an app in utilities called 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 😃 Grab <a href="https://medium.com/media/24906ee782abe5c5667c324cc5f8a78e/href">https://medium.com/media/24906ee782abe5c5667c324cc5f8a78e/href</a> This is part of my challenge. The raiders of the lost stacks Today’s numbers: about 40min writing/hacking and current weight 108.5kg 😢
