Castore DeRose

Castore DeRose

1565764481

React Hooks Tutorial for Beginners

An Introduction to Hooks in React

If you've been reading Twitter you probably are aware that Hooks are a new feature of React, but you might be asking how do we actually use them? In this post, we're going to show you a bunch of examples on how to use hooks.

One of the key ideas to understand is that Hooks let you use state and other React features without writing a class.

Motivation behind Hooks

While component-based design lets us reuse views across our app, one of the biggest problems React developers face is how we can reuse state logic between components. When we have components that share similar state logic, there hasn't been great solutions for reuse and this can sometimes lead to duplicated logic in the constructor and lifecycle methods.

The typically way to deal with this has traditionally been either:

  • higher-order components or
  • render props complex

But both of these patterns have drawbacks that can contributed to complex code-bases.

Hooks aims to solve all of these by enabling you to write functional components that have access to features like state, context, lifecycle methods, ref, etc. without writing the class component.

Hooks are Alpha

Before we dive in, it's important to mention that the Hooks API is not finalized.
Also, the official docs are very good and we recommend that you read them, in particular, because they expand on the motivations of Hooks.

How Hooks Map to Component Classes

If you're familiar with React, one of the best ways to understand hooks is by looking at how we reproduce the behavior we're used to in "component classes" by using hooks.

Recall that when writing component classes we often need to:

  • Maintain state
  • Use lifecycle methods like componentDidMount() and componentDidUpdate()
  • Access context (by setting contextType)

With React Hooks we can replicate a similar/the same behavior in functional components:

  • Component state uses the useState() hook.
  • Lifecycle methods like componentDidMount() and componentDidUpdate()use the useEffect() hook.
  • Static contextType uses the useContext() hook.

Using Hooks Requires react"next"

You can get started with Hooks right now by setting react and react-dom in your package.json file to next .

// package.json
"react": "next",
"react-dom": "next"

useState() Hook Example

State are an essential part of React. They allow us to declare state variables that hold data that will be used in our app. With class components, state is usually defined like this:

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

Before hooks, state was usually only used in a class component but as mentioned above, Hooks allows us to add state to a functional component.

Let's see an example below. Here, we'll be building a switch for a lightbulb SVG, which will change color depending on the value of the state. To do this, we'll be using the useState hook.

Here's the complete code (and runnable example) -- we'll walk through what's going on below.

import React, { useState } from "react";
import ReactDOM from "react-dom";

import “./styles.css”;


function LightBulb() {

let [light, setLight] = useState(0);


const setOff = () => setLight(0);

const setOn = () => setLight(1);


let fillColor = light === 1 ? “#ffbb73” : “#000000”;


return (

<div className=“App”>

<div>

<LightbulbSvg fillColor={fillColor} />

</div>


  &lt;button onClick={setOff}&gt;Off&lt;/button&gt;
  &lt;button onClick={setOn}&gt;On&lt;/button&gt;
&lt;/div&gt;



);

}


