Forem: Nathan Sebhastian

JavaScript Operators Breakdown With Examples

Nathan Sebhastian — Wed, 20 Sep 2023 10:05:55 +0000

JavaScript has many operators that you can use to perform operations on values and variables (also called operands)

Based on the type of the operators, there are 7 kinds of JavaScript operators:

Arithmetic
Assignment
Comparison
Logical
Ternary
The typeof operator
Bitwise

In this guide, you're going to learn each of these operators in detail. Let's start with arithmetic operators.

Arithmetic operators

The arithmetic operators are used to perform mathematical operations like additions and subtractions.

These operators are frequently used with number data types, so they are similar to a calculator. The following example shows how you can use the + operator to add two variables together:

let x = 3;
let y = 8;

console.log(x + y); // 11

Here, the two variables x and y are added together using the plus + operator. We also used the console.log() method to print the result of the operation to the screen.

You can use operators directly on values without assigning them to any variable too:

console.log(2 + 1); // 3
console.log(4 + 1); // 5

In JavaScript, we have 8 arithmetic operators in total. They are:

Addition +
Subtraction -
Multiplication *
Division /
Remainder %
Exponentiation **
Increment ++
Decrement --

Let's see how these operators work one by one.

1. Addition

The addition operator + is used to add two or more numbers together. You've seen how this operator works previously, but here's another example:

console.log(7 + 2); // 9
console.log(2.3 + 1.5); // 3.8

You can use the addition operator on both integer and floating numbers.

2. Subtraction

The subtraction operator is marked by the minus sign − and can be used to subtract the right operand from the left operand.

For example, here's how to subtract 3 from 5:

let x = 5;
let y = 3;

console.log(x - y); // 2

3. Multiplication

The multiplication operator is marked by the asterisk * symbol, and you use it to multiply the value to the left by the value to the right of the operator.

console.log(5 * 2); // 10
console.log(3 * 3); // 9

4. Division

The division operator / is used to divide the left operand by the right operand. Here are some examples of using the operator:

console.log(10 / 2); // 5
console.log(9 / 3); // 3

5. Remainder

The remainder operator % is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been done.

A practical example should make this operator easier to understand, so let's see one:

console.log(10 % 3);

The number 10 can't be divided by 3 perfectly. The result of the division is 3 with a remainder of 1. The remainder operator simply returns that remainder number.

If the left operand can be divided with no remainder, then the operator returns 0.

This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1.

console.log(1 % 2); // 1
console.log(2 % 2); // 0
console.log(3 % 2); // 1
console.log(4 % 2); // 0

6. Exponentiation

The exponentiation operator is marked by two asterisks ** symbol. It's one of the newer JavaScript operator and you can use it two calculate the power of a number by its exponent.

For example, here's how to calculate 10 to the power of 3:

console.log(10 ** 3); // 1000

Here, the number 10 is multiplied by itself 3 times (10 _ 10 _ 10)

The exponentiation operator gives you an easy way to find the power of a specific number.

7. Increment

The increment ++ operator is used to increase the value of a number by one. For example:

let x = 5;

x++;

console.log(x); // 6

This operator gives you a faster way to increase a variable value by one. Without the operator, here's how you increment a variable:

let x = 5;

x = x + 1;

console.log(x); // 6

Using the increment variable allows you to shorten the second line. You can place this operator before or next to the variable you want to increment:

let x = 5;

// Place the operator next to the variable (postfix)
x++;

// Place the operator before the variable (prefix)
++x;

Both placements shown above are valid. The differences between prefix (before) and postfix (after) placements is that the prefix position will execute the operator after that line of code has been executed.

Consider the following example:

let x = 5;
let y = 5;

console.log(x++); // 5
console.log(x); // 6

console.log(++y); // 6
console.log(y); // 6

Here, you can see that placing the increment operator next to the variable will print the variable as if it has not been incremented.

When you place the operator before the variable, then the number will be incremented before calling the console.log() method.

8. Decrement

The decrement -- operator is used to decrese the value of a number by one. It's the opposite of the increment operator:

let x = 5;

x--;

console.log(x); // 4

Please note that you can only use increment and decrement operators on a variable. An error occurs when you try to use these operators directly on a number value:

console.log(5--);

Output:

Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

You can't use increment or decrement operator on a number directly.

Arithmetic operators summary

Now you've learned the 8 types of arithmetic operators. Excellent! Keep in mind that you can mix these operators to perform complex mathematical equations.

For example, you can perform an addition and multiplication on a set of numbers:

console.log(5 + 2 * 3); // 11

The order of operations in JavaScript is the same as in mathematics. Multiplication, division, and exponentiation takes a higher priority than addition or subtraction.

You can use parentheses () to change the order of the operations. Wrap the operation you want to execute first as follows:

console.log((5 + 2) * 3); // 21

When using increment or decrement operators together with other operators, you need to place the operators in a prefix position as follows:

let x = 5;
console.log(2 + ++x); // 2 + 6 = 8

This is because a postfix increment or decrement operator will not be executed together with other operations in the same line, as I have explained previously.

Let's try some exercise. Can you guess the result of these operations?

console.log(5 * 3 - 2);
console.log((3 * 6) % 2);
console.log(5 + 7 - 1);
console.log((4 + 9) * 4);

let x = 5;
console.log(++x);
console.log(x++ / 3);

And that's all for arithmetic operators. You've done a wonderful job learning about these operators.

Let's take a short five minute break before proceeding to the next type of operators.

Assignment operators

The second type of operators we're going to explore is the assignment operators.

The assignment operators are used to assign a specific value to a variable. The basic assignment operator is marked by the equal = symbol, and you've already seen this operator in action before:

let x = 5;

Beside this basic assignment operator, there are 5 more assignment operators that combine mathematical operations with the assignment. These operators are useful to make your code clean and short.

For example, suppose you want to increment the x variable by 2. Here's how you do it with the basic assignment operator:

let x = 5;

x = x + 2;

There's nothing wrong with the code above, but you can use the addition assignment += to rewrite the second line as follows:

let x = 5;

x += 2;

There are 7 kinds of assignment operators that you can use in JavaScript:

Name	Operation example	Meaning
Assignment	`x = y`	`x = y`
Addition assignment	`x += y`	`x = x + y`
Subtraction assignment	`x -= y`	`x = x - y`
Multiplication assignment	`x *= y`	`x = x * y`
Division assignment	`x /= y`	`x = x / y`
Remainder assignment	`x %= y`	`x = x % y`
Exponentiation assignment	`x **= y`	`x = x ** y`

The arithmetic operators you've learned in the previous section have a combination with the assignment operator except the increment and decrement operators.

Let's have a quick exercise. Can you guess the results of these assignments?

let x = 3;

x += 2 * 3;
console.log(x);

x -= 3;
console.log(x);

x %= 2;
console.log(x);

Now you've learned about assignment operators. Let's continue with the logical operators

Comparison operators

As the name implies, the comparison operators are used to compare one value or variable with something else. The operators in this category always returns a boolean value: either true or false.

For example, suppose you want to compare if a variable's value is greater than 1. Here's how you do it:

let x = 5;

console.log(x > 1); // true
console.log(x > 7); // false

The greater than > operator checks if the value on the left operand is greater than the value on the right operand.

There are 8 kinds of comparison operators available in JavaScript:

Name	Operation example	Meaning
Equal	`x == y`	Returns `true` if the operands are equal
Not equal	`x != y`	Returns `true` if the operands are not equal
Strict equal	`x === y`	Returns `true` if the operands are equal and have the same type
Strict not equal	`x !== y`	Returns `true` if the operands are not equal, or have different types
Greater than	`x > y`	Returns `true` if the left operand is greater than the right operand
Greater than or equal	`x >= y`	Returns `true` if the left operand is greater than or equal to the right operand
Less than	`x < y`	Returns `true` if the left operand is less than the right operand
Less than or equal	`x <= y`	Returns `true` if the left operand is less than or equal to the right operand

Here are some examples of using comparison operators:

console.log(9 == 9); // true

console.log(9 != 20); // true

console.log(2 > 10); // false

console.log(2 < 10); // true

console.log(5 >= 10); // false

console.log(10 <= 10); // true

The comparison operators are further divided in two types: relational and equality operators.

The relational operators compare the value of one operand relative to the second operand (greater than, less than)

The equality operators check if the value on the left is equal to the value on the right. They can also be used to compare strings like this:

console.log("ABC" == "ABC"); // true

console.log("ABC" == "abc"); // false

console.log("Z" != "A"); // true

String comparisons are case-sensitive, as shown in the example above.

JavaScript also has two versions of the equality operators: loose and strict.

In strict mode, JavaScript will compare the values without performing a type coercion. To enable strict mode, you need to add one more equal = symbol to the operation as follows:

console.log("9" == 9); // true
// strict equal
console.log("9" === 9); // false

console.log("1" != 1); // false
// strict not equal
console.log("1" !== 1); // true

Since type coercion might result in unwanted behavior, you should use the strict equality operators anytime you do equality comparison.

Logical operators

The logical operators are used to check whether one or more expressions result in either true or false.

There are three logical operators available in JavaScript:

Logical AND - x && y - Returns true if all operands are true, else returns false
Logical OR - x || y - Returns true if one of the operands is true, else returns false
Logical NOT - !x - Reverse the result: returns true if false and vice versa

These operators can only return Boolean values. For example, you can determine whether '7 is greater than 2' and '5 is greater than 4':

console.log(7 > 2 && 5 > 4); // true

These logical operators follow the laws of mathematical logic:

&& AND operator - if any expression returns false, the result is false
|| OR operator - if any expression returns true, the result is true
! NOT operator - negates the expression, returning the opposite.

Let's have a little exercise. Try to run these statements on your computer. Can you guess the results?

console.log(true && false);

console.log(false || false);

console.log(!true);

These logical operators will come in handy when you need to assert that a specific requirement is fulfilled in your code.

Let's say a happyLife requires a job with highIncome and supportiveTeam:

let highIncome = true;
let supportiveTeam = true;
let happyLife = highIncome && supportiveTeam;

console.log(happyLife); // true

Based on the requirements, you can use the logical AND operator to check whether you have both requirements. When one of the requirements is false, then happyLife equals false as well.

Ternary operator

The ternary operator (also called the conditional operator) is the only JavaScipt operator that requires 3 operands to run.

Let's imagine you need to implement a specific logic in your code. Suppose you're opening a shop to sell fruits. You give a $3 discount when the total purchase is $20 or more. Otherwise, you give a $1 discount.

You can implement the logic using an if..else statement as follows:

let totalPurchase = 15;

let discount;

if (totalPurchase >= 20) {
  discount = 3;
} else {
  discount = 1;
}

The code above works fine, but you can use the ternary operator to make the code shorter and more concise as follows:

let totalPurchase = 15;

let discount = totalPurchase >= 20 ? 3 : 1;

The syntax for the ternary operator is condition ? expression1 : expression2.

You need to write the condition to evaluate followed by a question ? mark.

Next to the question mark, you write the expression to execute when the condition evaluates to true, followed by a colon : symbol. You can call this expression1.

Next to the colon symbol, you write the expression to execute when the condition evaluates to false. This is expression2.

As you see in the example above, the ternary operator can be used as an alternative to the if..else statement.

The typeof operator

The typeof operator is the only operator that's not represented by symbols. This operator is used to check the data type of the value you placed on the right side of the operator.

Here are some examples of using the operator:

let x = 5;
console.log(typeof x) //  'number'

console.log(typeof "Nathan") // 'string'

console.log(typeof true) // 'boolean'

console.log(typeof null) // 'object'

console.log(typeof [1, 2, 3]) // 'object'

console.log(typeof {}) // 'object'

console.log(typeof undefined) // 'undefined'

The typeof operator returns the type of the data as a string. The 'number' type represents both integer and float types, the string and boolean represent their respective types.

Arrays, objects, and the null value are of object type, while undefined has its own type.

Bitwise operators

Bitwise operators are operators that treat their operands as a set of binary digits, but return the result of the operation as a decimal value.

These operators are rarely used in web development, so you can skip this part if you only want to learn practical stuff. But if you're interested to know how it works, then let me show you an example.

A computer uses a binary number system to store decimal numbers in memory. The binary system only use two numbers: 0 and 1 to represent the whole range of decimal numbers we humans know.

