First steps with React

We already know how to get the libraries necessary to start coding on React. Let’s make a simple app to create components.

This post is made with the boilerplate mentioned on my last post.

Open your console and create a folder for our new project with the next command. You can create it anywhere you want, I will create it on my Desktop.

$ create-react-app first-app

Now, wait until the packages are downloaded.

wait

Everything ok? Good, now enter to your new project folder and type the command below to start our local server

$ yarn start

Probably your default browser is fired when the server start, showing an example app by default. If not, open your browser and type http://localhost:3000 in the address bar.

The first React app running on your machine, yaaaay!!! Now let’s change some code to create our own component.

What do you need to know about the structure of this boilerplate?

The official documentation of “create-app” is very easy to understand but for this post this is what you need to know:

  • public folder: has the html file that the browser renders
  • src: here is where we will save our React js code, css and images

Let’s start creating our first component, open your editor, open a new file and save it as MyFirstComponent.js inside the src/ folder and type:

Nice, our component is ready to be used. Now open index.js inside src/ and change its contents for:

If you haven’t closed the browser’s tab with your locahost:3000 you notice that the app is updated without use the refresh button or F5, that’s because when you are running the server and modify a file automatically the app reloaded in your browser.

Nice, eh?

What if we want to give some style to our component?

Well, we create a css file with the name of the component(MyFirstComponent.css) inside the src folder:

Update MyFirstComponent.js and put in the second line

import React, { Component } from 'react';
// Component CSS
import './MyFirstComponent.css'

Now our component has a new color for h1 tag and the content of the div is centered.

This looks very simple right? Now let’s make a second component that will be use inside MyFirstComponent.js.

Create two new files in src/ folder Square.js and Square.css.

Yaaaay, now we can render a custom component inside another one and we can use it multiple times inside MyFirstComponent.js.

One last thing for this example, our Square has the same content for all the boxes, wouldn’t it be better if we can pass it data to display via attribute? Well, we can do that using props.

Update MyFirstComponent.js

Update Square.js

Done, now we can pass data to every square and each square can render different data.

Phew! We are ready for now, I think that is a lot of information to play a bit with react and see how its components work.

Please check the codecademy course to see how to use props, display dynamic data and other cool stuff that you can use on React.

Start using React in your machine

To start using React is not as simple as downloading a file and link it to your html file like you can do with JQuery. For example, you need a group of libraries to make it work in your browser.

React needs ES6, so apart from the React library do you need other libraries like Babel to make it work on your browser.

If you want to learn about ES6, Babel and new features that ES6 has, I recommend these videos to get an update:

Yes, ES7 is out there but this learning curve has to be slowly for me.

Like I said, we need a group of libraries to begin to use React, we can install those libraries with Node and start checking what fits better our requirements. But, are we learning right? We need a clear and easy boilerplate to get started coding and spend less time searching and trying the libraries required to make a simple Hello World. Remember, search for thing like Babel, Webpack and other things that React needs.

Maybe you are wondering: A Boilerplate? Do I need to learn another thing?

No, a boilerplate is a base with all set to start to code, without having to think in what version of Babel or Webpack we should use, how to configure them and all that stuff. There are a lot of boilerplates in the Internet to make an app with React, just make a simple Google search and you will see.

When I was looking for a boilerplate for React I was searching for something simple to understand and install, with a simple structure to make it work and then begin to do basic examples.

If React was made by Facebook, they should have a good base to start with. I found Create React made by Facebook Incubator, it brings a very simple structure and good documentation on how to use it.

To download Create React you need to have installed NodeJS and then follow the next steps that you can also find in their documentation:

  • $ npm install -g create-react-app
  • $ create-react-app my-app
  • $ cd my-app/
  • $ npm start

If everything works fine you should see an app running on your localhost http://localhost:3000 with a demo.

Hello from the React World

Well,  has been a long journey to get here!

Yes, I know that I  have made a previous post writing about my interests in Vue.js but I don’t really develop much with it. In my last days in Venezuela never got the oportunity to use it on a project or on my first job in Argentina.

After my moving to Argentina, have worked in an awful company and be an “unemployed” for a while (sometimes I prefer call it vacations) I decided to get an update about the Frontend develoment world(again) but this time seriously.

On my time as unemployed man time I have spend time updating my LinkedIn’s info and skills, creating accounts in labor market’ sites to postulate myself. Looking for a new job I have noticed how many companies are searching a frontend developers with knowledge in: React,  Angular, Less, Git, NodeJs to mention few skills that I saw and I did’nt have to much knowledge.

I have to admit it, at my previous job “the awful” company at least I could get a good idea on how to really use Git and its benefits using it on a big team of coders(Frontend and Backend developers). Learn the basics things like the use of  branch, stash and merge. So with a good knowlege base on Git I thought that I had to learn something new and to learn React was my first idea thinking on the demand of developers that the market require.

Where to learn React?

Any time that I will asked, I will tell: Codecademy.

I didn’t make a great investigation about where to take a good course to learn React free, I just Sing In in Codecademy and started the React course.