function LightbulbSvg(props) {

return (

/*

Below is the markup for an SVG that is the shape

of a lightbulb.

The important part is the fill, where we set the

color dynamically based on props

*/

<svg width=“56px” height=“90px” viewBox=“0 0 56 90” version=“1.1”>

<defs />

<g

id=“Page-1”

stroke=“none”

stroke-width=“1”

fill=“none”

fill-rule=“evenodd”

>

<g id=“noun_bulb_1912567” fill=“#000000” fill-rule=“nonzero”>

<path

d=“M38.985,68.873 L17.015,68.873 C15.615,68.873 14.48,70.009 14.48,71.409 C14.48,72.809 15.615,73.944 17.015,73.944 L38.986,73.944 C40.386,73.944 41.521,72.809 41.521,71.409 C41.521,70.009 40.386,68.873 38.985,68.873 Z”

id=“Shape”

/>

<path

d=“M41.521,78.592 C41.521,77.192 40.386,76.057 38.986,76.057 L17.015,76.057 C15.615,76.057 14.48,77.192 14.48,78.592 C14.48,79.993 15.615,81.128 17.015,81.128 L38.986,81.128 C40.386,81.127 41.521,79.993 41.521,78.592 Z”

id=“Shape”

/>

<path

d=“M18.282,83.24 C17.114,83.24 16.793,83.952 17.559,84.83 L21.806,89.682 C21.961,89.858 22.273,90 22.508,90 L33.492,90 C33.726,90 34.039,89.858 34.193,89.682 L38.44,84.83 C39.207,83.952 38.885,83.24 37.717,83.24 L18.282,83.24 Z”

id=“Shape”

/>

<path

d=“M16.857,66.322 L39.142,66.322 C40.541,66.322 41.784,65.19 42.04,63.814 C44.63,49.959 55.886,41.575 55.886,27.887 C55.887,12.485 43.401,0 28,0 C12.599,0 0.113,12.485 0.113,27.887 C0.113,41.575 11.369,49.958 13.959,63.814 C14.216,65.19 15.458,66.322 16.857,66.322 Z”

id=“Shape”

fill={props.fillColor}

/>

</g>

</g>

</svg>

);

}


const rootElement = document.getElementById(“root”);

ReactDOM.render(<LightBulb />, rootElement);


Our Component is a Function

In the code block above, we start by importing useState from react. useStateis a new way to use the capabilities that this.state would have offered.

Next, notice that this component is a function and not a class. Interesting !

Reading and Writing State

Within this function, we call useState to create a state variable:

let [light, setLight] = useState(0);

useState is used to declare a state variable and can be initialized with anytype of value (unlike state in classes, which were required to be an object).

As seen above, we use destructuring on the return value of useState.

  • The first value, light in this case, is the current state (sort of like this.state) and
  • The second value is a function used to update the state (first) value (like the traditional this.setState).

Next, we create two functions that each set the state to different values, 0 or 1.

const setOff = () => setLight(0);

const setOn = () => setLight(1);

We then use these functions as event handlers to the buttons in the view:

<button onClick={setOff}>Off</button>

<button onClick={setOn}>On</button>

React Tracks the State

When the “On” button is pressed, setOn is called, which will call setLight(1). The call to setLight(1) updates the value of light on the next render. This can feel a bit magical, but what is happen is that React is tracking the value of this variable and it will pass in the new value when it re-renders this component.

Then, we use the current state (light) to determine whether the bulb should be “on” or not. That is, we set the fill color of the SVG depending on the value of light. If light is 0 (off), then the fillColor is set to #000000 (and if it’s 1 (on), fillColor is set to #ffbb73).

Multiple States

While we don’t do this in the above example, you can create multiple states by calling useState more than once. E.g.:

let [light, setLight] = useState(0);

let [count, setCount] = useState(10);

let [name, setName] = useState(“Yomi”);
NOTE: There are some constraints when using hooks that you should be aware of. The most important one is that you must only call hooks at the top level of your function. See The Rules of Hooks for more information.

useEffect() Hook Example

The useEffect Hook lets you perform side effects in function components.Side effects can be API calls, Updating DOM, subscribing to event listeners - anything where you want an “imperative” action to happen.

By using the useEffect() Hook, React knows that you’d like to carry out a certain action after it’s done rendering.

Let’s look at an example below. We’ll be using the useEffect() hook to make API calls and get the response.

import React, { useState, useEffect } from “react”;

import ReactDOM from “react-dom”;


import “./styles.css”;


