Juana  O'Keefe

Juana O'Keefe

1603177860

Basic Hooks!

As much as I would love to chat about how cool Dustin Hoffman’s shiny hand toothpick looks, we are not going to chat about the movie Hook. We are here to talk very briefly about React Hooks! As I am learning React, I have come across a lot of code written with Hooks. Since I didn’t understand it at first, here‘s my attempt to explain… Hooks.

Note: If you have questions on React or Hooks, please check out the great documents the React team has put together here and here. I am just going to cover two examples of the basics.

What is a React Hook? Introduced on February 6, 2019, Hooks are a way of creating components without creating a class! Hooks let you manipulate state and other React features of the component lifecycle from functional components.

But why should I care? If you are familiar with building out big components you may find yourself running into difficulty refactoring or you may have paralleled or duplicated logic, or worse heavily nested components referred to as wrapper hell.

Image for post

https://www.slideshare.net/AikdanaiSidhikosol/react-hooks-101

Hooks help us stay DRY and makes our code more organized and reusable by breaking down reusable code into smaller functions.

#frontend #react #web-development #learning-to-code #javascript #react native

What is GEEK

Buddha Community

Basic Hooks!

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Biju Augustian

Biju Augustian

1574339995

Learn Python Tutorial from Basic to Advance

Description
Become a Python Programmer and learn one of employer’s most requested skills of 21st century!

This is the most comprehensive, yet straight-forward, course for the Python programming language on Simpliv! Whether you have never programmed before, already know basic syntax, or want to learn about the advanced features of Python, this course is for you! In this course we will teach you Python 3. (Note, we also provide older Python 2 notes in case you need them)

With over 40 lectures and more than 3 hours of video this comprehensive course leaves no stone unturned! This course includes tests, and homework assignments as well as 3 major projects to create a Python project portfolio!

This course will teach you Python in a practical manner, with every lecture comes a full coding screencast and a corresponding code notebook! Learn in whatever manner is best for you!

We will start by helping you get Python installed on your computer, regardless of your operating system, whether its Linux, MacOS, or Windows, we’ve got you covered!

We cover a wide variety of topics, including:

Command Line Basics
Installing Python
Running Python Code
Strings
Lists
Dictionaries
Tuples
Sets
Number Data Types
Print Formatting
Functions
Scope
Built-in Functions
Debugging and Error Handling
Modules
External Modules
Object Oriented Programming
Inheritance
Polymorphism
File I/O
Web scrapping
Database Connection
Email sending
and much more!
Project that we will complete:

Guess the number
Guess the word using speech recognition
Love Calculator
google search in python
Image download from a link
Click and save image using openCV
Ludo game dice simulator
open wikipedia on command prompt
Password generator
QR code reader and generator
You will get lifetime access to over 40 lectures.

So what are you waiting for? Learn Python in a way that will advance your career and increase your knowledge, all in a fun and practical way!

Basic knowledge
Basic programming concept in any language will help but not require to attend this tutorial
What will you learn
Learn to use Python professionally, learning both Python 2 and Python 3!
Create games with Python, like Tic Tac Toe and Blackjack!
Learn advanced Python features, like the collections module and how to work with timestamps!
Learn to use Object Oriented Programming with classes!
Understand complex topics, like decorators.
Understand how to use both the pycharm and create .py files
Get an understanding of how to create GUIs in the pycharm!
Build a complete understanding of Python from the ground up!

#Learn Python #Learn Python from Basic #Python from Basic to Advance #Python from Basic to Advance with Projects #Learn Python from Basic to Advance with Projects in a day

Hoang  Kim

Hoang Kim

1585500660

React hooks - Giới thiệu tổng quát về Hooks

React hooks ra đời đã giúp functional component trở nên powerful hơn bao giờ hết! 😍Trước đây khi cần dùng đến các tính năng của React như state, life cycle thì mình bắt buộc phải dùng class component. Nhưng giờ thì đã khác, có hooks, functional component như hổ mọc thêm cánh, có thể xử lý được state, life cycle và những thứ khác của React một cách êm đềm.

Cùng mình xem hết videos để khám phá những điều thú vị từ React hooks nhé! 😉

Link tham khảo:

#reactjs #react-hook #hook #javascript #web-development

Juana  O'Keefe

Juana O'Keefe

1603127640

Hooks, Hooks, Hooks!

