Categories
Book Reviews

Best Books About Javascript

JavaScript is one of the most popular programming languages in the world.

Therefore, if you want to be a software developer, mastering JavaScript will definitely help a lot.

Here are 3 books that are great for learning JavaScript.

JavaScript Patterns: Build Better Applications with Coding and Design Patterns

This book provides us with basic program design principles to let us organize our JavaScript code for maintainability and readability.

Common patterns are covered and they apply to many other programming languages as well.

It comes with many examples to help us learn program design in an easy to understand way.

If you want to improve your JavaScript programming skills, this is a must read book.

JavaScript for impatient programmers

This is a great book for learning the basics of JavaScript. It covers all versions of JavaScript to date from version 1 to the 2019 edition.

Therefore, it covers the latest features.

The concepts are explained simply in an easy to understand way.

Also, the examples are also very simple. Many books have examples that are hard to follow, but this book have examples that are written clearly and concisely.

If you want to learn JavaScript fast, this book is for you.

If you want to get up to date on the latest features of JavaScript, this is also a book for you.

DOM Enlightenment: Exploring JavaScript and the Modern DOM

If you want to be a front end developer, then you must read this book.

It goes the basics of DOM manipulation, which is must-learn knowledge for front end development.

We can learn how to manipulate web pages dynamically with JavaScript with this book.

This book is very concise and it’s organized better than other resources like the Mozilla Developer Network website.

The examples are also concise so that we can follow and understand them easily.

It goes from the basics to the nitty-gritty details.

Therefore, this is a great book for getting the basics of creating dynamic web pages and web apps.

These are some concise books we can learn JavaScript quickly.

If you want to become a good JavaScript developer, buy these books now.

Categories
JavaScript React

React Hooks Equivalent of componentDidMount

When we transition from creating class component to function component, one of things we have to do is find the hook equivalents of the life cycle hooks in class components.

One of the life cycle methods that are used a lot is the componentDidMount method.

It loads when the component is first mounted.

To do the same thing in function components, we use the useEffect hook with an empty array in the 2nd argument.

This lets us commit side effects once when the component first loads.

To use it, we write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState({});

  const getData = async () => {
    const res = await fetch("https://api.agify.io/?name=michael");
    const data = await res.json();
    setData(data);
  };

  useEffect(() => {
    getData();
  }, []);

  return <div>{data.name}</div>;
}

We reference the useEffect hook with a callback that calls the getData function.

getData just makes a GET request to an API and get some data. Then it set it as the value of the data state.

The empty array indicates that the callback only loads once when the component first loads.

This is because the array has the values to watch for, and we watch nothing, so it only loads once.

Then we return the data we want to display.

We can have more than one reference to useEffect unlike componentDidMount, so we don’t have to put everything in one callback.

Instead, we can have multiple instances of useEffect with empty arrays as the 2nd argument.

App just loads the data on first load and displays it.

Categories
JavaScript React

Reactjs Table Component – React Table

React Table is a simple table component that we can use to create tables in React.

It comes with a good hooks API to make using it easy in function components.

We can start using it by install it:

npm install react-table

Once we did that, we can use it as follows:

import React from "react";
import { useTable } from "react-table";

const data = [
  { id: 1, firstName: "jane", lastName: "doe" },
  { id: 2, firstName: "joe", lastName: "smith" },
  { id: 3, firstName: "may", lastName: "jones" }
];

const columns = [
  {
    Header: "first name",
    accessor: "firstName"
  },
  {
    Header: "last name",
    accessor: "lastName"
  }
];