function App() {

let [names, setNames] = useState([]);


useEffect(() => {

fetch(“https://uinames.com/api/?amount=25&region=nigeria”)

.then(response => response.json())

.then(data => {

setNames(data);

});

}, []);


return (

<div className=“App”>

<div>

{names.map((item, i) => (

<div key={i}>

{item.name} {item.surname}

</div>

))}

</div>

</div>

);

}


const rootElement = document.getElementById(“root”);

ReactDOM.render(<App />, rootElement);

In this code example both useState and useEffect are imported and that’s because we’d like to set the result from the API call to a state.

import React, { useState, useEffect } from “react”;

Fetch Data and Update State

To “use an effect”, we need to place our action in the useEffect function - that is, we pass our effect “action” as an anonymous function as the first argument to useEffect.

In our example above, we make an API call to an endpoint that returns a list of names. When the response comes back, we convert it to JSON and then use setNames(data) to set the state.

let [names, setNames] = useState([]);


useEffect(() => {

fetch(“https://uinames.com/api/?amount=25&region=nigeria”)

.then(response => response.json())

.then(data => {

setNames(data);

});

}, []);

Performance Concerns When Using Effects

There are some things to note about using useEffect though.

The first one to think about is that, by default, our useEffect will be called on every render! The good news is that we don’t need to worry about stale data, but the bad news is that we probably don’t want to make an HTTP request on every render (as in this case).

You can skip effects by using the second argument to useEffect, as we did in this case. The second argument to useEffect is a list of variables we want to “watch” and then we will only re-run the effect when one of those values changes.

In the above code example, notice that we pass an empty array as the second argument. That is us telling React that we only want to call this effect when the component is mounted.

To learn more about Effect performance, checkout this section in the official docs

Also, just like useState function above, useEffect allows for multiple instances, which means you can have several useEffect functions.

useContext() Hook Example

The Point of Context

Context in React is a way for a child component to access a value in a parent component.

To understand the need for context, when building a React app you often need to get values from the top of your React tree to the bottom. Without context, you end up passing props through components that do not necessarily need them. Not only is it a hassle to passing props through components that don’t need them, it can also introduce an inadvertent coupling if done incorrectly.

Passing props down through a tree of “unrelated” components is affectionately called props drilling.

React Context solves the problem of props drilling by allowing you to share values through the component tree, to any component that asks for those values.

useContext() makes context easier to use

With the useContext Hook, using Context is easier than ever.

The useContext() function accepts a context object, which is initially returned from React.createContext(), and then returns the current context value. Let’s look at an example below.

import React, { useContext } from “react”;

import ReactDOM from “react-dom”;

import “./styles.css”;


const JediContext = React.createContext();


function Display() {

const value = useContext(JediContext);

return <div>{value}, I am your Father.</div>;

}


function App() {

return (

<JediContext.Provider value={“Luke”}>

<Display />

</JediContext.Provider>

);

}


const rootElement = document.getElementById(“root”);

ReactDOM.render(<App />, rootElement);

In the code above, the context JediContext is created using React.createContext().

We use the JediContext.Provider in our App component and set the valuethere to “Luke”. This means any context-reading object in the tree can now read that value.

To read this value in the Display() function we call useContext, passing the JediContext an argument.

We then pass in the context object we got from React.createContext, and it automatically outputs the value. When the value of the provider updates, this Hook will trigger a rerender with the latest context value.

Getting a Reference to the Context in a Larger App

Above, we created JediContext within the scope of both components, but in a larger app Display and App would be in different files. So if you’re like us you might be wondering, “how do we get a reference to JediContext across files?”

The answer is that you need to create a new file which exports JediContext.

For example, you might have a file context.js that reads something like this:

const JediContext = React.createContext();

export { JediContext };

and then in App.js (and Display.js) you would write:

import { JediContext } from “./context.js”;

(Thanks, Dave!)

useRef() Hook Example

Refs provide a way to access the React elements created in the render()method.

If you’re new to React refs, you can read this introduction to React refs here.

The useRef() function returns a ref object.

const refContainer = useRef(initialValue);

useRef() and forms with input

Let’s see an example on using the useRef hook.

import React, { useState, useRef } from “react”;

import ReactDOM from “react-dom”;


import “./styles.css”;


function App() {

let [name, setName] = useState(“Nate”);


let nameRef = useRef();


const submitButton = () => {

setName(nameRef.current.value);

};


return (

<div className=“App”>

<p>{name}</p>


  &lt;div&gt;
    &lt;input ref={nameRef} type="text" /&gt;
    &lt;button type="button" onClick={submitButton}&gt;
      Submit
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;



);

}


const rootElement = document.getElementById(“root”);

ReactDOM.render(<App />, rootElement);

In the example above, we’re using the useRef() hook in conjunction with the useState() to render the value of the input tag into a p tag.

The ref is instantiated into the nameRef variable. The nameRef variable can then be used in the input field by being set as the ref. Essentially, this means the content of the input field will now be accessible through ref.

The submit button in the code has an onClick event handler called submitButton. The submitButton function calls setName (created via useState).

As we’ve done with useState hooks before, setName will be used to set the state name. To extract the name from the input tag, we read the value nameRef.current.value.

Another thing to note concerning useRef is the fact that it can be used for more than the ref attribute.

Using Custom Hooks

One of the coolest features of Hooks is that you can easily to share logic across multiple components by making a custom hook.

In the example below, we’ll make a custom setCounter() Hook which lets us track state and provide custom state updating functions!

import React, { useState } from “react”;

import ReactDOM from “react-dom”;

import “./styles.css”;


function useCounter({ initialState }) {

const [count, setCount] = useState(initialState);

const increment = () => setCount(count + 1);

const decrement = () => setCount(count - 1);

return [count, { increment, decrement, setCount }];

}


function App() {

const [myCount, { increment, decrement }] = useCounter({ initialState: 0 });

return (

<div>

<p>{myCount}</p>

<button onClick={increment}>Increment</button>

<button onClick={decrement}>Decrement</button>

</div>

);

}


const rootElement = document.getElementById(“root”);

ReactDOM.render(<App />, rootElement);

In the code block above, we create a function useCounter, which stores the logic of our custom hook.

Notice that useCounter can use other Hooks! We start by creating a new state Hook via useState.

Next, we define two helper functions: increment and decrement which call setCount and adjust the current count accordingly.

Lastly, we return the references necessary to interact with our hook.

Q: What’s with returning and array with an object?
A: Well, like most things in Hooks, API conventions haven’t been finalized yet. But what we’re doing here is returning an array where:
  • The first item is the current value of the hook and
  • The second item is an object, containing functions used to interact with the hook.
This convention allows you to easily “rename” the current value of the Hook - as we do above with myCount.
That said, you can return whatever you’d like from your custom Hook.

In the example above, we use increment and decrement as onClick handlers in our view. When the user presses the buttons, the counter is updated and re-displayed (as myCount) in the view.

Writing Tests for React Hooks

In order to write tests for the hooks, we’ll be using the react-testing-libraryto test them.

react-testing-library is a very light-weight solution for testing React components. It extends upon react-dom and react-dom/test-utils to provides light utility functions. Using react-testing-library ensures that your tests work on the DOM nodes directly.

The testing story for hooks is, as of writing, a bit under-developed. You currently can’t test a hook in isolation. Instead, you need to attach your hook to a component and test that component.

So below, we’ll be writing tests for our Hooks, by interacting with our components and not the hooks directly. The good news is that means that our tests look like normal React tests.

Writing tests for useState() Hook

Let’s see an example on writing tests for the useState Hook. In the lesson above, we are testing a more variation of the useState example we used above. We’ll be writing tests to ensure that clicking on an “Off” button sets the state to 0 and clicking on an “On” button sets the state to 1.

import React from “react”;

import { render, fireEvent, getByTestId } from “react-testing-library”;

// import the lighbulb component

import LightBulb from “…/index”;


test(“bulb is on”, () => {

// get the containing DOM node of your rendered React Element

const { container } = render(<LightBulb />);

// the p tag in the LightBulb component that contains the current state value

const lightState = getByTestId(container, “lightState”);

// this references the on button

const onButton = getByTestId(container, “onButton”);

// this references the off button

const offButton = getByTestId(container, “offButton”);


//simulate clicking on the on button

fireEvent.click(onButton);

// the test expects the state to be 1.

expect(lightState.textContent).toBe(“1”);

//simulate clicking on the off button

fireEvent.click(offButton);

// the test expects the state to be 1.

expect(lightState.textContent).toBe(“0”);

});

In the code block above, we start by importing some helpers from react-testing-library and the component to be tested.

  • render, this will help render our component. It renders into a container which is appended to document.body
  • getByTestId, this fetches a DOM element by data-testid.
  • fireEvent, this is used to “fire” DOM events. It attaches an event handler on the document and handles some DOM events via event delegation e.g. clicking on a button.

Next, in the test assertion function, we create constant variables for the data-testid elemtents and their values that we’d like to use in the test. With references to the elements on the DOM, we can then use the fireEventmethod to simulate clicking on the button.

The test checks that if the onButton is clicked on, the state is set to 1 and when the offButton is clicked on, the state is set to 1.

Writing tests for useEffect() Hook

For this example, we’ll be writing tests to add an item to cart using the useEffect Hook. The count of the item is also stored in the localStorage. The index.js file in the CodeSandbox below contains the actual logic used to add items to cart.

We’ll be writing tests to ensure that updating the cart item count is also reflected in the localStorage and even if there’s a page reload, the cart item count still persists.

import React from “react”;

import { render, fireEvent, getByTestId } from “react-testing-library”;

// import the App component

import App from “…/index”;


test(“cart item is updated”, () => {

// set the localStorage count to 0

window.localStorage.setItem(“cartItem”, 0);

// get the containing DOM node of your rendered React Element

const { container, rerender } = render(<App />);

// this references the add button which increments the cart item count

const addButton = getByTestId(container, “addButton”);

// this references the reset button which resets the cart item count

const resetButton = getByTestId(container, “resetButton”);

// this references the p tag that displays the cart item count

const countTitle = getByTestId(container, “countTitle”);


// this simulates clicking on the add button

fireEvent.click(addButton);

// the test expects the cart item count to be 1

expect(countTitle.textContent).toBe(“Cart Item - 1”);

// this imulates reloading the app

rerender(<App />);

// the test still expects the cart item count to be 1

expect(window.localStorage.getItem(“cartItem”)).toBe(“1”);

// this simulates clicking on the reset button

fireEvent.click(resetButton);

// the test expects the cart item count to be 0

expect(countTitle.textContent).toBe(“Cart Item - 0”);

});

In the test assertion function, we are first setting the cartItem in the localStorage to 0, which means the cart item count is 0. We then get both container and rerender from the App component via destructuring. The rerender allows us to simulate a page reload.

Next, we get references to the buttons and p tag which displays the current cart item count and set them to constant variables.

Once that’s done, the test then simulates clicking on the addButton and checks if the current cart item count is 1 and reloads the page, after which if it checks if the localStorage count, cartItem, is also set to 1. It then simulates clicking on the resetButton and checks if the current cart item count is set to 0.

Writing tests for useRef() Hook

For this example, we’ll be testing the useRef Hook and we’ll be using the original useRef example up above as a base for the test. The useRef hook is used to get the value from an input field and then set to a state value. The index.js file in the CodeSandbox below contains the logic of typing in a value and submitting it.

import React from “react”;

import { render, fireEvent, getByTestId } from “react-testing-library”;

// import the App component

import App from “…/index”;


test(“input field is updated”, () => {

// get the containing DOM node of your rendered React Element

const { container } = render(<App />);

// this references the input field button

const inputName = getByTestId(container, “nameinput”);

// this references the p tag that displays the value gotten from the ref value

const name = getByTestId(container, “name”);

// this references the submit button which sets the state value to the ref value

const submitButton = getByTestId(container, “submitButton”);

// the value to be entered in the input field

const newName = “Yomi”;


// this simulates entering the value ‘Yomi’ into the input field

fireEvent.change(inputName, { target: { value: newName } });

// this simulates clicking on the submit button

fireEvent.click(submitButton);

// the test expects the name display reference to be equal to what was entered in the input field.

expect(name.textContent).toEqual(newName);

});

In the test assertion function, we are setting the constant variables to the iput field, thep tag which displays the current ref value, and the submit button. We are also setting the value we’d like to be entered into the input field to a constant variable newName. This will be used to do checks in the test.

fireEvent.change(inputName, { target: { value: newName } });

The fireEvent.change method is used to enter a value into the input field and in this case, the name stored in the newName constant variable is used, after which the submit button is clicked on.

The test then checks if the value of the ref after the button was clicked is equal to the the newName.

Finally, you should see a There are no failing tests, congratulations!message in the console.

Thanks For Visiting, Keep Visiting


This post was originally published here

#reactjs #react-native #web-development

What is GEEK

Buddha Community

React Hooks Tutorial for Beginners
Autumn Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Abhishek Jaiswal

1607768450

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

Dipesh Malvia

Dipesh Malvia

1628751894

Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners

Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners

This video is a complete React Hooks Crash Course for beginners in. React hooks are building blocks of function component. We will cover each react hook with detailed explanation and examples. We will see how when we should use any react hook and when not. At last we will build a custom react hook.

🔥 Video contents... ENJOY 👇 

  • 0:00:00 - Intro 
  • 0:02:22 - useState 
  • 0:18:38 - useEffect 
  • 0:28:31 - useRef 
  • 0:38:33 - useMemo 
  • 0:49:16 - useCallback 
  • 0:58:56 - useContext 
  • 1:08:45 - useReducer 
  • 1:24:16 - Build Custom React Hook 
  • 1:36:47 - Outro

***Checkout my crash courses for get started with web development*** 

  • HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc 
  • CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc 
  • JavaScript Tutorial in 2 Hours - https://youtu.be/sptS-bgg8Ro 

🔗 Social Medias 🔗 

  • Twitter: https://twitter.com/IMDmalvia 
  • Facebook: https://www.facebook.com/programmingwithdipesh 
  • Instagram: https://www.instagram.com/dipeshmalvia 
  • LinkedIn: https://www.linkedin.com/in/dmalvia/ 

⭐️ Hashtags ⭐️

 #react #reacthooks #beginners #tutorial

Jeromy Lowe

Jeromy Lowe

1599097440

Data Visualization in R with ggplot2: A Beginner Tutorial

A famous general is thought to have said, “A good sketch is better than a long speech.” That advice may have come from the battlefield, but it’s applicable in lots of other areas — including data science. “Sketching” out our data by visualizing it using ggplot2 in R is more impactful than simply describing the trends we find.

This is why we visualize data. We visualize data because it’s easier to learn from something that we can see rather than read. And thankfully for data analysts and data scientists who use R, there’s a tidyverse package called ggplot2 that makes data visualization a snap!

In this blog post, we’ll learn how to take some data and produce a visualization using R. To work through it, it’s best if you already have an understanding of R programming syntax, but you don’t need to be an expert or have any prior experience working with ggplot2

#data science tutorials #beginner #ggplot2 #r #r tutorial #r tutorials #rstats #tutorial #tutorials

Hayden Slater

1599277908

Validating React Forms With React-Hook-Form

Validating inputs is very often required. For example, when you want to make sure two passwords inputs are the same, an email input should in fact be an email or that the input is not too long. This is can be easily done using React Hook From. In this article, I will show you how.

Required Fields

The most simple, yet very common, validation is to make sure that an input component contains input from the user. React Hook Form basic concept is to register input tags to the form by passing register() to the tag’s ref attribute. As we can see here:

#react-native #react #react-hook-form #react-hook