Redux Predictable State



100DaysOfCode – Days 13 & 14 – Redux

I have seen too many times Redux and React “holding hands” and it was time to know why was that. I finished the Redux module from freeCodeCamp and these are my notes to remember about it:

In Redux, there is a single state object that’s responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux store. This is the first important principle to understand when learning Redux: the Redux store is the single source of truth when it comes to application state.

  • This also means that any time any piece of your app wants to update state, it must do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app.
  • An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events.
  • dispatch method is what you use to dispatch actions to the Redux store. Calling store.dispatch() and passing the value returned from an action creator sends an action back to the store.
  •  Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer takes state and action as arguments, and it always returns a new state. It is important to see that this is the only role of the reducer.
  • Another key principle in Redux is that state is read-only.
  • store.subscribe(). This allows you to subscribe listener functions to the store, which are called whenever an action is dispatched against the store. One simple use for this method is to subscribe a function to your store that simply logs a message every time an action is received and the store is updated.
  • A callback function is simply a function that get’s called after another function is done being executed.
  • In order to let us combine multiple reducers together, Redux provides the combineReducers() method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.
  • To include Redux Thunk middleware, you pass it as an argument to Redux.applyMiddleware(). This statement is then provided as a second optional parameter to the createStore() function. Then, to create an asynchronous action, you return a function in the action creator that takes dispatch as an argument. Within this function, you can dispatch actions and perform asynchronous requests.

Now let’s make a mix and starting from tomorrow I’ll learn React with Redux.

React Hands on & Tips



100DaysOfCode – Days 8 to 12 – React

 I’ve spent the last few days learning more React, I needed to get to a point where I could solve simple tasks without copying the answer from other fellow, so I came back to freeCodeCamp and continue with the Front End Libraries Certification, just where I abandoned it because it was not getting the React concepts. Now after a week having my hands on in some code and easy problems, it has been quite a smooth path to follow and founding some interesting knowledge to keep in mind about React.

Here my list of things to have into account for my future React proyects:

  • The best practice with React is to place API calls or any calls to your server in the lifecycle method componentDidMount(). This method is called after a component is mounted to the DOM.
  •  The first is unidirectional data flow. State flows in one direction down the tree of your application’s components, from the stateful parent component to child components. The child components only receive the state data they need.
  • complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. 
  • state updates may be asynchronous – this means React may batch multiple setState() calls into a single update. This means you can’t rely on the previous value of this.state or this.props.
  • Using a function with setState guarantees you are working with the most current values of state and props.