export default function App() {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });

  return (
    <div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

We use the useTable hook, which takes an object with columns and data arrays which are in the format that we have on the top of the file.

The hook returns the getTableProps, getTableBodyProps, headerGroups, rows, prepareRow which we use in our table.

We just call and use them in the places that we have above to that we can get the rows and headings displayed.

row.cells have the row entries.

getTableBodyProps return the props for the tbody element.

headerGroups have the header data which we can use to create the table headers from the columns array.

Then we’ll see that we have a table with first name and last name columns with the corresponding names displayed.

Now we create a table without going through the effort of writing out all the code ourselves.

Categories
JavaScript React

Reactjs Table Example

To make a table with React, we just need to use the table element as we do with regular HTML.

Then we use the table, thead, tbody, tr and th elements as follows:

import React from "react";

const data = [
  { id: 1, firstName: "jane", lastName: "doe" },
  { id: 2, firstName: "joe", lastName: "smith" },
  { id: 3, firstName: "may", lastName: "jones" }
];

export default function App() {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>first name</th>
            <th>last name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(d => (
            <tr key={d.id}>
              <td>{d.firstName}</td>
              <td>{d.lastName}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

We have the data array, which we map to table rows in between the tbody tags.

The thead has the table headings with the tr for the rows and th for the table headings.

The entries in data are mapped to tr elements with td for the cells.

Then we would get a table with the fields we have in the objects.

Now we have a table with dynamic data in it.

Categories
Book Reviews

Best Books for a Software Engineer

The best books for a software engineer are the ones that are useful for many years.

They are independent of technological changes and we can read them for their general principles.

Here are the best books for a software engineer to read.

Clean Code: A Handbook of Agile Software Craftsmanship

Clean Code: A Handbook of Agile Software Craftsmanship is a book by Robert C. Martin, also known as Uncle Bob that outlines the principles of agile software development and how to write clean code.

Clean code is source code that people understand and change easily.

He goes through the basics like naming, functions, classes, SOLID, and more to show us how to write code well.

In addition, he goes over how to make code neat and easy to read.

The proper use of comments are also emphasized. He suggests that good code is better than comments.

Then he goes over the proper ways to handle errors and good designs for object-oriented programs.

Also, he places great emphasis on automated testing to reduce the burden of manual testing and make software changes easier.

The books go over the principles in Java but they apply to many other programming languages.

It’s a book that outlines all the good practices that we need to know to write high-quality programs.

The Pragmatic Programmer: 20th Anniversary Edition, 2nd Edition: Your Journey to Mastery

This is another book that shows us how to write code that’s easy for us to read and maintain.

Like Clean Code, it starts from the basics and also discuss more advanced concepts.

It’s aimed at both entry level and experienced programmers.

This book has emphasis of making modular code, reducing duplication not only in code but also in everything else involved in building software.

Also, it goes over ways to test ideas and make them reality faster.

Refactoring and testing are also discussed in great details.

This the follow up to the original edition that is more than 20 years old.

They are both classics and both editions still have useful concepts that we can apply today.

The Clean Coder: A Code of Conduct for Professional Programmers

This is another book by Robert C. Martin, which also written Clean Code.

It’s a book that shows us how to be a professional programmer.

It’s the definitive guide that explains how to be a good programmer from a nontechnical perspective.

This book focuses on making commitments, taking responsibility, improving speed.

Furthermore, it talks about testing, time management, estimation, dealing with pressure, and collaboration.

These are all the things that we have to deal with and Robert shares his wisdom with us so that we don’t have to go through the difficulties he went through.

It’s a good book that will make our lives easier if we’re programming software for a living.

Refactoring: Improving the Design of Existing Code

This is another time-tested book that shows us how to create high-quality software.

The angle is different from the others in that this one shows us how to make incremental changes to our code to improve its quality.

First it emphasizes the importance of tests, which are needed before refactoring.

Then it goes over common refactoring techniques with examples in Java.

However, it applies to many other programming languages, since they’re general things that many object-oriented languages can do.

Refactoring including functions, classes, big and small changes, abstraction and more are discussed in this book.

Code Complete

Code Complete is a big book on software development that goes through the best practices for software engineer from start to finish.

It starts from gathering requirements and the general steps of creating designs for complex systems, all the way to the smallest details of naming and functions.

Everything is discussed in great detail. Therefore, this is a one-stop shop for learning the best practices of software engineer all in one place.

It makes us think about all the cases when building software and find ways to build what users what instead of we think they want.

Also, it goes through the principles of refactoring all the way to the smallest details like spacing and formatting.

Debugging is also a topic that it goes through.

Collaborative development is a topic that it covers in details. Like the other books, teamwork is something that it goes over.

This book is good for programmers at any experience level. Even though it has examples in C++, C#, Java and Visual Basic, those principles apply well to other languages as well.

These books are great for any software engineer. They have timeless principles that we can use at any time or situation.

After reading them, you’ll be a great programmer.