Sign in
Log inSign up

Day#02 - Become a Web Dev // FreeCodecamp + ReactJS Essentials + KhanAcademy

Nicola Fabiani's photo
Nicola Fabiani
·Sep 13, 2016

Hello folks, here is Nico. The last time I talked about my short story that brought me to find out the world of development. Today I want start to talk you about my daily routine to try to become a web developer. I will tell you my program during the day before, what course I followed, what argument I treated, what tools I used and what are my opinions about the work I did during the day! I hope it could be a great motivation for other newbie user or guy just like me which are trying to learn new things.

I started my day on FreeCodeCamp. It is a awesome website where you can train your ability and learn new stuff. As the website tells, it is "...an open source community that helps you learn to code." I found out it here, reading the AMA of his founder (or at least I think he is the founder), Quincy Lanson. You can find the entire AMA here The site has a plenty of argument (HTML, CSS, JS, ReactJS and other stuff). I used it to refresh my old skills on HTML & CSS through their self-paced coding challenges. I have not dwelt many time on it. Just a short review of the basic. I think I will come back here every time to begin my day. The website has either an awesome chatroom where you can find a very active community ready to help you with the code or just to chat about everything. I just find a new web dev "friend" there.

After that, I switched on a book. A technical book: ReactJS Essentials. The author is Artemis Fedosejev, a self-taught web developer and technical lead at a start-up in London (at least at the moment of the publication of the book). Here's his GitHub account. I chose it because I think it's a good book (reading the reviews and the feedbacks) to begin to learn ReactJS. ReactJS is a javascript library to build user interfaces. It is created by Facebook and it uses a declarative style of programming to describe the UI state. We can think of it as the V in the conventional MVC architecture pattern. I believe ReactJS could be the future on the development universe of UI. In this list you can find several websites using React (Instagram, Netflix, Paypal and so on).

Going back to the book, its goal is to build a web application that allows me to discover and collect public photos posted on Twitter. A sort of little Pinterest. As the first pages of the books explain, I will implement a functional website with the following functionalities:

  • Receiving and displaying tweets in real time
  • Adding and removing tweets to/from a collection
  • reviewing collected tweets

  • Exporting a collection of tweets as an HTML snippet that I can share

    I faced the first 2 chapters:

1 - Installing Powerful Tools for Your Project 2 - Create Your First React Element

The first chapter explains what modern tools I need to install in order to build React applications and gives step-by-step guide on how to install each of them. I had the possibility to know what Node.js is and how I can install it. After that, I installed Git, a free and open source version control system, and I learned how I can getting data from the Twitter Streaming API, how I can filtering data with Snapkite Engine. Subsequently I created the project structure, the package.json (this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies) and I learnt how to use Gulp.js. Finally, I created a simple structure of a web page.

The second chapter talks about the meaning of virtual DOM, why it is so important and why it can make the difference. I installed React and afterwards I started to exercise myself creating simple React Element with JavaScript, rendering React Elements and at the end how can create the same React element with JSX. Here is an example of a simple React Element:

var reactElement = React.createElement('h1');

And this is an example on how a .js file should look to produce a React element:

var React = require('react');
var ReactDOM = require('react-dom');

var reactElement = React.createElement('h1');
ReactDOM.render(reactElement, document.getElementById('app');

This piece of code will render a React Element on a Id element (in this case 'app'), which is situated in a index.html file (the structure of the web page we created on the first chapter).

With JSX (a JavaScript syntax extension that looks similar to XML),we could create the same element just typing:

var reactElement = <h1></h1>;

We simply could type using a syntax similar to the syntax we use on HTML. It helps us to read faster and simpler the code. It is important to know React doesn't require a mandatory use of JSX. JSX is completely optional and you don’t need it in order to use React, but it has a lot of nice features and there is no reason not to take advantage of it. But if we decide to use JSX, we need to pre-compiler our JSX code into a javascript code. That's because the browser doesn’t understand JSX natively. We can use Babel as JavaScript compiler.

I struggled with a problem during my session. Gulp gave me an error when I tried to upload the app.js file after used JSX. I tried to ask to my web dev friends the reason, I tried to post the problem on stackoverflow or other forums but I cannot find the solution. I'm readying to take dinner with a bad mood when trying the last solution I went to check the GitHub account of the author and I found out the the problem was a conflict with the version of babelify. I copy the code on the post and I paste it on my gulpfiles.js editing the previous code and...TA-DAAAAA! Now gulp gave me no error.

So, I took dinner with a happy mood and after a good eating I finish my daily routine watching some video on KhanAcademy. I think it's maybe the best website in the world. Khan Academy is a non-profit educational organization created in 2006 by educator Salman "Sal" Khan with the aim of providing a "free, world-class education for anyone, anywhere". You can find there a lot of lessons, articles, tutorials and lessons about Math, Science, Biology, Cryptography, Computer Science and so on. Actually I'm attending the course called "How Internet Works" provided by code.org. Yesterday I learnt about Wires, cables and wi-fi and how work IP addresses and DNS.

Argument faced on my daily routine:

  • HTML & CSS (just a short review)
  • How install tools for my React project
  • Create and render a React Element using JavaScript or using JSX syntax
  • How works wifi, IP addresses and DNS

Well. I hope you enjoy read my article and I will glad if you can find here some motivation or just some help for your daily routine. Next time I will to face my routine less technical but more focused about my opinions, my mood and so on. Please, let me know if you like this type of story and let me know your daily routine. I'm so curious to know how other person deal with a learning day.

P.S. Sorry again for my English. I'm not a native speaker but I'm trying to do my best.

Cheers!