Prior to 2018, React, an already powerful and widely-used javascript library for building user interfaces, had 3 cumbersome issues:

  1. Reusing logic: in order to to create dynamic interfaces where state is manipulated, logic was constantly being copied for seemingly simple tasks like updating the state from a form field. This often would lead to complicated and bloated data structures.
  2. Giant components: logic often times gets split amongst various lifecycle. methods in order to keep your application working.
  3. Confusing classes: invariably with reused logic and oversized components, our classes themselves can become confusing for both user and the machine.

As Dan Abramov of the React Dev team describes it, these are really three separate issues, but rather systems of the same problem: before 2018, _React did not provide a stateful primitive that is simpler than incorporating a class component and its associated logic. _At one point, React used mixins to pseudo-resolve this issue, but that ultimately created more problems that it solved.

How did the React team resolve this seemingly singular, but hugely impactful inconvenience? Hooks to the rescue.

Image for post

#software-engineering #react-conf-2018 #hooks #react #react-conference #react native

Talha Malik

Talha Malik

1582623480

React Hooks Tutorial for Beginners: Learn useEffect Hook

If you are a React developer, and haven’t learned about React hooks yet, it is the perfect time to start learning now. In this post, we are specifically going to learn about the React Hook, the useEffect.

In this article, let’s dive in and get started with the next hook, _useEffect. _This article assumes that you have already learned about the _useState _hook.

Note: If you are new to React, I would recommend learning Hooks first, and then learn older way of doing things.

React Hooks – What is it trying to solve?

Hooks were introduced in React version 16.8 and now used by many teams that use React.

Hooks solves the problem of code reuse across components. They are written without classes. This does not mean that React is getting rid of classes, but hooks is just an alternate approach.

In React, you can soon end up with complex components with stateful logic. It is not easy to break these components because within the class you are dependent on the React Lifecycle Methods. That’s where React Hooks come in handy. They provide you a way to split a component, into smaller functions. Instead of splitting code based on the Lifecycle methods, you can now organize and split your code into smaller units based on functionality.

This is a huge win for React developers. We have always been trained to write React classes which adhere to the confusing lifecycle methods. Things are going to get better with the introduction of hooks to React.

‘Hooks are functions that let you “hook into” React state and lifecycle features from function component. They do not work within a class. They let you use React without a class.’ – React Official Blog post.

How to use _useEffect _hook?

_useEffect _hook essentially is to allow side effects within the functional component. In class components, you may be familiar with lifecycle methods. The lifecycle methods, _componentDidMount, componentDidUpdate _and componentWillUnmount, are all all handled by the useEffect hook in functional components.

Before the introduction of this hook, there was no way to perform these side-effects in a functional component. Now the useEffect hook, can provide the same functionality as the three lifecycle methods mentioned above. Let’s look at some examples to learn this better.

Before Hooks

import React from "react";

class TraditionalComponent extends React.Component {
  state = {
    buttonPressed: "",
  };

  componentDidMount() {
    console.log("Component did mount", this.state.buttonPressed)
  }

  componentDidUpdate() {
    console.log("Component did update", this.state.buttonPressed)
  }

  onYesPress() {
    this.setState({ buttonPressed: "Yes" });
  }

  onNoPress() {
    this.setState({ buttonPressed: "No" });
  }

render() {
    return (
      <div>
        <button onClick={() => this.onYesPress()}>Yes</button>
        <button onClick={() => this.onNoPress()}>No</button>
      </div>
    );
  }
}

export default TraditionalComponent;

In the example above we have coded a traditional class React component. In class components, we have access to the lifecycle methods. Here I am using _componentDidMount() _and _componentDidUpdate() _with console logs in each of them. When you run this above code, and look at the console you will initially see the following message:

Component did mount ""

_**componentDidMount() **_is called as soon as the component is mounted and ready. This is a good place to initiate API calls, if you need to load data from a remote endpoint.

Now if we press the Yes button or the _No _button, the button state is updated. At this point you should see the following on the console:

Component did update Yes 
Component did update Yes 

The _componentDidUpdate()_method is called when the state changes. This lifecycle method is invoked as soon as the updating happens. The most common use case for the _componentDidUpdate() _method is updating the DOM in response to state changes.

Alright, now what does the _useEffect _hook really do?

Functional Component with useEffect Hook

Let’s now re-write our example into a functional component.

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

const UseEffectExample = () => {
  const [button, setButton] = useState("");

  //useEffect hook
  useEffect(() => {
    console.log("useEffect has been called!", button);
  });

  const onYesPress = () => {
    setButton("Yes");
  };

  const onNoPress = () => {
    setButton("No");
  };

return (
      <div>
        <button onClick={() => this.onYesPress()}>Yes</button>
        <button onClick={() => this.onNoPress()}>No</button>
      </div>
    );
};