For example, the decimal number 1 is represented as binary number 00000001, and the decimal number 2 is represented as 00000010.

I won't go into detail on how to convert a decimal number into a binary number as that's too much to include in this guide. The main point is that the bitwise operators operate on these binary numbers.

If you want to find the binary number from a specific decimal number, you can google for the "decimal to binary calculator".

There are 7 types of bitwise operators in JavaScript:

AND &
OR |
XOR ^
NOT ~
Left Shift <<
Right Shift >>
Zero-fill Right Shift >>>

Let's see how they work.

1. Bitwise AND operator

The bitwise operator AND & returns a 1 when the number 1 overlaps in both operands. The decimal number 1 and 2 has no overlapping 1, so using this operator on the numbers return 0:

// 1 = 00000001
// 2 = 00000010
// ------------
//     00000000 = 0

console.log(1 & 2); // 0

2. Bitwise OR operator

On the other hand, the bitwise operator OR | returns all 1 in both decimal numbers.

// 1 = 00000001
// 2 = 00000010
// ------------
//     00000011 = 3

console.log(1 | 2); // 3

The binary number 00000011 represents the decimal number 3, so the OR operator above returns 3.

Bitwise XOR operator

The Bitwise XOR ^ look for the differences between two binary numbers. When the corresponding bits are the same, it returns 0:

5 = 00000101

// 5 = 00000101
// 7 = 00000111
// ------------
//     00000010 = 2

console.log(5 ^ 7); // 2

Bitwise NOT operator

Bitwise NOT ~ operator inverts the bits of a decimal number so 0 becomes 1 and 1 becomes 0:

// 5 = 00000101
// ------------
//     11111010 = -6

console.log(~5); // -6

Bitwise Left Shift operator

Bitwise Left Shift << shifts the position of the bit by adding zeroes from the right.

The excess bits are then discarded, changing the decimal number represented by the bits. See the following example:

console.log(5 << 2);

// 5 = 00000101
// ------------ << Shift to the left by 2
//     00010100 = 20

The right operand is the amount of zero you will add to the left operand.

Bitwise Right Shift operator

Bitwise Right Shift >> shifts the position of the bits by adding zeroes from the left. It's the opposite of the Left Shift operator:

console.log(5 >> 2); // 1

// 5 = 00000101
// ------------ >> Shift to the right by 2
//     00000001 = 1

Bitwise Zero-fill Right Shift operator

Also known as Unsigned Right Shift operator, the Zero-fill Right Shift >>> operator is used to shift the position of the bits to the right, while also changing the sign bit to 0.

This operator transform any negative number into positive number, so you can see how it works when passing a negative number as the left operand:

console.log(-70 >> 1); // -35
console.log(-70 >>> 1); // 2147483613

console.log(5 >> 1); // 2
console.log(5 >>> 1); // 2

In the above example, you can see that the >> and >>> operators return different results. The Zero-fill Right Shift operator has no effect when you use it on a positive number.

Now you've learned how the bitwise operators work. If you think they are confusing, then you're not alone! Fortunately, these operators are scarcely used when developing web applications.

You don't need to learn them in depth. It's enough to know what they are.

Conclusion

In this long guide, you've learned the 7 types of JavaScript operators: Arithmetic, assignment, comparison, logical, ternary, typeof, and bitwise operators.

These operators can be used to manipulate values and variables to achieve a desired outcome.

Congratulations on finishing this guide! If you want to learn more from me, I encourage you to check out my full JavaScript Guide here:

The course is designed to help you learn JavaScript quickly and in the right order.

You can access the course as many times as you want, at your own pace. The course comes with plenty of exercises and solutions to help you 'get' the knowledge.

That's all I have for now. Thanks for reading and see you in other articles 👋

Understanding React `useState` and `useEffect` hooks

Nathan Sebhastian — Fri, 27 Nov 2020 12:12:56 +0000

React hooks are JavaScript functions that you can import from React package in order to add features to your components. Hooks are available only for function-based components, so they can't be used inside a class component.

React provides you with 10 hooks function, but only 2 of these hooks are going to be used very frequently when you write function components. They are useState and useEffect hooks. Let's learn about useState first.

The useState hook is a function that takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state. Here's the hook in action:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')
}

Notice the use of square brackets when state variable is declared. This is the ES6 array destructuring syntax, and it means we’re assigning the first element of the array returned by useState to name and the second element to setName variable.

So this means we have a state named name and we can update it by calling on setName() function. Let’s use it on the return statement:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  return <h1> Hello World! My name is {name} </h1>
}

Since function components don't have the setState() function, you need to use the setName() function to update it. Here's how you change the name from "John" to "Luke":

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  if(name === "John"){
    setName("Luke")
  }

  return <h1> Hello World! My name is {name} </h1>
}

When you have multiple states, you can call the useState hook as many times as you need. The hook receives all valid JavaScript data types such as string, number, boolean, array, and object:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('Jack')
  const [age, setAge] = useState(10)
  const [isLegal, setLegal] = useState(false)
  const [friends, setFriends] = useState(["John", "Luke"])

  return <h1> Hello World! My name is {name} </h1>
}

And that's all there is to it. The useState hook basically enables function components to have its own internal state.

The `useEffect` hook

The useEffect hook is the combination of componentDidMount, componentDidUpdate and componentWillUnmount class lifecycle methods. This hook is the ideal place to set up listeners, fetching data from API and removing listeners before the component is removed from the DOM.

Let’s look at an example of useEffect in comparison with class lifecycle methods. Normally in class component, we write this kind of code:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Nathan',
    };
  }

  componentDidMount() {
    console.log(
      `didMount triggered: Hello I'm ${this.state.name}`
    );
  }

  componentDidUpdate() {
    console.log(
      `didUpdate triggered: Hello I'm ${this.state.name}`
    );
  }

  render() {
    return (
      <div>
        <p>{`Hello I'm ${this.state.name}`}</p>
        <button
          onClick={() =>
            this.setState({ name: 'Gary'})
          }
        >
          Change me
        </button>
      </div>
    );
  }
}

Since componentDidMount is run only once when the component is inserted into the DOM tree structure, subsequent render won’t trigger the method anymore. In order to do run something on each render, you need to use componentDidUpdate method.

Using useEffect hook is like having both componentDidMount and componentDidUpdate in one single method, since useEffect runs on every render. It accepts two arguments:

(mandatory) A function to run on every render
(optional) An array of state variables to watch for changes. useEffect will be skipped if none of the variables are updated.

Rewriting the above class into function component would look like this:

const Example = props => {
  const [name, setName] = useState('Nathan');

  useEffect(() => {
    console.log(`Hello I'm ${name}`);
  });

  return (
    <div>
      <p>{`Hello I'm ${name}`}</p>
      <button
        onClick={() => {
          setName('Gary')
          }}>
        Change me
      </button>
    </div>
  )
}

The function component above will run the function inside of useEffect function on each render. Now this isn’t optimal because the state won’t be updated after the first click. This is where useEffect second argument come into play.

useEffect(() => {
    console.log(`Hello I'm ${name} and I'm a ${role}`);
  }, 
  [name]);

The second argument of useEffect function is referred to as the "dependency array". When the variable included inside the array didn't change, the function passed as the first argument won't be executed.

The componentWillUnmount effect

If you have code that needs to run when the component will be removed from the DOM tree, you need to specify a componentWillUnmount effect by writing a return statement into the first argument function. Here is an example:

useEffect(() => {
    console.log(`useEffect function`);

    return () => { console.log("componentWillUnmount effect"); }
  }, [name] );

Running useEffect only once

To run useEffect hook only once like componentDidMount function, you can pass an empty array into the second argument:

useEffect(
  () => {
    console.log(`useEffect function`);
  }, 
  [] );

The empty array indicates that the effect doesn't have any dependencies to watch for change, and without a trigger, it won't be run after the component is mounted.

Level up your React skill today!

Get my latest book and build FOUR projects using React. You get 40% off with my Black Friday deal! Grap a copy today!

Understanding React lifecycle methods

Nathan Sebhastian — Tue, 24 Nov 2020 11:00:00 +0000

All React components must have a render method, which returns some element that will be inserted into the DOM. Indeed, ReactDOM.render is called on a pure HTML element, which in most applications use the <div> tag with id root as its entry point.

That's why when we do this:

class sampleComponent extends React.Component {
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(
  <sampleComponent />,
  document.getElementById('root')
);

The <h1> element will be added into the DOM element with id root:

<div id='root'>
  <h1>Hello World</h1>
</div>

Even though you can't see it in the browser, there's a fraction of time before React component render or insert this <h1> element into the browser and after it, and in that small fraction of time, you can run special functions designed to exploit that time.

This is what lifecycle functions in a React component do: it executes at a certain time before or after a component is rendered to the browser.

When a component is first inserted into the DOM (or the root element), it will run the constructor method. At this point, nothing is happening in the browser.

Then React will run the component render method, inserting the JSX you write into the DOM. After render is finished, it will immediately run the componentDidMount function.

When you call on setState, the render function will be called again after state is changed, with componentDidUpdate function immediately run after it.

componentWillUnmount function will run before the component rendered element is removed from the DOM.

The theory might seem complex, but as you will see in this post, lifecycle functions are situational code, and they are used only for specific use cases.

The constructor function

The constructor function is run on the initialization of a React component. It is widely used as the place where state is initialized:

class sampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number : 0
    }
  }
}

The function super will call on the parent constructor (specifically, the React.Component constructor) so that you can call on this:

class sampleComponent extends React.Component {
  constructor(props) {
    // this will cause error
    this.state = {
      number : 0
    }
    super(props);
  }
}

The props are being passed into super so that you can call on this.props on the constructor. If you're not using props in the constructor at all, you can omit it.

You might notice that on the previous chapters, you can also initiate state outside of the constructor:

class sampleComponent extends React.Component {
  state = {
    number: 0
  }
}

Both are valid state declarations, but the constructor style is widely adopted as the conventional style to class components, so you will find most React code use it.

The bottom line for constructor function — initialize your state there.

render function

You have seen this function in previous chapters, so it must be familiar to you. The render function is used to write the actual JSX elements, which are returned to React and hooked into the DOM tree.

Before returning JSX, you can write regular JavaScript syntax for operation such as getting state value, and embed it into the JSX:

render() {
  const { name, role } = this.state;
  return (
    <div>My name is {name} and I'm a {role}</div>
  )
}

The componentDidMount function

The most common use of componentDidMount function is to load data from backend services or API. Because componentDidMount is called after render is finished, it ensures that whatever component manipulation you do next, like setState from fetched data, will actually update state from its initial value.

A data request to backend services might resolve faster than the component is inserted into the DOM, and if it did, you will do a setState faster than the render method finished. That will cause React to give you a warning. The most common use of componentDidMount looks like this:

class sampleComponent extends React.Component {

  componentDidMount() {
    this.fetchData().then(response => {
      this.setState({
        data: response.data
      });
    });
  }

  fetchData = () => {
    // do a fetch here and return something
  }
}

But componentDidMount is limited to running only once in a component lifecycle. To address this limitation, let's learn about the next lifecycle function.

The componentDidUpdate function

Since componentDidMount is run only once in a component lifetime, it can't be used to fetch data in response to state change. Enter componentDidUpdate function. This function is always run in response to changes in the component, remember the diagram again:

An easy example would be to log the new state after a re-render.

class SampleDidUpdate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }

  incrementState = () => {
    const { number } = this.state;
    this.setState({
      number: number + 1
    });
  };

  decrementState = () => {
    const { number } = this.state;
    this.setState({
      number: number - 1
    });
  };

  componentDidMount() {
    const { number } = this.state;
    console.log(`The current number is ${number}`);
  }

  componentDidUpdate() {
    const { number } = this.state;
    console.log(`The current number is ${number}`);
  }

  render() {
    const { number } = this.state;
    return (
      <>
        <div> The current number is {number}</div>
        <button onClick={this.incrementState}>Add number</button>
        <button onClick={this.decrementState}>Subtract number</button>
      </>
    );
  }
}

A demo is available here. Notice how didMount and didUpdate is identical in everything but name. Since user can change the keyword after the component did mount into the DOM, subsequent request won't be run by componentDidMount function. Instead, componentDidUpdate will "react" in response to the changes after render function is finished.

The componentWillUnmount function

The final function componentWillUnmount will run when the component is about to be removed from the DOM. This is used to cleanup things that would be left behind by the component.

