Forem: Mario Arranz

Getting started with React Bootstrap

Mario Arranz — Sun, 12 Apr 2020 20:48:08 +0000

Installing React

Let's install and use the create-react-app tool to initialise a react app with the main configuration:

npm install -g create-react-app
# We might need adding sudo at the begining

Create the directory we want to start working with and go into it:

mkdir react-bootstrap
cd react-bootstrap

Create the scaffolding in the directory:

create-react-app .

At this point we should have a sample react app, so we can run it locally:

yarn start

Adding some styles

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites, and there is a version for react that we can install:

yarn add react-bootstrap bootstrap

Finally, we need to set it in src/index.js by simply adding an extra import:

import 'bootstrap/dist/css/bootstrap.css'

Now, when loading the website (run yarn start in case you stopped it), we will see some diferent colours changed by bootstrap.

Try it out

After configuring the react app to use bootstrap, the next thing we can do is taking advantage of its simplicity for creating a beautiful UI without being a CSS expert.

But in order to do that, first we need fetching some data to show.

As we saw in src/index.js,

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

the website is default configured to load the App component. So, in this case, this is going to be the component to modify.

So far, this App.js is using a functional component, a component which doesn’t have its own state or needs to access a lifecycle hook.

function App() {
  return (
      // ...
  )
}

To show some data in the UI, we need to have it before loading the page. An advantage of using React components over functional components is that we can override lifecycle methods. So the first change is transforming the functional component into a React component.

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

class App extends Component {
    render() {
        return (
            // ...
        )
    }
}

At this point we can fetch the data, and to do it before the page loads completely we will override componentDidMount().

class App extends Component {
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
      console.log(this.state.contacts)
    })
    .catch(console.log)
  }

  render() {
    return (
      // ...
    )
  }
}

Thanks to console.log(), when we reload the website while having the developer tools opened, we can see the fetched result.

Finally, we structure the data the way we want. For this example I've used bootstrap cards:

import React, { Component, Fragment } from 'react'
import { Card, Button } from 'react-bootstrap'

class App extends Component {
  componentDidMount() {
    // ...
  }

  render() {
    return (
      <Fragment>
        <CardGroup>
          {this.state.contacts.map((contact, idx) => (
            <Card key={idx}>
              <Card.Body>
                <Card.Title>{contact.name}</Card.Title>
                <Card.Text>{contact.email}</Card.Text>
                <Button variant="warning" size="sm">
                  <a href={'https://' + contact.website} target="_blank" rel="noopener noreferrer">
                    {contact.website}
                  </a>
                </Button>
              </Card.Body>
            </Card>
          ))}
        </CardGroup>
      </Fragment>
    )
  }
}

Github source code

Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to my GitHub repository and open a new pull request with your changes.

Go fundamentals

Mario Arranz — Sun, 05 Apr 2020 17:35:37 +0000

If you are new to Go or, like me, you started some time ago but for some reason you missed fundamentals, this post could be useful to answer why things work a certain way. I recently attended the Go Ultimate course imparted by Bill Kennedy so I will explain here what I learnt.

I have been coding in Go for the last 2 years now, so I could be wrong. I would be really happy if you could ping me in case you consider there is a mistake.

What is Go?

Go is a statically typed, compiled, data-oriented programming language that doesn't use a virtual machine, such as is provided by the Java runtime. Go programs are compiled ahead of time to native machine code. It works on top of the hardware and it was built getting the best of other languages.

The simplicity of language often helps us, or other developers in the future, to make more efficient code. So, don't make code easy to do, make it easy to understand.

Low level

To understand how to write better code, it is important to know that the software could be affected by:

External latency (milliseconds).
Internal latency (garbage collection, sync, and orchestration) (reducing it can improve +20%, microseconds)
Algorithm efficiency.

Number of processors available

On intel machines with Hiperthread (Intel’s name for simultaneous multithreading), the number of processors available is doubled (i.e. dual-core hyper-threaded CPU have 4 processors, quad-core non-HT CPU has 4 processors. Quad-core option is the better choice, though, because it has more physical processing hardware).
We could always check the number of processors available with runtime.NumCPU(). Keep in mind the Playground is a single processor machine.

Go routine size vs stack size

When an application starts and calls main(), every line of code can:

Allocate memory
Read memory
Write memory

Bugs are (almost) always in writing memory. Every problem we solve is a data transformation issue.

Value semantics vs pointer semantics:

Initialising variables:

In Go there are many ways to initialise a variable:

// BASIC TYPES
var count int // use this way for zero-value initialisation
count := 10   // use this way for non zero-value initialisation
count := 0    // NOT a good practise

// DEFINED TYPES
// use this way for zero-value initialisation
var u user

// use this way for non zero-value initialisation
// value semantic construction - GOOD practise
u := user{
    age: 10,
}

// pointer semantic construction - NOT a good practise
// more indicative, using the previous value semantic way
// and use '&' as many places as is needed
u := &user{
    age: 10,
}

Playground

Functions:

This code shows the difference between sharing a variable (pointer to it) and sharing just its value:

count := 10

println("count:\tValue =", count, "\tAddr =", &count)

println("-- incrementByValue(count) --")
// Pass the "value" of the variable.
incrementByValue(count)
println("----------------------")

println("count:\tValue =", count, "\tAddr =", &count)

println("-- incrementByPointer(count) --")
// Pass the "address" the variable.
incrementByPointer(&count)
println("----------------------")

println("count:\tValue =", count, "\tAddr =", &count)

Both ways of incrementing a variable:

func incrementByValue(inc int) {
    inc++
    println("inc:\tValue =", inc, "\tAddr =", &inc)
}

func incrementByPointer(inc *int) {
    *inc++
    println("inc:\tValue =", inc, "\tAddr =", &inc)
}

The result of the code above is:

count:  Value = 10  Addr = 0x41a788
----- incrementByValue(count) -----
inc:    Value = 11  Addr = 0x41a784
----------------------------------
count:  Value = 10  Addr = 0x41a788
--- incrementByPointer(&count) ---
inc:    Value = 11  Addr = 0x41a788
----------------------------------
count:  Value = 11  Addr = 0x41a788

The count variable is stored in the address 0x41a788. Its value is passed to incrementByValue function, who stores the incremented value in another address, 0x41a784. If this function wanted to inform of its new value it would be necessary to return it.
On the other hand, count address is passed to incrementByPointer function, who uses the same address, 0x41a788. The result is that the original count variable is modified.

Playground