郝 玉华

郝 玉华

1660885461

在 React 中构建一个可拖动的滑块

网站滑块是灵活的用户界面元素,有助于共享多个图像或有效地传达信息,而不会浪费主页上的宝贵空间。

在本文中,我们将演示如何使用react-draggable-slider包在 React 中构建具有可拖动功能的滑块。

什么是滑块?

网站滑块是一种幻灯片,可显示在单个空间内水平或垂直排列的一系列图像或项目。图像在定义的时间段内单独显示,在从一个图像或项目到下一个图像或项目的变化之间具有过渡效果。

用户可以使用一组导航控件在滑块图像中导航,并且图像或项目也可以循环播放。滑块可以帮助网站以视觉上吸引人的方式展示单个项目,同时还可以节省屏幕空间。

展示客户推荐的网站滑块可能有利于与新潜在客户建立信任和信誉。滑块还可用于显示不同的服务产品或显示产品的多个图像,以便潜在客户可以从不同角度对其进行可视化。

这种类型的 UI 元素对于长页面的滚动内容来说是一个有吸引力的选择。使用滑块,您可以将信息分组到一个位置,为每个项目之间的循环设置舒适的节奏,甚至添加自动播放功能。

什么是可拖动滑块?

可拖动的滑块是手动导航的;用户通过按住并向左或向右拖动当前视图中的项目来从一个项目导航到下一个项目。要查看下一个项目,用户按住当前项目并将其拖到左侧。同样,要查看前一个项目,用户按住当前项目并将其拖动到右侧。

什么是反应可拖动滑块?

要在 React 中创建可拖动的滑块,我们可以从头开始构建它,也可以使用 React 包。

使用 React 包可以提高你的工作效率,因为它会减少你编写代码的时间。但是,这确实意味着您的代码库将依赖于(并且可能容易受到)包的影响。这就是为什么最好选择一个有大型社区贡献的开源包,发现、报告和修复错误,从而保证代码的安全。

对于本文,我们将使用 react-draggable-slider 包。该软件包易于使用,并带有内置的悬停效果。

React 可拖动滑块演示

为了演示在 React 中构建可拖动滑块,我们将设置一个 React 应用程序,安装 react-draggable-slider 包,然后创建滑块并定义滑块设置。

让我们开始吧!

创建 React 应用程序

使用以下命令创建一个 React 应用并为其命名react-draggable-slider

npx create-react-app react-draggable-slider

现在,在您选择的代码编辑器中打开应用程序。在这个演示中,我将使用 VS Code。

安装 react-draggable-slider 包

在撰写本文时,react-draggable-slider 包与 React v18 不兼容,这是我们在创建 React 应用程序时将获得的 React 版本。

因此,如果我们现在尝试使用 command: 安装滑块包npm i react-draggable-slider,它将不会被安装,并且我们会在终端中收到依赖冲突错误,如下所示:

依赖冲突错误

作为一种解决方法,我们需要将 React 应用程序中的react包和react-dom包的版本降级到 v16,以便与 react-draggable-slider 包兼容。

在创建应用程序时无法指定所需的 React 版本,这就是我们需要在降级版本之前创建应用程序的原因。

首先,导航到package.json文件并将react包和react-dom包的版本从 v18.1.0 更改为 v16.13.1。

npm install接下来,在终端中运行命令: 。这将自动将我们文件夹中的当前版本替换为node_modules我们在文件中指定的新版本package.json

现在我们准备安装滑块包:

npm i react-draggable-slider

此时,我们不应在终端中看到任何错误。要在浏览器中查看应用程序,请使用以下任一命令运行 React 应用程序:

npm start
yarn start

你会在浏览器中注意到一个关于react-dom/client找不到 React 模块的新错误。发生此错误是因为我们使用的是 React v16。

未找到模块错误

为了解决这个错误,我们需要index.js通过更改模块的文件路径来对我们的文件进行一些修改。

导航到index.js文件并从以下位置更改导入的文件路径ReactDom

import ReactDOM from 'react-dom/client';

至:

import ReactDOM from 'react-dom';

接下来,我们需要调整将 React 应用程序渲染到 DOM 的方式。为此,请更改用于呈现 React 应用程序的代码:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

至:

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

现在,返回并在浏览器中查看该应用程序。您应该看到应用程序的内容没有任何错误:

应用程序没有错误

好的,我们已经创建了我们的应用程序;现在是时候创建我们的可拖动滑块了。

创建滑块

要构建滑块,请进入App.js文件并删除当前jsx元素(即Header),因为它不需要。Slider我们将用我们将从中导入的组件替换此元素react-draggable-slider。我们还将一个sliderSettings对象作为道具传递到我们Slider稍后将创建的组件中。

import Slider from "react-draggable-slider";

…

<div className="App">
     <Slider sliderSettings={sliderSettings} />
</div>

接下来,我们将创建一个名为 的对象数组projectList。我们将使用这个数组来存储将在滑块的每张幻灯片上显示的项目。

const projectList = [
    {
      title: "Nature's Life",
      image: project1,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Into The Waters",
      image: project2,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    },
    {
      title: "Higher Than The Stars",
      image: project3,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      title: "Miniature Wonders",
      image: project4,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Giants Of History",
      image: project5,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    }
  ];

定义滑块设置

现在,我们将定义我们的滑块设置;这些将被传递到我们的滑块中以配置其行为。

我们将首先创建一个名为的对象,该对象sliderSettings 具有以下属性:dataspeedeasingbgColorshowButtonbuttonTextbuttunHrefbuttonTarget。这些道具定义了我们的滑块将如何表现以及如何显示。

数据