To try out this function, let's create two child component and one parent component.

class ChildComponentOne extends React.Component {
  componentWillUnmount() {
    console.log("Component One will be removed");
  }

  render() {
    return <div>Component One</div>;
  }
}

class ChildComponentTwo extends React.Component {
  componentWillUnmount() {
    console.log("Component Two will be removed");
  }

  render() {
    return <div>Component Two</div>;
  }
}

This child components will do a simple div render with componentWillUnmount function that logs a text into the console. Then the parent component will render one of them based on the current state it's in.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }

  switchState = () => {
    const { number } = this.state;
    this.setState({
      number: number === 0 ? 1 : 0
    });
  };

  render() {
    const { number } = this.state;
    let component = number ? <ChildComponentOne /> : <ChildComponentTwo />;
    return (
      <>
        {component}
        <button onClick={this.switchState}>Switch</button>
      </>
    );
  }
}

When you click on the Switch button, the component that will be removed from the DOM will log a message, then leave and be replaced with the new component. You can try the Code Sandbox here.

When to use it? It's actually very situational, and the best use of componentWillUnmount is to shut down some external service listener your component is subscribed into.

Conclusion

React's lifecycle methods are used for running codes that needs to be automatically run when the component is created, added, and removed from the DOM.

The lifecycle methods bring more control over what happens at each specific time during your component lifetime, from its creation to its destruction, allowing you to create dynamic applications in the process.

Level up your React skill today!

Get my latest book and build FOUR projects using React. You get 40% off with my Black Friday deal! Grap a copy today!

React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (with examples)

Nathan Sebhastian — Thu, 20 Aug 2020 14:16:04 +0000

There's no one right way to style your React components. It all depends on how complex your front-end application is, and which approach you're the most comfortable with.

There are four different ways to style React application, and in this post you will learn about them all. Let’s start with inline styling.

Inline Styling

React components are composed of JSX elements. But just because you’re not writing regular HTML elements doesn’t mean you can’t use the old inline style method.

The only difference with JSX is that inline styles must be written as an object instead of a string.

Here is a simple example:

import React from "react";

export default function App() {
  return (
      <h1 style={{ color: "red" }}>Hello World</h1>
  );
}

In the style attribute above, the first set of curly brackets will tell your JSX parser that the content between the brackets is JavaScript (and not a string). The second set of curly bracket will initialize a JavaScript object.

Style property names that have more than one word are written in camelCase instead of using the traditional hyphenated style. For example, the usual text-align property must be written as textAlign in JSX:

import React from "react";

export default function App() {
  return (
      <h1 style={{ textAlign: "center" }}>Hello World</h1>
  );
}

Because the style attribute is an object, you can also separate the style by writing it as a constant. This way, you can reuse it on other elements as needed:

import React from "react";

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
      <p style={pStyle}>The weather is sunny with a small chance of rain today.</p>
  );
}

If you need to extend your paragraph style further down the line, you can use the object spread operator. This will let you add inline styles to your already-declared style object:

import React from "react";
const pStyle = {
  fontSize: "16px",
  color: "blue"
};
export default function App() {
  return (
    <>
      <p style={pStyle}>
        The weather is sunny with a small chance of rain today.
      </p>
      <p style={{ ...pStyle, color: "green", textAlign: "right" }}>
        When you go to work, don't forget to bring your umbrella with you!
      </p>
    </>
  );
}

Inline styles are the most basic example of a CSS in JS styling technique.

One of the benefits in using the inline style approach is that you will have a simple component-focused styling technique. By using an object for styling, you can extend your style by spreading the object. Then you can add more style properties to it if you want.

But in a big and complex project where you have a hundreds of React components to manage, this might not be the best choice for you.

You can’t specify pseudo-classes using inline styles. That means :hover, :focus, :active, or :visited can't be used with React's inline-style.

Also, you can’t specify media queries for responsive styling. Let’s consider another way to style your React app.

CSS Stylesheets

When you build a React application using create-react-app, you will automatically use webpack to handle asset importing and processing.

The great thing about webpack is that, since it handles your assets, you can also use the JavaScript import syntax to import a .css file to your JavaScript file. You can then use the CSS class name in JSX elements that you want to style, like this:

.paragraph-text {
  font-size: 16px;
  color: 'blue';
}

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

export default function App() {
  return (
    <>
      <p className="paragraph-text">
        The weather is sunny with a small chance of rain today.
      </p>
    </>
  );
}

This way, the CSS will be separated from your JavaScript files, and you can just write CSS syntax just as usual.

You can even include a CSS framework such as Bootstrap in your React app using this approach. All you need to is import the CSS file into your root component.

This method will enable you to use all of the CSS features, including pseudo-classes and media queries. But the drawback of using a stylesheet is that your style won’t be localized to your component.

All CSS selectors have the same global scope. This means one selector can have unwanted side effects, and break other visual elements of your app.

Just like inline styles, using stylesheets still leaves you with the problem of maintaining and updating CSS in a big project.

CSS Modules

A CSS module is a regular CSS file with all of its class and animation names scoped locally by default.

Each React component will have its own CSS file, and you need to import the required CSS files into your component.

In order to let React know you’re using CSS modules, name your CSS file using the [name].module.css convention.

Here is an example:

.BlueParagraph {
  color: blue;
  text-align: left;
}
.GreenParagraph {
  color: green;
  text-align: right;
}

import React from "react";
import styles from "./App.module.css";
export default function App() {
  return (
    <>
      <p className={styles.BlueParagraph}>
        The weather is sunny with a small chance of rain today.
      </p>
      <p className={styles.GreenParagraph}>
        When you go to work, don't forget to bring your umbrella with you!
      </p>
    </>
  );
}

When you build your app, webpack will automatically look for CSS files that have the .module.css name. Webpack will take those class names and map them to a new, generated localized name.

Here is the sandbox for the above example. If you inspect the blue paragraph, you’ll see that the element class is transformed into _src_App_module__BlueParagraph.

CSS Modules ensures that your CSS syntax is scoped locally.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you’ve written. This way, you’ll be able to reuse CSS code that you’ve written previously, like this:

.MediumParagraph {
  font-size: 20px;
}
.BlueParagraph {
  composes: MediumParagraph;
  color: blue;
  text-align: left;
}
.GreenParagraph {
  composes: MediumParagraph;
  color: green;
  text-align: right;
}

Finally, in order to write normal style with a global scope, you can use the :global selector in front of your class name:

:global .HeaderParagraph {
  font-size: 30px;
  text-transform: uppercase;
}

You can then reference the global scoped style like a normal class in your JS file:

<p className="HeaderParagraph">Weather Forecast</p>

Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Let me show you an example:

import React from "react";
import styled from "styled-components";

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export default function App() {
  return <Title>Hello World!</Title>;
}

When you write your style, you’re actually creating a React component with your style attached to it. The funny looking syntax of styled.h1 followed by backtick is made possible by utilizing JavaScript’s tagged template literals.

Styled Components were created to tackle the following problems:

Automatic critical CSS : Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs : Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
Easier deletion of CSS : It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
Simple dynamic styling : Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
Painless maintenance : You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing : Write your CSS to the current standard and let styled-components handle the rest. You get all of these benefits while still writing the same CSS you know and love – just bound to individual components.

If you’d like to learn more about styled components, you can visit the documentation and see more examples.

Conclusion

Many developers still debate the best way to style a React application. There are both benefits and drawbacks in writing CSS in a non-traditional way.

For a long time, separating your CSS file and HTML file was regarded as the best practice, even though it caused a lot of problems.

But today, you have the choice of writing component-focused CSS. This way, your styling will take advantage of React’s modularity and reusability. You are now able to write more enduring and scalable CSS.

Thanks for reading. You can follow me on Twitter to get notified when I post new programming related posts.

Building Easier React Forms With Formik

Nathan Sebhastian — Mon, 08 Jul 2019 15:11:16 +0000

Building forms with React involves setting up state as the container for user data and props as the means to control how state is updated using user input. Validation can be done in between user inputs, and an arbitrary submit function is executed on form submit.

Here is an example of a basic React form written without libraries and with minimal Bootstrap styling:

In the example below, we first initialize required state values in the constructor method. Since we have two required inputs — email and password — we initialize state for input values, input validity, and input errors:

constructor(props) {
  super(props);
  this.state = {
    formValues: {
      email: "",
      password: ""
    },
    formErrors: {
      email: "",
      password: ""
    },
    formValidity: {
      email: false,
      password: false
    },
    isSubmitting: false
  };
}

Next, we create the render method of the form with input values derived from state:

render() {
  const { formValues, formErrors, isSubmitting } = this.state;
  return (
    <div className="container">
      <div className="row mb-5">
        <div className="col-lg-12 text-center">
          <h1 className="mt-5">Login Form</h1>
        </div>
      </div>
      <div className="row">
        <div className="col-lg-12">
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label>Email address</label>
              <input
                type="email"
                name="email"
                className={`form-control ${
                  formErrors.email ? "is-invalid" : ""
                }`}
                placeholder="Enter email"
                onChange={this.handleChange}
                value={formValues.email}
              />
              <div className="invalid-feedback">{formErrors.email}</div>
            </div>
            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                name="password"
                className={`form-control ${
                  formErrors.password ? "is-invalid" : ""
                }`}
                placeholder="Password"
                onChange={this.handleChange}
                value={formValues.password}
              />
              <div className="invalid-feedback">{formErrors.password}</div>
            </div>
            <button
              type="submit"
              className="btn btn-primary btn-block"
              disabled={isSubmitting}
            >
              {isSubmitting ? "Please wait..." : "Submit"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

Now we need to write the handleChange method to update the state with user inputs:

handleChange = ({ target }) => {
  const { formValues } = this.state;
  formValues[target.name] = target.value;
  this.setState({ formValues });
  this.handleValidation(target);
};

Anytime the state values are updated, we’ll run a validation method against user inputs. This is our handleValidation method:

handleValidation = target => {
  const { name, value } = target;
  const fieldValidationErrors = this.state.formErrors;
  const validity = this.state.formValidity;
  const isEmail = name === "email";
  const isPassword = name === "password";
  const emailTest = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
  validity[name] = value.length > 0;
  fieldValidationErrors[name] = validity[name]
    ? ""
    : `${name} is required and cannot be empty`;
  if (validity[name]) {
    if (isEmail) {
      validity[name] = emailTest.test(value);
      fieldValidationErrors[name] = validity[name]
        ? ""
        : `${name} should be a valid email address`;
    }
    if (isPassword) {
      validity[name] = value.length >= 3;
      fieldValidationErrors[name] = validity[name]
        ? ""
        : `${name} should be 3 characters minimum`;
    }
  }
  this.setState({
    formErrors: fieldValidationErrors,
    formValidity: validity
  });
};

The last part of this basic form is a handleSubmit method for the submission process. We need to check on formValidity values, and if there are any false values, run the validation method again without submitting the form.

handleSubmit = event => {
  event.preventDefault();
  this.setState({ isSubmitting: true });
  const { formValues, formValidity } = this.state;
  if (Object.values(formValidity).every(Boolean)) {
    alert("Form is validated! Submitting the form...");
    this.setState({ isSubmitting: false });
  } else {
    for (let key in formValues) {
      let target = {
        name: key,
        value: formValues[key]
      };
      this.handleValidation(target);
    }
    this.setState({ isSubmitting: false });
  }
};

Now the form is ready for use. React only provides the “view” layer for your application, and that means it provides only the basic necessities in making form components. component, state, and props are like puzzle blocks that you have to piece together to build a working form.

As you can see, it’s quite a lot of code for a form with only two text boxes. Imagine how many state values you need to keep track of in a form with 10 inputs or more. Yikes!

Yes, making forms with React is no fun; it’s very verbose and rigid. Building the form and creating validation method are boring tasks. In each form, you’d need to do the following, at a minimum:

Set up state for form values, form errors, and form validity
Handling user inputs and updating state
Creating validation functions
Handling submission

Building forms the natural “React” way requires you to write every part of the process from setting up states to form submission. I have done countless React forms, and I always find this part of building forms very boring and time-consuming. Fortunately, I’m not the only one feeling that way.

Enter Formik

Jared Palmer authored the Formik library out of frustration when building React forms. He needed a way to standardize the input components and the flow of form submission. Formik helps you to write the three most annoying parts of building a form:

Getting values in and out of form state
Validation and error messages
Handling form submission

Here is the same form again, but this time using Formik:

This new form only uses four extra components from Formik library: <Formik />, <Form />, <Field />, and <ErrorMessage />. In order to unlock Formik’s power, you can wrap your form inside the <Formik /> component:

<Formik>
  <Form>
    {/* the rest of the code here */}
  </Form>
</Formik>

Let’s see how Formik makes building forms easier compared to React’s natural way.

Getting values in and out of form state

Formik will set up state internally for storing user inputs through its initialValues prop, so you don’t need to initialize state from constructor anymore.

In order to get values in and out of Formik internal state, you can use the <Field /> component to replace the regular HTML <input /> component. This component will do the magic of keeping Formik state and input value in sync, so you don’t have to pass value and onChange props into the <Field /> component:

<Formik
  initialValues={{ email: "", password: "" }}
  onSubmit={({ setSubmitting }) => {
    alert("Form is validated! Submitting the form...");
    setSubmitting(false);
  }}
>
  {() => (
    <Form>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <Field
          type="email"
          name="email"
          className="form-control"
        />
      </div>
      <div className="form-group">
        <label htmlFor="password">Password</label>
        <Field
          type="password"
          name="password"
          className="form-control"
        />
      </div>
    </Form>
  )}
</Formik>

With Formik, there’s no need to initialize state in constructor and create your own handleChange method anymore. It’s all taken care of.

Validation and error messages

Validation in Formik is executed automatically during specific events. All common events like after user input, on focus change, and on submit are covered, and you don’t have to worry about them. All you need to do is pass a function into Formik’s validate prop.

Compare this code between Formik validation and vanilla React validation:

// Formik validation code. Take values from Formik
validate={values => {
  let errors = {};
  if (values.email === "") {
    errors.email = "Email is required";
  } else if (!emailTest.test(values.email)) {
    errors.email = "Invalid email address format";
  }
  if (values.password === "") {
    errors.password = "Password is required";
  } else if (values.password.length < 3) {
    errors.password = "Password must be 3 characters at minimum";
  }
  return errors;
}}

// Vanilla React validation code. Take values given by handleChange
handleValidation = target => {
  const { name, value } = target;
  const fieldValidationErrors = this.state.formErrors;
  const validity = this.state.formValidity;
  const isEmail = name === "email";
  const isPassword = name === "password";
  const emailTest = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
  validity[name] = value.length > 0;
  fieldValidationErrors[name] = validity[name]
    ? ""
    : `${name} is required and cannot be empty`;
  if (validity[name]) {
    if (isEmail) {
      validity[name] = emailTest.test(value);
      fieldValidationErrors[name] = validity[name]
        ? ""
        : `${name} should be a valid email address`;
    }
    if (isPassword) {
      validity[name] = value.length >= 3;
      fieldValidationErrors[name] = validity[name]
        ? ""
        : `${name} should be 3 characters minimum`;
    }
  }
  this.setState({
    formErrors: fieldValidationErrors,
    formValidity: validity
  });
};

With validation in place, now you need to output error messages. Formik’s <ErrorMessage /> component will automatically display error message for the <Field /> component with the given name. You can adjust what HTML tag will be displayed through the component prop. Since this example form is using Bootstrap’s style, you will have to add a className prop as well:

// Formik error message output
<Field
  type="email"
  name="email"
  className={`form-control ${
    touched.email && errors.email ? "is-invalid" : ""
  }`}
/>
<ErrorMessage
  component="div"
  name="email"
  className="invalid-feedback"
/>

// Vanilla React error message output
<input
  type="email"
  name="email"
  className={`form-control ${
    formErrors.email ? "is-invalid" : ""
  }`}
  placeholder="Enter email"
  onChange={this.handleChange}
  value={formValues.email}
/>
<div className="invalid-feedback">{formErrors.email}</div>

The code for error message is actually about the same, but there’s a lot less code in Formik’s validation than in vanilla React. Way to go, Formik!

Even easier validation with Yup

Although you can already feel the benefit of using Formik in validation process, you can make it even easier by using an object schema validator.

An object schema validator is simply a library that allows you to define the blueprint of a JavaScript object and ensure that the object values match that blueprint through the validation process. This is particularly useful in validating form data since it’s actually an object kept inside Formik’s values prop.

Now one such library is Yup, and Formik’s author loves Yup so much that he included a special prop that connects Yup with Formik called validationSchema. This prop will automatically transform Yup’s validation errors into a pretty object whose keys match values and touched.

Here is an example of Formik using Yup as its validation schema. Notice how the validate prop is removed from the <Formik /> component:

With Yup’s object schema validator on place, you don’t have to manually write if conditions anymore. You can learn more about Yup and what kind of validation it can do by visiting its GitHub repo.

Form submission process

Formik’s <Form /> component will automatically run your validation method and cancel the submission process if there are any errors. While you have to include the onSubmit prop to a regular <form /> element, Formik’s <Form /> wrapper will run the onSubmit prop function you passed into the <Formik /> component:

// Formik's submit code. Won't be executed if there are any errors.
onSubmit={({ setSubmitting }) => {
  alert("Form is validated!");
  setSubmitting(false);
}}

// Vanilla React submit code. Check on validity state then run validation manually.
handleSubmit = event => {
  event.preventDefault();
  this.setState({ isSubmitting: true });
  const { formValues, formValidity } = this.state;
  if (Object.values(formValidity).every(Boolean)) {
    alert("Form is validated!");
    this.setState({ isSubmitting: false });
  } else {
    for (let key in formValues) {
      let target = {
        name: key,
        value: formValues[key]
      };
      this.handleValidation(target);
    }
    this.setState({ isSubmitting: false });
  }
};

Formik requires only four lines of code for submission at minimum, and you don’t need to keep track of the validity of form inputs. That’s pretty neat!

But what about redux-form?

Sure, redux-form works great, but then you’d need to use Redux in the first place. What if you’re using MobX? What if a new, better library comes up in the future and you want to replace Redux with that? On top of all that, does your React form actually affects the flow of your entire application in some way?

Think about it: Does the value of the username textbox somehow matter to your application globally? If not, then it’s really not necessary to track its value using Redux. Even the prophet Dan Abramov said the same thing.

Another problem with redux-form is that you are storing form input values into Redux store. This means your application will call on Redux’s reducer on every keystroke to update the value of just one textbox. Not a good idea.

I love writing forms the “Formik” way, but if you prefer redux-form, then that’s fine, too. 😉

Conclusion

Building forms is one of those things that React isn’t good at. Luckily, React has a community of developers that help each other and make the process of writing code easier.

Formik is definitely one of those open source libraries that’s a must-have if you are writing many forms in your React application. It really speeds up your development process and reduces boilerplate code by abstracting away parts of your form through components like <Field /> and <Form />.

While a vanilla React form requires you to specify your own state values and methods, you can simply pass props to the <Formik /> component to do the same things: handle user inputs, validate inputs, and form submission.

If you’d like to learn more about Formik, head over to the documentation or watch the presentation below by its creator.

React Distilled 2.0 is released

If you'd like to learn more about React and how you can use it to build a complete web application from scratch, I'm offering a 28% off my book React Distilled to celebrate its release (from $49 to $34).

It includes new chapters on React Context API and React Hooks, and it shows how you can create React app using nothing but React and Firestore.

Go grab it now so you can be a React Genius today!

Originally published at https://blog.logrocket.com on June 28, 2019.

Building a chat app with React Hooks, a pragmatic example

Nathan Sebhastian — Thu, 16 May 2019 12:23:49 +0000

Hooks are a new addition in React 16.8 which enable us to use state and other React features without writing a class.

“I can build a fully functional app without classes?” I hear you ask. Yes, you can! And in this tutorial, I will show you how.

While some tutorials will focus on hooks in isolation with “made up” examples, in this tutorial, I want to show you how to build a real-world app.

In the end, you’ll have something like this:

As you follow along, you’ll learn how to use the newly-introduced useState and useEffect hooks, which allow us to manage state and lifecycle functions more cleanly.

Of course, if you’d prefer to jump straight into the code, you can see the complete repository on GitHub.

CometChat at a glance

Rather than build our own chat back-end, we will be utilizing CometChat’s sandbox account.

In a nutshell, CometChat is an API which enables us to build communication features like real-time chat with ease. In our case, we will utilize the npm module to connect and begin transmitting messages in real-time.

With all of that said, before connecting to CometChat, we must first create a CometChat app (please signup for a forever free CometChat account to begin creating the app).

Now, head to the dashboard and enter an app name – I called mine “react-chat-hooks”. Click + to create your app:

Creating an application with CometChat

Once created, drill into your newly-created app and click API Keys. From here, copy your automatically-generated authOnly key :

Get the CometChat API

We’ll need this in the next step.

Setting up React

With our CometChat app in place, open your command-line and initialise React with npx and create-react-app:

npx create-react-app cometchat-react-hooks

Once create-react-app has finished spinning, open the newly-created folder and install the following modules:

cd cometchat-react-hooks
npm install @cometchat-pro/chat bootstrap react-md-spinner react-notifications

We’ll need these dependencies to complete our app.

While we’re here, we should also remove all files inside the src directory:

rm src

Sometimes this boilerplate is useful, but today I am keen for us to start from scratch.

And so, in the spirit of starting from scratch, create a new file named src/config.js file and fill in your CometChat credentials:

// src/config.js

const config = {
  appID: '{Your CometChat Pro App ID here}',
  apiKey: '{Your CometChat Pro Api Key here}',
};

export default config;

Through this file, we can conveniently access our credentials globally.

Next, write a new src/index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import {CometChat} from '@cometchat-pro/chat';
import App from './components/App';
import config from './config';

CometChat.init(config.appID);

ReactDOM.render(, document.getElementById('root'));

This is the entry-point for our React app. When loaded, we first initialize CometChat before rendering our App component, which we will define in a moment.

Setting up our components

Our application will have three noteworthy components namely, App, Login, and Chat.

To house our components, create a nifty folder named components and within it, the components themselves:

mkdir components && cd components
touch App.js Login.js Chat.js

App.js:

import React from 'react';

const App = () => {
  return (
    <div> This is the App component</div>
  );
};
export default App;

Login.js:

import React from 'react';

const Login = () => {
  return (
    <div> This is the Login component</div>
  );
};
export default App;

Chat.js

import React from 'react';

const Chat = () => {
  return (
    <div> This is the Chat component</div>
  );
};
export default App;

If you want, you can run the app with npm start and observe the text “This is the App component” text.

Of course, this is merely a placeholder. Building the App component is the subject of our next section.

Creating the App Component

Alright, time to get serious about hooks.

As we flesh out the App component, we’ll use functional components and hooks where we might have traditionally relied on classes.

To start, replace App.js with:

import React, {useState} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'react-notifications/lib/notifications.css';
import './App.css';
import {NotificationContainer} from 'react-notifications';
import Login from './Login';
import Chat from './Chat';

const App = () => {
  const [user, setUser] = useState(null);
  const renderApp = () => {
    // Render Chat component when user state is not null
    if (user) {
      return <Chat user={user} />;
    } else {
      return <Login setUser={setUser} />;
    }
  };
  return (
    <div className='container'>

      {renderApp()}
    </div>
  );
};
export default App;

I recommend you go through the code for a second to see how much you understand. I expect it might look familiar if you’re comortable with React, but what about the useState hook?

As you can see, we first import the newly-introduced useState hook, which is a function:

import React, {useState} from 'react';

useState can be used to create a state property.

To give you an idea, before the useState hook, you might have written something like:

this.state = { user: null };

setState({ user: { name: "Joe" }})

With hooks, the (more or less) equivalent code looks like:

const [user, setUser] = useState(null);

setUser({ user: { name: "Joe" }})

An important difference here is that when working with this.state and setState, you work with the entire state object. With the useState hook, you work with an individual state property. This often leads to cleaner code.

useState takes one argument which is the initial state and the promptly returns two values namely, the same initial state (in this case, user) and a function which can be used to update the state (in this case, setUser). Here, we pass the initial state null but any data type is fine.

If that all sounds easy enough, it may as well be!

There’s no need to over-think useState because it is just a different interface for updating state – a fundamental concept I am sure you’re familiar with.

With our initial state in place, from renderApp we can conditionally render Chat or Login depending on whether the user has logged in (in other words, if user has been set):

const renderApp = () => {
  // Render Chat component when user state is not null
  if (user) {
    return ;
  } else {
    return ;
  }
};

renderApp is called from the render function where we also render our NotifcationContainer.

If you’re sharp, you might have noticed we imported a CSS file named App.css but haven’t actually created it yet. Let’s do that next.

Create a new file named App.css:

.container {
  margin-top: 5%;
  margin-bottom: 5%;
}

.login-form {
  padding: 5%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}

.login-form h3 {
  text-align: center;
  color: #333;
}

.login-container form {
  padding: 10%;
}

.message {
  overflow: hidden;
}

.balon1 {
  float: right;
  background: #35cce6;
  border-radius: 10px;
}

.balon2 {
  float: left;
  background: #f4f7f9;
  border-radius: 10px;
}

.container {
  margin-top: 5%;
  margin-bottom: 5%;
}

.login-form {
  padding: 5%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}

.login-form h3 {
  text-align: center;
  color: #333;
}

.login-container form {
  padding: 10%;
}

.message {
  overflow: hidden;
}

.balon1 {
  float: right;
  background: #35cce6;
  border-radius: 10px;
}

.balon2 {
  float: left;
  background: #f4f7f9;
  border-radius: 10px;
}

Creating the Login Component

As a reminder, our login component will look like this:

To follow along, replace Login.js with:

import React, {useState} from 'react';
import {NotificationManager} from 'react-notifications';
import {CometChat} from '@cometchat-pro/chat';
import config from '../config';

const Login = props => {
  const [uidValue, setUidValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <div className='row'>
      <div className='col-md-6 login-form mx-auto'>
        <h3>Login to Awesome Chat</h3>
        <form className='mt-5' onSubmit={handleSubmit}>
          <div className='form-group'>
            <input
              type='text'
              name='username'
              className='form-control'
              placeholder='Your Username'
              value={uidValue}
              onChange={event => setUidValue(event.target.value)}
            />
          </div>
          <div className='form-group'>
            <input
              type='submit'
              className='btn btn-primary btn-block'
              value={`${isSubmitting ? 'Loading...' : 'Login'}`}
              disabled={isSubmitting}
            />
          </div>
        </form>
      </div>
    </div>
  );
};

export default Login;

Here, we utilize useState to create two state properties: uidValue and isSubmitting.

Prior to hooks, we might have written something like:

this.setState({
  uidValue: '',
  isSubmitting: false
})

However, that would have required a class. Here, we use a functional component – neat!

In the same function (before the return statement), create a handleSubmit function to be called when the form is submitted:

const handleSubmit = event => {
  event.preventDefault();
  setIsSubmitting(true);
  CometChat.login(uidValue, config.apiKey).then(
    User => {
      NotificationManager.success('You are now logged in', 'Login Success');
      console.log('Login Successful:', {User});
      props.setUser(User);
    },
    error => {
      NotificationManager.error('Please try again', 'Login Failed');
      console.log('Login failed with exception:', {error});
      setIsSubmitting(false);
    }
  );
};

Here, we utilise the setIsSubmitting function returned by useState. Once set, the form will be disabled.

We then call CometChat.login to authenticate the user utilizing our key. In a production app, CometChat recommends that you perform your own authentication logic.

If the login is successful, we call props.setUser.

Ultimately, props.setUser updates the value of user in our App component and – as is to be expected when you update state in React – the app is re-rendered. This time, user will be truthy and so, the App.renderApp function we inspected earlier will render the Chat component.

Creating the Chat Component

Our Chat component has a lot of responsibility. In fact, it is the most important component in our app!

From the Chat component, the user needs to:

Choose a friend with which to chat
See their recent message history
Send new messages
Receive responses in real-time

As you might imagine, this will require us to handle a lot of state. I, for one, cannot think of a better place to practice our new-found knowledge of the useState hook! But as mentioned in my introduction, useState is just one hook we will be looking at today. In this section, we will also explore the useEffect hook.

I can tell you now, useEffect replaces the componentDidMount, componentDidUpdateand componentWillUnmount lifecycle functions you have likely come to recognise.

With that in mind, useEffect is appropriate to set up listeners, fetch initial data and likewise, remove said listeners before unmounting the component.

useEffect is a little more nuanced than useState but when completed with an example, I am confident you will understand it.

useEffect takes two arguments namely, a function to execute (for example, a function to fetch initial data) and an optional array of state properties to observe. If any property referenced in this array is updated, the function argument is executed again. If an empty array is passed, you can be sure function argument will be run just once in the entire component lifetime.

Let’s start with mapping out the necessary state. This component will have 6 state properties:

friends to save the list of users available for chat
selectedFriend — to save the currently selected friend for chatting
chat — to save the array of chat messages being sent and received between friends
chatIsLoading — to indicate when the app is fetching previous chats from CometChat server
friendIsLoading — to indicate when the app is fetching all friends available for chat
message — for our message input controlled component

Perhaps the best way to master useEffect is to see it in action. Remember to import useEffect and update Chat.js :

import React, {useState, useEffect} from 'react';
import MDSpinner from 'react-md-spinner';
import {CometChat} from '@cometchat-pro/chat';

const MESSAGE_LISTENER_KEY = 'listener-key';
const limit = 30;

const Chat = ({user}) => {
  const [friends, setFriends] = useState([]);
  const [selectedFriend, setSelectedFriend] = useState(null);
  const [chat, setChat] = useState([]);
  const [chatIsLoading, setChatIsLoading] = useState(false);
  const [friendisLoading, setFriendisLoading] = useState(true);
  const [message, setMessage] = useState('');  
};

export default Chat;

When our Chat component has mounted, we must first fetch users available to chat. To do this, we can utilise useEffect.

Within the Chat stateless component, call useEffect like this:

useEffect(() => {
  // this useEffect will fetch all users available for chat
  // only run on mount

  let usersRequest = new CometChat.UsersRequestBuilder()
    .setLimit(limit)
    .build();
    usersRequest.fetchNext().then(
      userList => {
        console.log('User list received:', userList);
        setFriends(userList);
        setFriendisLoading(false);
      },
      error => {
        console.log('User list fetching failed with error:', error);
      }
    );

    return () => {
      CometChat.removeMessageListener(MESSAGE_LISTENER_KEY);
      CometChat.logout();
    };

}, []);

As mentioned, when called with an empty array, useEffect will be called only once when the component is initially mounted.

What I didn’t mention yet is that you can return a function from useEffect to be called automatically by React when the component is unmounted. In other words, this is your componentWillUnmount function.

In our componentWillUnmount -equivalent function, we call removeMessageListener and logout.

Next, let’s write the return statement of Chat component:

return (
  <div className='container-fluid'>
    <div className='row'>
      <div className='col-md-2' />
      <div className='col-md-8 h-100pr border rounded'>
        <div className='row'>
          <div className='col-lg-4 col-xs-12 bg-light' style={{height: 658}}>
            <div className='row p-3'>
              <h2>Friend List</h2>
            </div>
            <div
              className='row ml-0 mr-0 h-75 bg-white border rounded'
              style={{height: '100%', overflow: 'auto'}}>
              <FriendList
                friends={friends}
                friendisLoading={friendisLoading}
                selectedFriend={selectedFriend}
                selectFriend={selectFriend}
              />
            </div>
          </div>
          <div className='col-lg-8 col-xs-12 bg-light' style={{height: 658}}>
            <div className='row p-3 bg-white'>
              <h2>Who you gonna chat with?</h2>
            </div>
            <div
              className='row pt-5 bg-white'
              style={{height: 530, overflow: 'auto'}}>
              <ChatBox
                chat={chat}
                chatIsLoading={chatIsLoading}
                user={user}
              />
            </div>
            <div className='row bg-light' style={{bottom: 0, width: '100%'}}>
              <form className='row m-0 p-0 w-100' onSubmit={handleSubmit}>
                <div className='col-9 m-0 p-1'>
                  <input
                    id='text'
                    className='mw-100 border rounded form-control'
                    type='text'
                    onChange={event => {
                      setMessage(event.target.value);
                    }}
                    value={message}
                    placeholder='Type a message...'
                  />
                </div>
                <div className='col-3 m-0 p-1'>
                  <button
                    className='btn btn-outline-secondary rounded border w-100'
                    title='Send'
                    style={{paddingRight: 16}}>
                    Send
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

If this looks like a lot of code, well, it is! But all we’re doing here is rendering our friends list (FriendsList) and chat box (ChatBox), styled with Bootstrap.

We haven’t actually defined our FriendsList or ChatBox components so let’s do that now.

In the same file, create components called ChatBox and FriendsList:

const ChatBox = props => {
  const {chat, chatIsLoading, user} = props;
  if (chatIsLoading) {
    return (
      <div className='col-xl-12 my-auto text-center'>
        <MDSpinner size='72' />
      </div>
    );
  } else {
    return (
      <div className='col-xl-12'>
        {chat.map(chat => (
          <div key={chat.id} className='message'>
            <div
              className={`${
                chat.receiver !== user.uid ? 'balon1' : 'balon2'
              } p-3 m-1`}>
              {chat.text}
            </div>
          </div>
        ))}
        <div id='ccChatBoxEnd' />
      </div>
    );
  }
};

const FriendList = props => {
  const {friends, friendisLoading, selectedFriend} = props;
  if (friendisLoading) {
    return (
      <div className='col-xl-12 my-auto text-center'>
        <MDSpinner size='72' />
      </div>
    );
  } else {
    return (
      <ul className='list-group list-group-flush w-100'>
        {friends.map(friend => (
          <li
            key={friend.uid}
            c;assName={`list-group-item ${
              friend.uid === selectedFriend ? 'active' : ''
            }`}
            onClick={() => props.selectFriend(friend.uid)}>
            {friend.name}
          </li>
        ))}
      </ul>
    );
  }
};

With our FriendsList and ChatBox components in place, our UI is more or less complete but we still need a way to send and receive messages in real-time.

Creating selectFriend function

In the above FriendsList component, we referenced a function called selectFriend to be called when the user clicks on one of the names in the list, but we haven’t defined it yet.

We can write this function in the Chat component (before the return) and pass it down FriendList as a prop:

const selectFriend = uid => {
  setSelectedFriend(uid);
  setChat([]);
  setChatIsLoading(true);
};

When a friend is selected, we update our state:

selectedFriend is updated with the uid of the new friend.
chat is set to empty again, so messages from previous friend aren’t mixed up with the new one.
chatIsLoading is set to true, so that a spinner will replace the empty chat box

Running useEffect on selectedFriend state update

When a new conversion is selected, we need to initialise the conversion. This means fetching old messages and subscribing to new ones in real-time.

To do this, we utilise use useEffect. In the Chat component (and, like usual, before the return):

useEffect(() => {
  // will run when selectedFriend variable value is updated
  // fetch previous messages, remove listener if any
  // create new listener for incoming message

  if (selectedFriend) {
    let messagesRequest = new CometChat.MessagesRequestBuilder()
      .setUID(selectedFriend)
      .setLimit(limit)
      .build();

    messagesRequest.fetchPrevious().then(
      messages => {
        setChat(messages);
        setChatIsLoading(false);
        scrollToBottom();
      },
      error => {
        console.log('Message fetching failed with error:', error);
      }
    );

    CometChat.removeMessageListener(MESSAGE_LISTENER_KEY);

    CometChat.addMessageListener(
      MESSAGE_LISTENER_KEY,
      new CometChat.MessageListener({
        onTextMessageReceived: message => {
          console.log('Incoming Message Log', {message});
          if (selectedFriend === message.sender.uid) {
            setChat(prevState => [...prevState, message]);
          }
        },
      })
    );
  }
}, [selectedFriend]);

By passing the [selectedFriend] array into useEffectsecond argument, we ensure that the function is executed each time selectedFriend is updated. This is very elegant.

Since we have a listener that listens for incoming message and update the chat state when the new message is from the currently selectedFriend, we need to add a new message listener that takes the new value from selectedFriend in its if statement. We will also call removeMessageListener to remove any unused listener and avoid memory leaks.

Sending new message handler

To send new messages, we can hook our form up to the CometChat.sendMessage function. In Chatbox function, create a function called handleSubmit:

const handleSubmit = event => {
  event.preventDefault();
  let textMessage = new CometChat.TextMessage(
    selectedFriend,
    message,
    CometChat.MESSAGE_TYPE.TEXT,
    CometChat.RECEIVER_TYPE.USER
  );
  CometChat.sendMessage(textMessage).then(
    message => {
      console.log('Message sent successfully:', message);
      setChat([...chat, message]);
    },
    error => {
      console.log('Message sending failed with error:', error);
    }
  );
  setMessage('');
};

This is already referenced from the JSX you copied earlier.

When the new message is sent successfully, we call setChat and update the value of chat state with the latest message.

Creating scrollToBottom function

Our Chat component is looking sweet except for one thing: When there are a bunch of messages in the Chatbox, the user has to manually scroll to the bottom to see latest messages.

To automatically scroll the user to the bottom, we can define a nifty function to scroll to the bottom of the messages programatically:

const scrollToBottom = () => {
  let node = document.getElementById('ccChatBoxEnd');
  node.scrollIntoView();
};

Then, run this function when the previous messages are set into state:

messagesRequest.fetchPrevious().then(
  messages => {
    setChat(messages);
    setChatIsLoading(false);
    scrollToBottom();
  },
  error => {
    console.log('Message fetching failed with error:', error);
  }
);

Conclusion

If you made it this far, you have successfully created a chat application powered by CometChat and Hooks. High five 👋🏻!

With this experience under your belt, I am sure you can begin to appreciate the “hype” around Hooks.

Hooks enable us to build the same powerful React components in a more elegant way, using functional components. In summary, Hooks allow us to write React components that are easier to understand and maintain.

And in all truth, we have only touched the surface. With some guidance from the official documentation, you can even create your own hooks!

P.S: If you're struggling to learn React, You might find React Distilled a great aid. Check it out here!

Originally published at https://www.cometchat.com

React Router Introduction

Nathan Sebhastian — Thu, 07 Mar 2019 12:32:42 +0000

React Router is a third party library created to solve the problem of routing in React app. It wraps around the browser history API and does the job of keeping your React application UI in sync with the browser's URL.

There are two packages of React Router: react-router-dom for React and react-router-native for React Native. Since you're learning about making web application, you only have to install react-router-dom:

npm install react-router-dom

There are 3 basic React Router components commonly used in minimal navigation, they are BrowserRouter, Route and Link. Let's explore about BrowserRouter and Route first:

import { BrowserRouter as Router, Route } from 'react-router-dom'

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
      <>
        <NavigationComponent />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </>
      </Router>
    )
  }
}

The BrowserRouter, which is imported as Router, acts as the parent component that wraps all of your React component. It will intercept Browser request URL and match its path with the corresponding Route component. So if the browser URL is localhost:3000/about, the Router will take that information and than look for a Route component that has the path attribute of /about.

You will determine what will be rendered by adding the component attribute to Route.

In the sample above, an exact attribute is added to the default Route path (/), because without it, any route with / will also render the Home component, causing inconsistencies in the navigation.

The third component Link is used for navigation, replacing the regular <a> tag of HTML. This is because a regular HTML anchor tag will do a full refresh of the browser on click, which is not suited for React application. A React app only needs to update the URL, browser history and component rendered without any browser refresh:

import { Link } from "react-router-dom";

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}