I have just completed the Part I of the course and I feel that I have learn a lot with simple exercises, the learning curve was very short. Now, on codecademy’s ecosystem all works fine, but when you try to make a simple Hello World using JSX on you local machine the things are not so easy, you realize that you need things like Babel, Webpack and NodeJS to mention some of things that you need to develop on React. But don’t worry, there are a lot of packages that make out lives more easier.

Behind are those days that just downloading JQuery and using a text editor you could start a new project or app.

Now I always remember this tweet:

On my next posts I will share how to make a simple app with all that I’ve learned this few weeks with React, maybe will be dumb exercicies, but can be a good guide for people that are trying to learn something new. And why not? Internet is for this, share and learn.

Stay tuned!

 

First widget using Vue

Well, here is it, my first example of a widget using Vue as Frontend framework like I promised on my last post.

The main idea of this widget is to make a panel(Bootstrap’s panel) that shows user’s avatar, numbers of followers and a list of options that a user can use on hypothetical app.

With Vue I going to manipulate dynamically:

  • Username
  • Avatar image
  • Option labels
  • Button’s label to change the language

The app also it will listen the event when the button of language is pressed using the v-on attribute on the a element.

What I’m using of Vue on this example

  • Double mustache to display dynamic data
  • Model’s data and method
  • Event handling using v-on

The code is really easy to read, maybe there is a better way to make this widget but remember, I’m still learning Vue, so any comment is welcome.

 

Vue.js fever

I’ve worked on the Backend-side almost all the time on my time as developer mostly with PHP, also I’ve knowledge of HTML, Javascript, CSS, JSON, and JQuery for mention some, I’ve made also templates for WordPress or simple websites, but I’ve noticed that the world of the Frontend development has evolved a lot, things like Node, NPM, Bower, Grunt, Gulp, React, Angular and many other technologies that have been around helping to make more easy the web development and powerful apps. I didn’t pay too much attention to all those technologies because like I mentioned previously I’ve been developing on the side-server.

Of course, I’ve read a little about new Frontend technologies in articles or tweets of people that I follow but never I sat on my computer and play with them making simple programs or examples. That made me to ignore how the web has evolved, see that the websites or apps now are not just apps that send POST data to a server to be processed and return a response page like a HTML, XML or JSON using PHP or other language like ASP, Ruby, Java, etc, now the websites are reactive or responds to events generated by the users and is not necessary to send data how I’ve described previously to get data from the server. Now the web applications can change or load data using technologies like AJAX that allows to make requests to the server and change the content on our page.

This new way of developing made me investigate more about these technologies and see how they work, but what drives me to update my knowledge and get in into these new technologies really?

Well, few months ago I had an interview for a new job and they sent to me a technical test that basically consisted on create widgets, I could use any framework in the test so I chose Bootstrap and JQuery(I don’t have great skill with JQuery but I did my best). I think that the result of the test was good because later I had an interview via Skype to respond some technical questions using a shared editor like Codepen. Pitifully I didn’t get the job, but that takes me to investigate why they sent to me a test to make widgets and I discovered that I could solve the test more easily using React for example.

So I decided to read and investigate a little bit about React and make some simple examples. React it looks a very powerful framework and with the support of Facebook it looks to have a great community behind it, but for me it is to complex to use or to configure for a simple app, without mention that you have to learn a syntax called JSX to get the best of the framework. so discard the idea of using React, I just wanted to make simple examples and see quick results.

I’ve made some examples with Angular once but didn’t get my attention, I read that there is a new version but I haven’t check it.

I use Laravel as framework on the server-side and few weeks ago I read on Twitter that Laravel has made a partnership with Vue.js as framework of Javascript and I thought: Well, Laravel is a great framework and easy to use, that partnership with that Javascript framework took my attention… Why not give it a chance, even more if it is a new framework.

For the backend developers that don’t have used a Frontend framework before but they have knowledge of Javascript Vue is really easy to use and is not necessary to learn other syntax like JSX of React for example. Vue s easy to use because you only have to:

  • Link the js library on your html document
  • Create a Vue Model
  • Set an id for the HTML tag that will use the Vue Model
  • Display the data of your model o call the methods on it

Simple example of a Vue app:

On the next couple of weeks I’ve the intention to publish basic examples using Vue, the first examples will be the widgets that I had to do on the interview mentioned on the third paragraph to start with simple examples.

More info about Vue

Is the Web dead?

Here’s I share a nice speech of Christian Heilmann on Twitter on TED where he speaks about the App World vs the Web World, where I’m totally agreed with him.

I’ve always prefer the web apps over apps, I share his idea about the liberty that the apps limit the liberty of an user to do things. When you use an app you are limited the the features developed for the developer of the app, you can’t copy a text, block ads, share translate something, download your data, apps are just a hype how he says.

A web site or web app can be share, you can’t comment, publish something, make that disable people get access to the info using html5 properties.

 

Bug in Whatsapp calls

Some weeks ago I was using Whatsapp calls and I notice that when you having a normal call (service provider) and you receive a Whatsapp call you can’t hold the previous call, you just have to answer or decline the Whatsapp call. The interface of Whatsapp overlaps the Android interface.

I hope Whatsapp will find this kind of bug very soon, now that Whatsapp calls is turning a very important tool.