dataprop 接受一个数组。对象数组表示将要显示的滑块中的项目或幻灯片的详细信息;在我们的例子中,projectList. 每个对象接受三个键值对:titleimagedescription。默认情况下,dataprop 设置为空数组,[].

速度

speedprop 接受一个整数。它确定滑块在拖动到下一个或上一个项目时应该前进的速度(以毫秒为单位)。例如,speed3000 的值等于 3 秒。默认speed属性值为 500 毫秒。

缓和

easingprop 接受一个字符串。有四种可用的GSAP缓动用于动画滑动:power、back、elastic 和 expo。尝试每一个,然后选择你最喜欢的一个。如果没有指定值,easingprop 值将默认为ease浏览器的默认值。

背景颜色

bgColorprop 接受一个字符串。它设置整个滑块的背景颜色并接受 HEX 和 RGB(A) 值。例如,#ffffffrgba(255, 255, 255, 0.05)。该bgColor道具的默认值为rgba(255, 255, 255, 0.05).

显示按钮

showButton道具接受一个布尔值。如果设置为true,将为每个项目或幻灯片显示一个按钮;showButton但是,如果prop 设置为,则不会显示任何按钮false。默认情况下,showButtonprop 值设置为true.

按钮文本

buttonTextprop 接受一个字符串。它表示将在每个项目的按钮内显示的文本。默认情况下,该值设置为View case study

按钮Href

buttonHrefprop 接受一个字符串。该字符串是一个href属性,允许滑块中的每个项目链接到另一个页面,从而使用户能够查看有关该项目的其他详细信息。默认情况下,buttonHrefprop 值设置为 #。

按钮目标

buttonTargetprop 接受一个字符串。当用户点击一个按钮时,这个属性指定链接应该在当前页面还是在不同的页面上打开。该值可以是_self_blank。默认情况下,buttonTargetprop 值设置为_blank.

让我们从只传入dataprop 开始,看看我们的滑块会是什么样子。

const sliderSettings = {
    data: projectList,
  };

这里

如果我们在浏览器中查看我们的滑块,我们可以看到它具有前面描述的默认 react-draggable-slider 属性。现在,让我们用我们的首选值传递其余的道具。由于我们没有为easingprop 指定值,因此它将默认为ease.

const sliderSettings = {
    data: projectList,
    speed: 3000,
    bgColor: "#070707",
    showButton: true,
    buttonText: "View projects",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

我们还将在我们的styles.css文件中为我们的 body 和锚标记编写一些样式,这也是我们的号召性用语按钮,然后将文件导入到我们的App.js文件中。

正文 { 字体系列:无衬线;文本对齐:居中;背景颜色:#070707;颜色:#fff; } a:link, a:hover, a:active, a:visited { color: #eee; 边框顶部:1px 实心 #434141; 边框底部:3px 实心 #434141; 边框半径:20px;}

此时,我们的App.js文件应如下所示:

import React from "react";
import Slider from "react-draggable-slider";
import "./styles.css";
import project1 from "./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg";
import project2 from "./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg";
import project3 from "./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg";
import project4 from "./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg";
import project5 from "./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg";

export default function App() {
  const projectList = [
    {
      title: "Nature's Life",
      image: project1,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Into The Waters",
      image: project2,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    },
    {
      title: "Higher Than The Stars",
      image: project3,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      title: "Miniature Wonders",
      image: project4,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Giants Of History",
      image: project5,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    }
  ];

  const sliderSettings = {
    data: projectList,
    speed: 3000,
    easing: "ease",
    bgColor: "#070707",
    showButton: true,
    buttonText: "View projects",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

  return (
    <div className="App">
      <Slider sliderSettings={sliderSettings} />
    </div>
  );
}

这是带有新 CSS 样式的滑块:

这里

您会注意到我们更改了文本颜色,以及页面和滑块的背景颜色。我们还设置了按钮的样式并更改了它的文本值。如果我们使用powerGSAPeasings对滑动进行动画处理,滑动动画将如下所示:

这里

您可以自行尝试其他easing道具选项并选择您最喜欢的道具,并尝试其他道具值。

您还会注意到,当光标移到图像卡上时,图像卡具有很好的悬停效果。这是 react-draggable-slider 的一个很酷的内置功能。

这里

结论

在本教程中,我们展示了使用 react-draggable-slider 包在 React 中创建可拖动滑块是多么容易。我们演示了如何弥补最新版本的 React 的兼容性问题。我们还展示了如何修改 react-draggable-slider 的默认设置以自定义滑块的样式和动画。

 来源:https ://blog.logrocket.com/building-draggable-slider-react/ 

#react 

What is GEEK

Buddha Community

在 React 中构建一个可拖动的滑块
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

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

  • React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
  • React.js and React Native have similar syntax and workflows, but their implementation is quite different.
  • React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
  • React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

  • United States- $120,000
  • Canada - $110,000
  • United Kingdom - $71,820
  • The Netherlands $49,095
  • Spain - $35,423.00
  • France - $44,284
  • Ukraine - $28,990
  • India - $9,843
  • Sweden - $55,173
  • Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

  • Conduct thorough candidate research, including portfolios and areas of expertise.
  • Before you sit down with your interviewing panel, do some homework.
  • Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

Franz  Becker

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App typeIsomorphic (universal)Single-page applicationSingle-page application
Frontend
LanguageJavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)
LibrariesReact, History, Universal RouterReact, History, ReduxReact, History, Redux
RoutesImperative (functional)DeclarativeDeclarative, cross-stack
Backend
LanguageJavaScript (ES2015+, JSX)n/aC#, F#
LibrariesNode.js, Express, Sequelize,
GraphQL
n/aASP.NET Core, EF Core,
ASP.NET Identity
SSRYesn/an/a
Data APIGraphQLn/aWeb API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox  

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react 

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers

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