You can try a working demo here.

Note how you can use the previous and next button of the browser's navigation bar, and the url is updated with subsequent navigation, without the browser loading. This is the power of React Router in action.

Making dynamic routing

You've seen how to create simple navigation using React Router, yet most web application require more advanced function than that. You probably need a dynamic routing, where you can put something like /user/:id, in which React needs to render something based on the value of :id.

Old links can also be dead and need to be redirected to new link.

Also, if the browser URL doesn't match any existing route, you need to display a 404 page.

That's why you need to learn about 2 more components, Switch and Redirect. Switch is a unique component that will render the first matching Route, then stop. To illustrate this example:

import { Route } from 'react-router'

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

In the above code, a browser URL of /about will match all three routes, causing it all to be rendered and stacked below each other. Now by using the Switch component, React Router will render the About component route and then stop.

import {Switch, Route} from 'react-router';

<Switch>
  <Route path='/about' component={About} />
  <Route path='/:user' component={User} />
  <Route component={NoMatch} />
</Switch>;

The order of the Route component inside Switch is important, so make sure you declare all static route first before declaring routes with url parameter and 404 route.

Now for Redirect, the component is pretty simple. You only need to add from attribute that states the old URL and to attribute specifying the new URL to link to.

import {Redirect} from 'react-router';

