Hello React.JS – Absolute Beginners Guide to React

In this video I’ll walk you through how to create a basic Hello World application with React.JS.

After spending a few months learning React.JS and following all of the official and unofficial tutorials, I found that there was a gap in the information. My goal with this video is to bridge that gap and show you some of the tips and tricks that most of the tutorials don’t teach.

Here are the links you’ll need to follow along:

Node.JS Official Website: https://nodejs.org/en/
Create React App: https://github.com/facebookincubator/create-react-app
Atom Editor: https://atom.io
Atom language-javascript-jsx plugin: https://atom.io/packages/language-javascript-jsx

Finished Source Code: https://github.com/LondonAppDev/demo-react-hello

How to install Node.JS v6 on Linux

This video is a step-by-step instruction of installing Node.JS version 6 on Ubuntu or Linux Mint. Hint: As tempting as it might be, don’t install it through the package manager. I’ll explain why in the video below.

Node.JS Official Website: https://nodejs.org/en/

Introduction to the Python Debugger Tool

In this video demonstration, I’ll show you how to get started with the Python Debugger tool.

The Python Debugger (PDB) is an incredibly useful tool which can save you hours when writing Python applications.

This tool has replaced my former debugging process – which was laborious and not at all efficient. I use it whenever I’m debugging my code or troubleshooting issues.

Here are the links you’ll need to follow along:

demo-json-printer project: https://github.com/LondonAppDev/demo-json-printer

Python Debugger Official Docs: https://docs.python.org/3/library/pdb.html

Install and configure PyEnv on Linux

PyEnv is a great tool for installing and switching between different versions of Python, which is particularly helpful if you’re working on multiple projects or for multiple companies that use different versions of Python. In this video, I’ll show you how to install and configure PyEnv on Linux, but these steps should also work on Mac.

PyEnv Homepage: https://github.com/pyenv/pyenv

PyEnv Installer: https://github.com/pyenv/pyenv-installer

Subscribe to my Youtube channel to get my latest full-stack tutorials every week.

Dockerizing a Django REST Framework Project

In this video I’ll show you how to create a Docker container for a Django REST Framework project. This video was inspired by my Build a REST API course on Udemy. In the course, I build a REST API using Vagrant, but Vagrant is not the only way. You can use Docker, it just has a steeper learning curve.

 

Video demonstration:

Links mentioned in the video:

Docker: https://www.docker.com

Docker-Compose: https://docs.docker.com/compose/install/
byob-profiles-rest-api

Project: https://github.com/LondonAppDev/byob-profiles-rest-api

Build Your Own Backend REST API using Django REST Framework Course: https://www.udemy.com/django-python/

Let me know if you have any comments or questions below!

Cheers
Mark

How I became a professional developer

So I thought in this post I’d do something a bit different and I’ll go through my journey as a professional software engineer.

I’m a full-stack software engineer, that means that I work in all different languages from the backend to the frontend, so I can do backend DevOps, hosting and server administration. I can also do programming in Python and frontend development in JavaScript and some Android and AngularJS.

The way that I got into programming was I started when I was 12 years old. I got my first computer and I was just fascinated with making applications and I was really curious about how to make your own programs on the computer.

I think it was a Windows 98 or Windows ME machine, so very old from modern standards.

I looked up how to program and I asked my parents and they didn’t know because, I mean, it’s not something you know — especially back then — unless you’re a professional working with computers.

Read more

React vs. Angular: Which one is best?

I’ve been learning React JS over last couple of days. I haven’t got very far but I’ve learned a bit about it and I’ve created a couple of web apps with it. So I wanted to share my thoughts on it and compare it to Angular 2.

Everyone always says you can’t compare React JS to Angular 2 but I think that’s rubbish.

I know one’s a library (React) and Angular 2 is a framework. But that doesn’t mean you can’t compare them, because if you were to build a new app you would choose React or Angular or a number of other different options. But you wouldn’t build an app with both of them at the same time. You would be choosing between one or the other.

So I think it’s fair to compare them.

Read more

Favourite Atom Extensions

Atom is my favourite text editor.

It is fast, lightweight, cross platform and free.

But most importantly, it has a great community of amazing developers who contribute plugins.

Here is a list of the Atom editor plugins that I found the most useful.

1. File Icons

When a colleague told me about this extension it completely transformed my editor. Out of the box Atom comes with a standard document icon for each file. Add some colour to your tree view with the file-icons extension.

Atom File Icons Extension Screenshot