export default UseEffectExample;

We have now rewritten our class component into a functional component.

Note: The first thing we need to do to get the useEffect to work is, import the _useEffect _from React.

import React, { useEffect } from "react";

Notice here that the useEffect hook has access to the state. When you run this code, you will initially see that the useEffect is called which could be similar to the componentDidMount. After that every time the state of the button changes, the useEffect hook is called. This is similar to the componentDidUpdate lifecycle.

// Console
useEffect has been called! ""    // comparable to componentDidMount
useEffect has been called! Yes  // comparable to componentDidUpdate
useEffect has been called! No  // comparable to componentDidUpdate

I hope you are with me so far. Let’s look into some more details about the _useEffect _hook.

Passing Empty Array to useEffect Hook

You can optionally pass an empty array to the useEffect hook, which will tell React to run the effect only when the component mounts.

Here is the modified useEffect hook from the previous example, which will occur at mount time.

//useEffect hook
  useEffect(() => {
    console.log("useEffect has been called!", button);
  }, []); 

When you run this on the console you will only see the _useEffect _being called once at mount.

// Console
useEffect has been called! ""    // comparable to componentDidMount

Separate Concerns using Multiple useEffect Hooks

An interesting feature of the _useEffect _hook is that, you can separate them into multiple hooks, based on the logic. With lifecycle methods, this was not possible. Often, unrelated logic was combined within the same lifecycle method, because there could only be one of each lifecycle method within the class component.

If you have multiple states in your functional component, you can have multiple _useEffect _hooks. Let’s extend the previous example, by adding another state within the component, that display the titles of blog posts. Now this is unrelated to the yes and no button we had. We can create multiple useEffect hooks, to separate the concerns as shown below:

import React, { useState, useEffect } from "react";
import { default as UUID } from "uuid";

const UseEffectExample = () => {
  const [button, setButton] = useState("");

  const [blogPosts, setBlogPosts] = useState([
    { title: "Learn useState Hook", id: 1 },
    { title: "Learn useEffect Hook", id: 2 }
  ]);

  useEffect(() => {
    console.log("useEffect has been called!", button);
  }, [button]);

  useEffect(() => {
    console.log("useEffect has been called!", blogPosts);
  }, [blogPosts]);

  const onYesPress = () => {
    setButton("Yes");
  };

  const onNoPress = () => {
    setButton("No");
  };

  const onAddPosts = () => {
    setBlogPosts([...blogPosts, { title: "My new post", id: UUID.v4() }]);
  };

  return (
    <div>
        <button onClick={() => this.onYesPress()}>Yes</button>
        <button onClick={() => this.onNoPress()}>No</button>
      <ul>
        {blogPosts.map(blogPost => {
          return <li key={blogPost.id}>{blogPost.title}</li>;
        })}
      </ul>
      <button onClick={() => onAddPosts()}>Add Posts</button>
    </div>
  );
};

export default UseEffectExample;

In the example above, we have a button state and a blog post state within the component. We have separated the unrelated logic into two different effect hooks. With the lifecycle methods, this would have not been possible. Hooks let us split the code based on what it is doing rather than a lifecycle method name. React will apply every effect used by the component, in the order they were specified.

When we run this code, when the component is mounted both the useEffect hooks are run as follows:

Learn useEffect Hook in React

You can see how the effects have been separated for each state. This is done by passing the state within an array to the _useEffect _hook.

Now if the Yes/No button is pressed, you should see this on the console.

Learn useEffect Hook in React

Notice here, that the useEffect for the blogPosts has not been invoked here. This tells React which effect to apply, without bundling them all within a call. Now if we clicked on adding a blog post button, we would see its effect take place.

Learn useEffect Hook in React

You get the idea!

Optimization ?

If you have you are used to the class components with lifecycle methods, you would have tried to optimize when the _componentDidUpdate _is called by passing the _prevProps _or _prevState _and compare it with the current state. Only if they don’t match the componentDidUpdate will happen. Now with _useEffect _hook, you can achieve the same optimization by simply passing the state in an array as a parameter as we have seen in the example above. This will ensure that the hook is run when the state passed to the effect changes.

Conclusion

Congratulations, you have stayed with me so far! Hooks is a fairly newer concept in React, and the official React documentation does not recommend that you rewrite all your components using Hooks. Instead, you can start writing your newer components using Hooks.

If you want to play with the code samples I used in this blog post, they are available on my GitHub Repo below:

React Hooks Examples

#reactjs #react #reach-hooks #hooks #webdev