React components

This is a quick post to announce that I have created a Github repo where I will be uploading small components made with React to continue learning.

I hope it will be useful for someone too. Stay tuned!

https://github.com/wilcho-vnz/react-components

Advertisements

Simple AJAX call with Fetch API

Nowadays a lot of people make AJAX calls with JQuery, I know people that just download JQuery just to make this kind of calls to RestAPIs(I was doing it not much time ago) and is not really necessary download a whole library to make this kind of calls especially if the page download time is a important issue.

If is not with JQuery what alternative do I have?

Well, since 2015 their is a light and native(for browsers) alternative called Fetch API.

Fetch API allows us to make AJAX calls using another feature call Promise, for a better definition I will quote to Sandeep Panda:

Fetch is a new, simple and standardised API that aims to unify fetching across the web and replace XMLHttpRequest. It has a polyfill for older browsers and should be used in modern web apps.

How it works?

Here is a simple example:
JSON Example Data

{
"user": {
"name": "Wilhelm",
"email": "email@domain.com"
}
}

HTML and JS code

References:

How to make a template message for Git commits

At work finally I am using git properly(Or I think), I mean, now I understand how to use branches anytime that a new feature shows up or a bug has to be solved, and how I mentioned at Twitter I know that we are in 2017 and I should been using git since a lot time ago but since I’ve take new jobs I really have the opportunity to use git at my new jobs.

Every time I notice more and more benefits about use git, for example, I just notice that you can create a message template for any time that you make a commit. Thus this feature allows you to keep a standard for your team of codeers when they need to write a commit message, like have s title, description and issue address by.

This post shows how to configure your repo to create a commit message template so you can have a standard for your commit messages.

In the root folder of your project create a .gitmessage file and add the next content:

Some awesome title

Why:

* ...

This change addresses the need by:

* ...

Now using the console in the root of your project folder type:

git config commit.template .gitmessage

Yaaaay! Now you are ready to make c00l messages anytime you have to make a commit.

Tip: You can set a template message globally just typing –globally before commit.template

git config --global commit.template .gitmessage

To unset the global template commit type:

git config --global --unset-all commit.template

References:

Another greeting, now from Express

I have made a little stop about learning to React to dig a little bit now in Express.

Like I mentioned in a previous post I have decided to get an update in the Frontend technologies and Express is one of those that is important to know in nowadays, so It’s time to know how it’s works and start to build a simple app.

Like always Google is your friend and there you can find a lot of tutorials about how to make an Express app, I have read only two tutorials (you can find them futher below), one is at MDN (Mozilla Developer Network) and the other at Close Brace. Both tutorials are very easy to understand and follow, if you ask me wich one to choose to start I will tell you with the tutorial in Close Brace and then jump to the MDN tutorial.

Why? Well the code Close Brace gives you a clear understanding in how Express works, then the MDN tutorial will give you a extended tutorial by steps very well documented with links to official docs and recomendations.

Also I have uploaded the tutorials to Github if you want check the examples that I have made with the tutorials mentioned above.

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!