Make your tree-view sparkle with a proper file icon per file.

2. Minimap

The minimap is a great little add on that really makes a huge difference. It gives you an approximate outline of the code while making the scrollbar larger and easier to grab.

Screenshot of Atom minimap

Install the Minimap extension for the ultimate scrolling experience.

3. Linter Pycode Style

Be notified of crappy code before you publish it with the linter-pycodestyle extension.

Screenshot of Atom Python Linter

This has saved me from embarrassing coding mistakes many times. The example below will install the Python version, but it’s available for many different languages.

4. Pretty JSON

We’ve all had to inspect a minified JSON at one point in our coding career. Un-minify that JSON with pretty-json.

Python Pretty JSON

This one has saved me many times.

5. Launch from Terminal

This one is not an extension but, it’s a really useful feature of Atom none the less.

Screenshot of Terminal Launch

Launch Atom in the location you are currently working on in your terminal window by typing:

So, those are the most useful extensions I use in Atom.

I’d love to hear your favourites in the comments below!

Consuming a JSON REST API in Android

JSON REST API

This week’s blog post was requested by one of our readers, Jasmine.

Jasmine asked if I could write a guide on “processing JSON data for android applications using NodeJS and Express and Android Studio”.

I haven’t done anything using Android Studio in a while – and I love writing guides that you all want and need – so I thought I would give it a shot.

There are two parts to processing JSON data in Android using NodeJS and Express:

  1. Writing an app capable of processing the JSON data.
  2. Writing a backend capable of producing the JSON data to be processed.

Because there are two parts to this, naturally I’ve broken the steps down into two blog posts.

In the first guide – i.e. this one – l’ll walk you through step #1 and teach you how to create an Android app using Android Studio, which allows you to process JSON data from a REST API.

The next post will show you how to make a REST API using NodeJS and Express. (Check back next week, or better yet, sign up to my newsletter).

Read more

Five reasons to write proper commit messages

We have all been there and probably done it ourselves.

An app randomly breaks or crashes, so you type “git log” to see what has changed recently.

And BOOM!

The history reads like:

  • 18:15: More updates.
  • 18:02: Updates.
  • 17:40: Updates.
  • 16:34: Fixed.
  • 12:22: Done.
  • 08:23: Complete.

And usually it’s not even punctuated correctly…

I can understand why. I have been guilty of this myself many times before.

When you’re rushing to get something done and you don’t commit frequently, it’s hard to even remember what you changed and why you changed it!

However, as usual, making shortcuts like this in the short term can be detrimental to the long game.

Here are five reasons to be disciplined by committing often and writing proper commit messages every time:

1) You understand better what you are doing.

Writing a proper git message helps re-enforce in your mind what you are working on.

I’ve had many epiphanies as a result of describing what I changed in my commit messages.

It helps you to be focused, as you are repeatedly bringing your mind back to the task at hand with every commit message you write.

2) It helps to break big tasks down into smaller ones.

In my last post I wrote about the benefits of breaking down tasks.

If you make too many changes in one commit then you will not be able to describe what you changed in a short, concise commit message.

Making frequent commits with detailed messages helps you to practice breaking big tasks down into smaller, more manageable chunks.

In the long term you’ll find that you get far more done as you break down the monster tasks into small chunks and chip away at it. Plus, if you ever have to go back and fix something – in the event of a crash or something breaking – you can troubleshoot so much faster.

3) Others can better understand what you changed.

Coding isn’t a single player game.

If you want to build amazing things you need to work well in teams.

A big part of working well in a team is communication.

Nothing helps developers communicate more than writing clear and concise commit messages in your code.

It means others can easily understand what you did at a glance and gives them less reason to distract you from what you are working on over questions about your code.

4) You can better understand what you changed.

Writing decent commit messages isn’t just about others understanding what you’re doing.

It’s also for you to understand what you’re doing.

How many times have you looked back at an application you worked on years ago and you can’t even remember working on that project at all?

Putting in decent commit messages will certainly help jog your memory and will help you to understand what you changed and why.

5) It is good practice for discipline.

The secret to being a great programmer is discipline.

Anyone can knock up a quick web app nowadays…

But few have the discipline to follow best practices to make it scalable and efficient.

Writing good commit messages is good practice to be disciplined in other areas of programming.

It also demonstrates to others that you have good discipline and you take pride in your work.

Thanks for reading. I’d love to hear your thoughts and experiences in the comments below.

Cheers,
Mark