<Redirect from='/old-match' to='/will-match' />;

Nested route

In order to create nested route, you need to declare another Route inside the parent component. For example, let's say you have /users route that render to Users component.

Let's do a little exercise. First, create an array of objects that store user data, the following will do:

const users = [
  {
    id: '1',
    name: 'Nathan',
    role: 'Web Developer',
  },
  {
    id: '2',
    name: 'Johnson',
    role: 'React Developer',
  },
  {
    id: '3',
    name: 'Alex',
    role: 'Ruby Developer',
  },
];

Now create a simple routing in the application:

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
        <>
          <NavigationComponent />
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/users' component={Users} />
        </>
      </Router>
    );
  }
}

The NavigationComponent is where you write the Link component for navigating the application:

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About page</Link>
          </li>
          <li>
            <Link to='/users'>Users page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}

It's time to create components to render on specific routes. Home and About component will render a single div, while Users will have another Link and Route component.

Inside the Users component, you will render a list of users, with a nested route to individual user by its ID, like /users/:id:

const Home = () => {
  return <div>This is the home page</div>;
};

const About = () => {
  return <div>This is the about page</div>;
};

const Users = () => {
  return (
    <>
      <ul>
        {users.map(({name, id}) => (
          <li key={id}>
            <Link to={`/users/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path='/users/:id' component={User} />
      <hr />
    </>
  );
};

There's nothing new with this code. So you can write the User component now:

const User = ({match}) => {
  const user = users.find((user) => user.id === match.params.id);

  return (
    <div>
      Hello! I'm {user.name} and I'm a {user.role}
    </div>
  );
};

Now here is something new I haven't told you about. Every time a component is rendered in a specific route, the component receive route props from React Router. There are 3 route props being passed down into component: match, location, history.

You can look at the props by opening the React Developer Tools and highlight the matching component route:

(If you're opening from Codesandbox, you can open the demo in a new separate window to enable React DevTool)

Notice how you add /:id URL parameter in the Users component nested route. This id is passed down to the User component through the match.params.id object property. If you passed the URL parameter as /:userId, it will be passed down as match.params.userId.

Now that you know about route props, let's refactor Users component a bit:

const Users = ({ match }) => {
  return (
    <>
      <ul>
        {users.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path={`${match.url}/:id`} component={User} />
      <hr />
    </>
  );
}

As always, here is a working demo.

Passing props to Route component

You might think that passing props into Route component is the same as passing into regular component:

<Route path="/about" component={About} user='Jelly'/>

Unfortunately, React Router doesn't forward the props entered into Route component into the component props, so you have to use another method.

Fortunately, React Router provides a render attribute that accepts a function to be called when the URL locations matches. This props also receives the same route props as the component props:

<Route
  path="/about"
  render={props => <About {...props} admin="Bean" />}
/>

// the component
const About = props => {
  return <div>This is the about page {props.admin}</div>;
};

First, you take the given props from React Router and pass it into the component, so that the component can use match, location or history props if necessary. Then you add your own extra props into it. The example above use arbitrary admin props as example.

You can see the full code here.

Now you've learned about React Router, try to implement it for your React application!

Struggling to learn React? This book might help you out!

Is there a way to explain hooks without mentioning class component?

Nathan Sebhastian — Mon, 18 Feb 2019 17:54:56 +0000

Is there a way to explain about hooks without mentioning or comparing it to class components? I find it hard to explain about useState() without showing how it's done with this.state = {} and setState() 😐

I'd like to explain about state using hooks without ever showing how it's done with class component to React newcomers. Even in the documentation on useState() explains by comparing the equivalent class component first

Thanks everyone!

Firebase as simple database to React app

Nathan Sebhastian — Wed, 13 Feb 2019 14:11:51 +0000

Firebase is an all-in-one backend as a service provider (BaaS) that provides database, authentication, cloud storage among their many services. In this tutorial you're going to learn how to use Firebase Real Time Database service in React application.

You're going to build a simple team list application, where users can add, delete and edit team member information.

Create your database application

First, you need to create your application in Firebase console.

Then head over to the Database menu and scroll a bit down into Choose Real Time Database section.

Set the security rules to start in test mode.

(this makes your database insecure, but it's okay for the purpose of this tutorial.)

Finally, get the configuration needed to integrate Firebase into your web app.

Grab the source code from this codesandbox and fork it:

And put your credential in the config file:

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;

Setting up your React application

Start your React application with create-react-app

npx create-react-app react-firebase-basic

Then install firebase and Bootstrap (so you can skip writing your own css.)

npm i firebase bootstrap

Then you can remove everything from src/ since you don't need most of the boilerplates

Creating `config.js` file

Let's write Firebase configuration in a separate config.js file:

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;

You'll import this config into your App.js later.

Write the `index.js` file

This file will serve as React entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App';

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

Creating your application

It's time to write your App.js file. Let's initialize our Firebase App in the constructor:

import React from 'react';

import Firebase from 'firebase';
import config from './config';


class App extends React.Component {

  constructor(props){
    super(props);
    Firebase.initializeApp(config.firebase);

    this.state = {
      developers: []
    }
  }

  //...

Then you can write the logic for getting and saving data: writeUserdata will write our state into the database, while getUserData will create a listener on / path, and on value changes, we will assign snapshot value as state.

writeUserData = () => {
  Firebase.database().ref('/').set(this.state);
  console.log('DATA SAVED');
}

getUserData = () => {
  let ref = Firebase.database().ref('/');
  ref.on('value', snapshot => {
    const state = snapshot.val();
    this.setState(state);
  });
  console.log('DATA RETRIEVED');
}

Put these writeUserData and getUserData in componentDidMount and componentDidUpdate respectively.

componentDidMount() {
  this.getUserData();
}

componentDidUpdate(prevProps, prevState) {
  // check on previous state
  // only write when it's different with the new state
  if (prevState !== this.state) {
    this.writeUserData();
  }
}

All that's left is to write the render and handle submit form logic: We will map our developers array from state and put each item in a card component. Each card will have a delete and update button. On delete clicked, we will filter out the specific item, while on update clicked, we will get the item data into the form.

handleSubmit will insert data when uid value is false and update data when it is true. We're using refs to get data from form inputs.

// ...
render() {
  const { developers } = this.state;
  return(
    <div className="container">
      <div className="row">
        <div className='col-xl-12'>
          <h1>Firebase Development Team</h1>
        </div>
      </div>
      <div className='row'>
        <div className='col-xl-12'>
        { 
          developers
          .map(developer => 
            <div key={developer.uid} className="card float-left" style={{width: '18rem', marginRight: '1rem'}}>
              <div className="card-body">
                <h5 className="card-title">{ developer.name }</h5>
                <p className="card-text">{ developer.role }</p>
                <button onClick={ () => this.removeData(developer) } className="btn btn-link">Delete</button>
                <button onClick={ () => this.updateData(developer) } className="btn btn-link">Edit</button>
              </div>
            </div>
            )
        } 
        </div>
      </div>
      <div className='row'>
        <div className='col-xl-12'>
          <h1>Add new team member here</h1>
          <form onSubmit={ this.handleSubmit }>
            <div className="form-row">
              <input type='hidden' ref='uid' />
              <div className="form-group col-md-6">
                <label>Name</label>
                <input type="text" ref='name' className="form-control" placeholder="Name" />
              </div>
              <div className="form-group col-md-6">
                <label>Role</label>
                <input type="text" ref='role' className="form-control" placeholder="Role" />
              </div>
            </div>
            <button type="submit" className="btn btn-primary">Save</button>
          </form>
        </div>
      </div>
    </div>
  )
}

handleSubmit = (event) => {
  event.preventDefault();
  let name = this.refs.name.value;
  let role = this.refs.role.value;
  let uid = this.refs.uid.value;

  if (uid && name && role){
    const { developers } = this.state;
    const devIndex = developers.findIndex(data => {
      return data.uid === uid 
    });
    developers[devIndex].name = name;
    developers[devIndex].role = role;
    this.setState({ developers });
  }
  else if (name && role ) {
    const uid = new Date().getTime().toString();
    const { developers } = this.state;
    developers.push({ uid, name, role })
    this.setState({ developers });
  }

  this.refs.name.value = '';
  this.refs.role.value = '';
  this.refs.uid.value = '';
}

removeData = (developer) => {
  const { developers } = this.state;
  const newState = developers.filter(data => {
    return data.uid !== developer.uid;
  });
  this.setState({ developers: newState });
}

updateData = (developer) => {
  this.refs.uid.value = developer.uid;
  this.refs.name.value = developer.name;
  this.refs.role.value = developer.role;
}

Now your React application is ready to read and set data into your Firebase database. Here is the final demo again:

You might wonder is it safe to put Firebase Api key in the config where experienced programmers can easily get it. Actually, it’s okay to put it there because Firebase has security rules that ensures only authenticated users can access your database. I just haven’t setup the security rules in this tutorial.

I will write a more complete tutorial that covers authentication, database rules and using Firebase cloud storage for user uploaded images in my next post, so stay tuned!

I used Bootstrap too often and I wonder how can I write good CSS without it?

Nathan Sebhastian — Mon, 11 Feb 2019 04:42:45 +0000

Hi everyone! I'd like to discuss with you all about learning CSS properly w/o using frameworks.

What tutorials or roadmap do you think will help developers who used Bootstrap learn how to make their own CSS?

Some background: I'm a JS developer experienced in React and Express, but for the last few years all my work conveniently used Bootstrap to scaffold its CSS. Now I wonder how can I learn to create nicely spaced forms and responsive layout without it?

Furthermore, Bootstrap has free CSS snippet resources like Bootsnipp. Is there a similar website but for framework-less CSS?

I'm familiar with media query, margin, padding and all CSS basics, but putting them all together to make a simple responsive website is something I had forgotten.

Thanks for your help. DEV rocks!🤟

Update: thank you all for your suggestions and comments, I've also been looking for this stuff and has been able to come up with some interesting links:

Tania Rascia's post on making your own responsive website and navigation component. A bit outdated with jQuery in there, but still relevant nonetheless.

One of the things I've been wanting to do for a long time is indeed learning about Flexbox and Grid, but I never got to wrap my head around Flexbox.

This tutorial by Ohans Emmanuel seems promising, and it even has a course on educative.io.

Will try his tutorial and report back again here later.

React Hooks are live. Here is your introduction

Nathan Sebhastian — Thu, 07 Feb 2019 12:15:42 +0000

Classes can be a large barrier to learn React, says React team. They don't minify very well and they make hot reloading unreliable. With React Hooks, you don't need to convert a function component into class component. You can use state and lifecycle methods in the function component.

Okay, but what are hooks really?

They are functions that let you "hook" into React internal state and lifecycle features from function components

Great! How do I do that?

First, Update your React and React DOM dependency in your project. Hooks are freshly released on React 16.8.0 today!

npm install --save react@^16.8.0 react-dom@^16.8.0

Now let's take a look on the useState hook. Here is the demo:

`useState` hook

We need to have a simple class component with state for comparison. The easiest example I can imagine is of an input form:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Now let's rewrite it using useState hook. We'll import it from react package so we don't have to write React.useState all the time.

import React, { useState } from 'react';

Now change our NameForm into a function component

function NameForm(props) {}

useState hook takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state. You can replace the state initialization in the constructor:

this.state = { value: '' };

into this:

function NameForm(props) {
  const [value, setValue] = useState('');
}

Notice the use of square brackets when state variable is declared. This is the ES6 "array destructuring" syntax, and it means we're assigning the first value returned by useState to value and the second value to setValue.

So this means we have a state named value and we can update it by calling on setValue function. Let's use it on our render method:

function NameForm(props) {
  const [value, setValue] = useState('');

  return (
    <form>
      <label>
        Name:
        <input
          type="text"
          value={value}
          onChange={event => setValue(event.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Onchange props no longer call a handleChange method, instead we have an arrow function that will call setValue function, which update our state. Oh, and unlike this.setState in the class component, updating a state variable using hooks always replace it instead of merging it

Having multiple states?

Then call on useState as many times as you need.

function SimpleForm(props) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [age, setAge] = useState('');

  return (
    <form>
      <label>
        First Name:
        <input
          type="text"
          value={firstName}
          onChange={event => setFirstName(event.target.value)}
        />
      </label>
      <label>
        Last Name:
        <input
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />
      </label>
      <label>
        Age:
        <input
          type="number"
          value={age}
          onChange={event => setAge(event.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

And that's it with useState hook, really!

Setting initial state from props

Oh, it's so easy!

function SimpleForm(props) {
  const [firstName, setFirstName] = useState(props.firstName);
  const [lastName, setLastName] = useState(props.lastName);
  const [age, setAge] = useState(props.age);

  //...
}

ReactDOM.render(
  <SimpleForm firstName="JOHN" lastName="Edward" age={30} />,
  document.getElementById('root')
);

Can I use object in state?

Sure! Just as class state can accept object or array, useState can have them as well. But to make it work, let's add name props to your input elements. We also use spread properties to update our state.

function SimpleForm(props) {
  //create object state
  const [form, setForm] = useState({
    FirstName: '',
    LastName: '',
    age: '',
  });

  const handleChange = event => {
    // use spread operator
    setForm({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  return (
    <form>
      <label>
        First Name:
        <input
          type="text"
          name="firstName"
          value={form.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last Name:
        <input
          type="text"
          name="lastName"
          value={form.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Age:
        <input
          type="number"
          name="age"
          value={form.age}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

What about array?

This one's a bit unusual, but yes, just like in class state. We'll use concat on array update.

function SampleArrayState(props) {
  //create array state
  const [nameArray, setNameArray] = useState(['Carl']);

  const updateArray = () => {
    setNameArray(nameArray.concat('John'));
  };

  return (
    <React.Fragment>
      <button onClick={updateArray}>Click me!</button>
      <div>{nameArray.toString()}</div>
    </React.Fragment>
  );
}

And Boolean?

Got you covered here:

function SampleBooleanState(props) {
  const [show, setShow] = useState(true);
  const visibility = show ? 'visible' : 'hidden';

  return (
    <React.Fragment>
      <h1 style={{ visibility }}>useState Hook is awesome!</h1>
      <button
        onClick={() => { setShow(!show) }}
      >{`${show ? 'Hide' : 'Show'} the Header!`}</button>
    </React.Fragment>
  );
}

The rules of hooks

The important thing to remember is that hooks don't work in a class component. They are made for function components.

Don't call hooks from inside nested function, loops or conditionals.
Don't call hooks from regular JavaScript function.
This

Conclusion

The useState hook enables function components to access React's internal state and update it. The state can be any data type: string, number, boolean, array, or object. useState accept one argument: the initial data, and it returns an array of two values: the current state value and the function/ method that can be used to update the state.

There are more than just useState hook, but let's cover each hook in their own single post.

Here's a list of all built-in hooks (yes, you can write a custom hook!) available as of this writing. I'll be covering them in the next posts!

Also, I'm writing a book on learning React properly without the stress. You might wanna check it out here.

Until next time!

React 101 - The Practical Introduction

Nathan Sebhastian — Mon, 04 Feb 2019 09:54:32 +0000

Have you went through the official React's Tic Tac Toe tutorial? If you have, you might notice this bolded text in the introduction

You might be tempted to skip it because you’re not building games — but give it a chance.

I'm guessing even React team knows that it's not that interesting to build a Tic Tac Toe game, since they put that line in. While the project indeed gives you an understanding of React, you'll need a strong will to process the tutorial.

Now don't get me wrong, I'm grateful for this introduction project, but I just don't like it. If you're thinking the same thing, I'm going to write about alternative projects that you can build to learn React in this tutorial.

So what front-end projects you can pick up to learn about React? As I went through tutorials and blog posts, I noticed a good introduction tutorial for React must do these things:

Teach the fundamentals of React like components, state and props
Handling dynamic data, changes in state and props
Shows the use of lifecyle method

Well, almost everything from the main concepts tab, really.

By the end of this tutorial, you will have a better understanding of the uses of React concepts like components, state and lifecycle methods and how they are used in common web application UI.

Note: For the CSS part of this tutorial, we'll use Bootstrap to make it look nicer without writing our own CSS. You can safely ignore the className parts of the sample code, since they are from Bootstrap

Front-end Fun With List of Cards

Let's start with utilizing JSX, components and props — the basic ingredients of a React UI. Here is our final product:

So let's build it. All we have to do is to create the <Card/> Component which returns JSX elements:

function Card(props) {
    return (
      <div className="card">
        <img className="card-img-top" 
          src="https://via.placeholder.com/600x250.png" 
          alt="cap image" />
          <div className="card-body">
          <h5 className="card-title">Title Placeholder</h5>
          <p className="card-text">Description Placeholder</p>
          <a href="#" className="btn btn-primary">Learn more</a>
        </div>
      </div>
    );
}

And then create a parent component that renders <Card/> three times. We can name it <CardList/>

function CardList() {
  return (
    <div className="row">
      <div className="col-sm-4">
        <Card />
      </div>
      <div className="col-sm-4">
        <Card />
      </div>
      <div className="col-sm-4">
        <Card />
      </div>
    </div>
  );
}

Don't forget to add the ReactDOM.render call at the bottom of the code. This is the code responsible for bringing our React application into our HTML element.

ReactDOM.render(<CardList />, document.getElementById('root'));

Now we need to include our own data into these cards, so pass some props into it

function CardList() {
  return (
    <div className="row">
      <div className="col-sm-4">
        <Card
          featureImage="https://sebhastian.com/static/eb0e936c0ef42ded5c6b8140ece37d3e/fcc29/feature-image.png"
          title="How To Make Interactive ReactJS Form"
          description="Let's write some interactive form with React"
          link="https://sebhastian.com/interactive-react-form"
        />
      </div>
      <div className="col-sm-4">
        <Card
          // your data
        />
      </div>
      <div className="col-sm-4">
        <Card
          // your data
        />
      </div>
    </div>
  );
}

And then use these props in our <Card/> component:

function Card(props) {
  return (
    <div className="card">
      <img className="card-img-top" src={props.featureImage} alt="cap image" />
      <div className="card-body">
        <h5 className="card-title">{props.title}</h5>
        <p className="card-text">{props.description}</p>
        <a href={props.link} className="btn btn-primary">Learn more</a>
      </div>
    </div>
  );
}

Now this <Card/> component used JavaScript in its JSX, pretty similar to templating engines, isn't it?

You might be wondering, "why do we use function instead of class for declaring component?"

It's because we don't keep state or use lifecycle methods. React components are declared as a class in order to use those two things (although now we can do it with React hooks as well, but we'll leave hooks out for now.)

As we can see in the example, React's UI are made of three basic ingredients: components, JSX and props.

Component is a single piece of UI made out of methods and JSX.
JSX is HTML supercharged with JS, enabling us to describe UI using JavaScript syntaxes.
Props are arbitrary inputs that we pass down into a component.

There really is not much more we can learn from this simple static cards accept basic UI patterns, so let's move on to a more complex task.

Getting Complex With Wizard Form

In this second exercise we will build A wizard form, which is a multi-step form designed to ease the filling process for a long and complex form. By only showing a few inputs on a screen, users will feel encouraged to fill the blank inputs rather than feeling overwhelmed and potentially abandoning the form.

Let’s take a look at how you can build a form like this with React:

The easiest way to create a multi step form is to create a container form element, which contains all the wizard step component inside of it. This diagram will help you understand it clearly.

Although it seems to be more complex than a regular form, a wizard form still uses the same React principle. But since we have state in this exercise, we'll need to include a new principle:

State is used for storing dynamic data

Instead of having one form component, we will have one parent component and three child components. In the diagram above, <MasterForm/> component will send data and functions to children components via props, and children components will trigger handleChange() function to set values in the state of <MasterForm/> . We'll need a function to move the form from one step to another as well.

Just like how CardList send props to Card, These children components will receive props from <MasterForm/> for value and onChange props.

<Step1/> component will render email address input
<Step2/> will render username input
<Step3/> will render password input and a submit button

The parent <MasterForm/> will supply both data and function into child components, and child components will pass user inputs back to the parent using its props.

First, we’ll create the form children components. This example will only include one input per form step. The comments will show the use of props.

function Step1(props) {
  if (props.currentStep !== 1) {
    return null
  } 
  return(
    <div className="form-group">
      <label htmlFor="email">Email address</label>
      <input
        className="form-control"
        id="email"
        name="email"
        type="text"
        placeholder="Enter email"
        value={props.email}
        onChange={props.handleChange}
        />
    </div>
  )
}

Since the child components look almost similar between one another, I'm just showing one of them above. You can take a look at the demo for the full code. Notice how we used function instead of class, since we don't use state or lifecycle methods.

Then we can put this child component into the master form render() function and pass in the necessary props. To handle events in which user type something into the text, we used the onChange synthetic event, which is a part React core libraries for handling events. More details here.

Let's make the <MasterForm/> component and initialize its state and methods. A currentStep state will be initialized with the value of 1. This is used for step indicator so our form knows on what step we are currently. We'll use ES6 class since need local state for this component:

class MasterForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentStep: 1,
      email:  '',
      username: '',
      password: '', 
    }
  }

  // creating functions with ES6 arrow function syntax

  handleChange = event => {
    const {name, value} = event.target
    this.setState({
      [name]: value
    })    
  }

  handleSubmit = event => {
    event.preventDefault()
    const { email, username, password } = this.state
    alert(`Your registration detail: \n 
           Email: ${email} \n 
           Username: ${username} \n
           Password: ${password}`)
  }

  // render method here . . .
}

Next, we add the steps in the render method of <MasterForm/> . It will send handleChange() function and required state values as props, note the highlighted code blocks:

render() {    
  return (
    <React.Fragment>
    <h1>A Wizard Form!</h1>
    <p>Step {this.state.currentStep} </p> 

    <form onSubmit={this.handleSubmit}>
    {/* 
      render the form steps and pass required props in
    */}

      <Step1 
        currentStep={this.state.currentStep} 
        handleChange={this.handleChange}
        email={this.state.email}
      />
      <Step2 
        currentStep={this.state.currentStep} 
        handleChange={this.handleChange}
        username={this.state.username}
      />
      <Step3 
        currentStep={this.state.currentStep} 
        handleChange={this.handleChange}
        password={this.state.password}
      />       

    </form>
    </React.Fragment>
  )
}

Because render() must return a single element, the <React.Fragment> component lets you return multiple elements in a render() method without creating an additional DOM element. More details here.

Then we add the next or previous step function, which will check if the current step has a previous or next step. If it is, it will push currentStep up or down:

class MasterForm extends Component {
  /*
  * Test current step with ternary
  * _next and _previous functions will be called on button click
  */

  _next = () => {
    let currentStep = this.state.currentStep
    currentStep = currentStep >= 2? 3: currentStep + 1
    this.setState({
      currentStep: currentStep
    })
  }

  _prev = () => {
    let currentStep = this.state.currentStep
    currentStep = currentStep <= 1? 1: currentStep - 1
    this.setState({
      currentStep: currentStep
    })
  }

  // ... the rest of the code

We’ll make functions that will check whether the current step is 1 or 3. This is because we have 3 step wizard form. You can change them if you have more. The buttons will disappear if there is no next or previous step from the current step. These buttons will call on our _next and _previous methods.

/*
* the functions for our button
*/
previousButton(){
  let currentStep = this.state.currentStep;
  if(currentStep !==1){
    return (
      <button 
        className="btn btn-secondary" 
        type="button" onClick={this._prev}>
      Previous
      </button>
    )
  }
  return null;
}

nextButton(){
  let currentStep = this.state.currentStep;
  if(currentStep <3){
    return (
      <button 
        className="btn btn-primary float-right" 
        type="button" onClick={this._next}>
      Next
      </button>        
    )
  }
  return null;
}

All that’s left is to render our next and previous buttons

/*
* add buttons to our form in render
*/
render(){
  return(
    <form onSubmit={this.handleSubmit}>
      {/* 
        ... other codes
      */}

      {this.previousButton()}
      {this.nextButton()}
    </form>
  )
}

If you're wondering why we used () on the call to buttons above, that's because we need to actually execute the button functions. The _next and _previous functions are only executed on button click, hence they musn't have () on the call.

Phew! There's a lot of interactions between component and state here, but I hope by now you get to understand the use of state in React application. To summarize, state is just arbitrary data we defined in a component, and it becomes a part of that component forever. We can pass it down to another component, we can update it, and we can do conditional stuff based on what state our component currently is in.

In this sample form, we have used state for keeping track of user's inputs and the current step of the wizard form. Since React is a one-way data flow from parent to child component, always remember that only the owner of the state can mutate or update it.

To use state we can use ES6 Class or React Hooks (will be explained in another tutorial.)

Still up for another exercise? Let's do it then!

P.S: if you're working on React form, checkout this in-depth tutorial by Arinich

GitHub Search App

Now for our third exercise, let's actually use some ES6 features to get data from GitHub API and display its results. This exercise will include all the things we learned from previous projects and new ones: lifecycle methods and rendering lists.

https://codepen.io/nathansebhastian/pen/LqpvrB

Note: There are extra css that I wrote for this app. Make sure to visit the CSS tab of the codepen above and paste it if you're not forking the pen

First, let's explore about Github API that we're going to use. Since we're only searching by username, we need this API url:

https://api.github.com/search/users?q={--search-string--}

Let's get ready to build the app by writing the big header component first. It's just static Bootstrap Jumbotron actually:

const Header = () => {
  return (
    <div className="jumbotron">
      <h1>Github Search App</h1>
      <h2>Search users in GitHub using this simple React application.</h2>
      <p>Click on the card to see more detail about individual user. The search default is nsebhastian (me!)</p>
    </div>
  );
};

Now let's think about making the input form. We're going to need:

A search form
Calling Github API when serach form is submitted
Display search result in a list of cards

We'll start with declaring the API constant

const API = 'https://api.github.com/';

Then let's initialize the "top" component with two state values: the searchText and data.

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      searchText: 'nsebhastian',
      data: '',
    }
  }

  fetchSearch = username => {
    let url = `${API}search/users?q=${username}`;
    fetch(url)
    .then((res) => res.json() )
    .then((data) => {
      this.setState({
        data: data
      });
    })
    .catch((error) => console.log('Oops! . There Is A Problem' + error) )
  }

  componentDidMount() {
    this.fetchSearch(this.state.searchText);
  }

fetchSearch function will fetch data from the API url, transform it into JSON object, then update our data state with the freshly fetched data. It will be called in a component lifecycle method componentDidMount. If you're not familiar with lifecycle methods, they are basically methods run on a particular times in the process of constructing and rendering components. There are other methods beside componentDidMount, including constructor method. Not all lifecycle methods are used frequently, some of them will be used more often than the rest.

Let's continue with our app by writing the render method of App component:

render() {
  return (
    <div>
      <MyHeader />
      <SearchForm 
        fetchSearch={this.fetchSearch}
      />
      <Profiles 
        data={this.state.data}
      />
    </div>
  );
}

You might've guessed it by seeing the code that we need to create two more components, namely <SearchForm/> and <Profiles/>.

Let's start with the <SearchForm/>. We have written form in React before, so this won't be hard. We just need a single text input and a submit button. Also, let me show you another way of getting input value without using state:

class SearchForm extends React.Component {
  render() {
    return (
        <div className="search-bar">
          <form
            className="input-group"
            onSubmit={this.handleForm}>
            <input
              type="search"
              ref="username"
              placeholder="Type Username here"
              className="form-control"/>
            <span className="input-group-btn">
              <button type="submit" className="btn btn-warning">Submit</button>
            </span>
          </form>
        </div>

    )
  }

  handleForm = event => {
    event.preventDefault();
    let username = this.refs.username.value
    this.props.fetchSearch(username);
  }
}

As you can see, we are getting username value by using ref. This way we don't need to initialize state at all. We have to use ES6 class for declaring the component, since we need to write the handleForm function.

Now it's time to write the final component <Profiles/>. I will use this opportunity to show you component declaration — arrow function style.

Profiles = props => {
    if(props.data){
      let data = props.data;

      if (data.message === 'Not Found')
        return (
           <div className="notfound">
              <h2>Oops !!!</h2>
              <p>The Component Couldn't Find The You Were Looking For . Try Again </p>
           </div>
        );
        else{
          // map the users into JSX elements
          let userList = data.items.map((name) => {
            return (
                <a key={name.id} href={name.html_url} target="blank">
                <div className="bs-callout bs-callout-info">
                  <img className="user" src={name.avatar_url} alt={`${name.login}`}/>
                  <h4>Username : {name.login}</h4>
                  <p> Url : {name.html_url}</p>
                  <p> Score : {name.score} </p>
                </div>
                </a>
            );
          })
          // then render it
          return (
            <div>{userList}</div>
          );
        }
    }
    else {
      return <div>Fetching data . . .</div>
    }
}

If you're following this tutorial from the start, I think you can understand what this <Profiles/> component do. It will accept props named data from its parent, then do something based on that props. We used the map function to iterate and write JSX elements frm the data array. Then it's simply returned for rendering.

Notice how a key props is passed into the <a> element so that React can identify individual element in the list. More detail here.

Now you can search and click on the result to be taken to the GitHub user profile. Great job coming this far! We can actually improve the app by using React Router and create user page for a detailed view of individual user, but let's call it a day for now and go for React Router refactoring when we actually learn about React Router.

Conclusion

We've build three exercises to learn about React fundamentals, starting from a simple, static cards list, to a more complex React application that fetch data from GitHub API and display it. We also learned about dynamic data management using state.

The take away from these tutorials are simple and reuseable React patterns that you'll see in almost any React app:

Component is a single piece of UI made out of methods and JSX.
JSX is HTML supercharged with JS, enabling us to describe UI using JavaScript syntaxes.
Props are arbitrary inputs that we pass down into a component.
State is used for storing dynamic data. We can use it for rendering UI and storing fetched data
Lifecycle methods are used for methods that need to be called on component render. The easiest example is for calling API and fetching data

So how was it? Isn't it feels more fun learning React by actually building pieces of components that you're more likely to use in your projects? Is it too hard for you? Please give me feedbacks so I can improve my writing skill.

I'll be covering more about React soon — like using Hooks or React router — so if you're interested in that, be sure to stay tuned by following me or subscribe to my newsletter. I promise not to spam your inbox!

Thanks for reading :)

Originally published at sebhastian.com

Forem: Nathan Sebhastian

JavaScript Operators Breakdown With Examples

Arithmetic operators

1. Addition

2. Subtraction

3. Multiplication

4. Division

5. Remainder

6. Exponentiation

7. Increment

8. Decrement

Arithmetic operators summary

Assignment operators

Comparison operators

Logical operators

Ternary operator

The typeof operator

Bitwise operators

1. Bitwise AND operator

2. Bitwise OR operator

Bitwise XOR operator

Bitwise NOT operator

Bitwise Left Shift operator

Bitwise Right Shift operator

Bitwise Zero-fill Right Shift operator

Conclusion

Understanding React `useState` and `useEffect` hooks

The useEffect hook

The componentWillUnmount effect

Running useEffect only once

Level up your React skill today!

Understanding React lifecycle methods

The constructor function

render function

The componentDidMount function

The componentDidUpdate function

The componentWillUnmount function

Conclusion

Level up your React skill today!

React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (with examples)

Inline Styling

CSS Stylesheets

CSS Modules

Styled Components

Conclusion

Building Easier React Forms With Formik

Enter Formik

Getting values in and out of form state

Validation and error messages

Even easier validation with Yup

Form submission process

But what about redux-form?

Conclusion

React Distilled 2.0 is released

Building a chat app with React Hooks, a pragmatic example

CometChat at a glance

Setting up React

Setting up our components

Creating the App Component

Creating the Login Component

Creating the Chat Component

Creating selectFriend function

Running useEffect on selectedFriend state update

Sending new message handler

Creating scrollToBottom function

Conclusion

React Router Introduction

Making dynamic routing

Nested route

Passing props to Route component

Is there a way to explain hooks without mentioning class component?

Firebase as simple database to React app

Create your database application

Setting up your React application

Creating config.js file

Write the index.js file

Creating your application

I used Bootstrap too often and I wonder how can I write good CSS without it?

React Hooks are live. Here is your introduction

useState hook

The `useEffect` hook

Creating `config.js` file

Write the `index.js` file

`useState` hook