this.setState((state, props) => ({
  counter: state.counter + props.increment
  • One common way is to explicitly bind this in the constructor so this becomes bound to the class methods when the component is initialized.
  • stateless functional component is any function you write which accepts props and returns JSX.
  • stateless component, on the other hand, is a class that extends React.Component, but does not use internal state (covered in the next challenge).
  • stateful component is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
  • The componentDidMount() method is also the best place to attach any event listeners you need to add for specific functionality. 
  • React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user’s browser – even if the native events may behave differently between different browsers. (Cool!!!!)
  •  FYI: As a rule, any hyphenated style properties are written using camel case in JSX.
  • Since React is a JavaScript view library and you can run JavaScript on the server with Node, this is possible. In fact, React provides a renderToString() method you can use for this purpose.

TypeScript Structural it is



100DaysOfCode – Day 6 & 7 – TypeScript

I started with TypeScript because it was taking too much space at the back of my head, being now for a few months just working on my front-end skills, TypeScript was appearing again and again in different forms, as a mention, as a .ts file in some project, and so on, so I needed to see what was the fuzz about.

This time I went to the source , not shortcut articles promising to learn in 4 minutes everything that you need to know. I just wanted to know what makes it so special and give it a small try.

In their website you can find all that you need, the 5 minutes guide, that I took but I found too basic and not too many answers, but it’s good you don’t want to get overwhelmed by too much detailed information, and honestly it said 5 minutes , what did I expect?

So I went for the Playground section, and it was much better, I did quite a lot of them and it shows you the differences between plain Vanilla JavaScript and TypeScript, that’s good, something that you can see how does work and understand. Hands on!

And there was some other sections that took my attention :

TS for OO Programmers and TS for JS Programmers

These are guides again of 5 minutes but where you see which are the difference or the similarities between what do you know and you don’t. And there is when I got it what this structural system was. With the example below:

class Car {
  drive() {
    // hit the gas
class Golfer {
  drive() {
    // hit the ball far

// No error?
let w: Car = new Golfer();

This isn’t an error because the structures of these classes are the same. While this may seem like a potential source of confusion, in practice, identical classes that shouldn’t be related are not common.

Still not sure how to get this but I’ll learn about it, and that was all for my 2 days in TypeScript, for sure I will be back, I like some aspects and I need to understand more about the advantages in comparison with JavaScript.

React TodoList now!



100DaysOfCode – Day 5 – React Todo List App

What is to learn anything in IT without HelloWorld examples or TodoList applications? Nothing! You would never learn properly, you need these to be able to start put your hands on whatever you want to do, it’s the “walker” to make the baby steps into your new/wannabe area of expertise.

So today was my Todo List day for React with this article to create a simple Todo List App.

I learnt some small things and above all started to put things on place, how are related, how they work, how components are so key and how state is at the core of almost everything.

Did you know that in React a form the default behavior is to submit to the same page? But you can break this with e.preventDefault().

Again I had to get used to some new errors, but all done and dusted, I was able to get them working.

Maybe I’m going to do an application with Ionic and React just to see how does it work, taking mental note for one of my 95 days to go with the Challenge.

That’s all Folks!

Ionic App in a blick



100DaysOfCode – Day 4 – Ionic

Today I wanted to do some more React, but someone was in need of a time tracker application for his projects, so I thought, why not? I can try to do it in React to learn more.

I was looking for some basic knowledge, like what I should take into account to track times, and so on, and I found pretty few applications in different languages, but one of the projects catch my attention.

This article : by Josh Morony.

I didn’t have a clue about Ionic but it sounded promising, so I dig a little bit deeper and it is.

Ionic – It’s an Open Source (oh yeah, you know how much I like the Open Source thingy) framework to develop cross-platform mobile applications, it’s a good presentation, and the cherry of the cake, is that it can be used with Angular (the favorite one), React and they promise future frameworks like Vue soon to join.

So, that was it! I started one small test with their online wizard and I could have something visible in minutes, nothing useful, no logic at all but all the bases covered and working, pretty cool isn’t it?

I started the time tracker and like the article says in 3 hours, you have your application running and working as expected. It was pretty simple, just I found myself fight errors unknown for me but if you know how to fight bugs in any other language, the approach is always similar, basically, search & destroy.

To have Ionic working basically you need just two things Node.js and npm, and you are ready to start installing and playing pretty much. They have a pretty good documentation for each framework for developers, they have you covered

React First full App



#100DaysOfCode – Day 3 : First React App

So I did it! I finished my first React App with an API call included. Thank you, Chris!

I learnt what the state and the useState hook work, really interesting and willing to use it quite a lot, and I learnt more about props, which already knew but not so well.

Another super useful function to use with APIs is the useEffect and the already known fetch.

So I used properly my first hooks and using them properly, knowing what they do. There is a long way still to improve about React but getting there step by step.

My first React App, Cool!

JavaSwing JSplitPane



Today was a quick exercise with JavaSwing. It was to help someone who needed an easy GUI, but at the end it was of not use for the person, but for me was a way to check that I still can work with Java, the logic is applied the same way independently of the language, good to know!

#100DaysOfCode – Day 2 : JavaSwing

I had a small request about a GUI where two lists where displayed, left and right, the one in the left will show some values that when selected should fill the values of the list at the right side.

The user should be able to add new items to the lists and remove them.

I decide to have the view with a JSplitPane, the JList and DefaultListMode to add new items was the answer for the lists. Listeners where the key for the button functions.

The result:

A lot to be improved but for a quick exercise I think it was good enough.

React Fresh start



Hi there!

Today it’s my first day in the #100DaysOfCode, and I will start getting deeper with React. I already took some steps but I wanted for long to get a step forward, so here we go.

#100DaysOfCode – Day 1 : React

By now, I think we all know what React is and how well it’s rated right now, so I’m not going to waste your time, or mine, repeating what thousands of other sites can tell you. Without further ado, let’s get started!

How to get started with React – I found this “gem” in my “usual suspect” place to get all the good and free stuff about learning anything to do with coding, freecodecamp. It also includes a free guide to get React Ready with your JavaScript, is it not cool? I think it’s a great idea to know where you are and what you need to have to learn something. Well done, Chris!

Today, I read the JavaScript guide which I found clear and easy, I had a clear idea that I had all the knowledge needed and I continued with creating my new React app.

I had all the needed “weapons” to start the fight (Node.js, VSCode, etc) so I just had to type:

npx create-react-app my-app

And the magic started! I had a look in the contents and I will continue tomorrow with more React coding.

It was nice at least to get this stone rolling.

Django Modeling

Python into the web


The next step to continue with the Django project is to add some models. Just follow the steps bellow to have them migrated in the database. You must have your virtual environment activated (remember, in your Powershell or terminal just run: )


Let’s go to our directory app “blogs” with our favourite IDE or text editor, in my case inside “blog”, in of your app, insert under #Create your models here (obviously he,he,he) something like that, in any case whatever you need to be in your model, in my case :

class Entry(models.Model):
    """An entry for your blog"""
    title = models.CharField(max_length=400)
    date_added = models.DateTimeField(auto_now_add=True)
    text = models.TextField()

    def __str__(self):
        """Return a string representation of the model."""
        return self.title

To see the different kinds of fields that you can use in a model :

The next step is to modify the database so it can store information related to our model Entry and apply our migration. So, from the terminal, we will run the follow commands:

python makemigrations blogs
python migrate

Whenever you want to modify the data that your Project (Blog) manages we’ll follow these three steps:

  • Modify
  • Call makemigrations on our app (blogs)
  • Tell Django to migrate the project

Let’s add another model just to show for example, Tags. It’s a relation of many_to_many, so a lot of Entries can use many Tags, and these Tags can be used for many Entries. In our case we need to modify our Entry model and add Tag model.

class Entry(models.Model):
    """An entry for your blog"""
    title = models.CharField(max_length=400)
    date_added = models.DateTimeField(auto_now_add=True)
    text = models.TextField()
    tags = models.ManyToManyField('Tag', related_name='tags')

    def __str__(self):
        """Return a string representation of the model."""
        return self.title

class Tag(models.Model):
    """An entry for your blog"""
    tag_name = models.CharField(max_length=400)

    def __str__(self):
        """Return a string representation of the model."""
        return self.tag_name

Remember, after the modification to run on your terminal the next two mandatory steps, to see your modifications:

python makemigrations blogs
python migrate

In your admin area you can easily add data to your models. Just login as superuser and there you go:

Django Hands on

Python into the web


I started with Python last month, just to see what is the fuss about it. I can see how simple it is and that makes it quite powerful, but coming from Ruby and Ruby on Rails, I can see serious resemblance between both of them, and now with Django more of the same. It’s fine, it’s not a critic, not bad feelings, it’s just an observation, if you “jump” from one to another it will not be a “cliff jumping” just a “mud puddle” kind of jump.

Here the steps to have a Django project kicking in no-time. You must have previously python 3 installed ( I followed these steps ). I did in a Windows 10 machine, so this my list of steps. Open a Powershell with Administrator rights and start typing:

# Create directory for your new project
mkdir blog
cd blog

# Create a virtual environment for your project
python -m venv ll_env
# to stop it 

# Install Django
pip install django

# Create the project in Django ATTENTION: Don't forget the . at the end!!!
django-admin startproject blog .

# Creating the database SQLite
python migrate

# Viewing the project 
python runserver

# go to

# Tada!!!!

# Create an App inside your project
# Your virtual environment must be activated
python startapp blogs

You will have to modify in under your project “Blog” to add your app, so it looks like:

..... Snip ..... 
    # My apps
    # Default django apps
..... Snip ..... 
# Let's create a superuser for our admin part
python createsuperuser 
(enter username, and password of your choice, the email is totally optional)

And now you can login in your app as superuser in the admin area :

And now it’s when you start creating models, views, templates, etc.