React w/ Hooks + Amplify + GraphQL
The launch of Hooks in React 16.8 made managing state simple, but most of the documentation is written using Redux examples, such as Amplify API for React.
So for those who are learning React with Hooks without leveraging Redux, a simple example using Amplify + React w/ Hooks + GraphQL is more than welcome, so this Todo application will help you to understand how to perform a simple CRUD using Amplify with Hooks.
*On this article we assume that you understand React components and props.
However, I highly recommend new javascript developers to master Redux basics component lifecycle in order to translate most of the examples that you will find in documentations.
Trust me it will save you time, well here is the example:
First things first, create your react-app
npx create-react-app my-app
cd my-app
npm start
Secondly, install Amplify
npm install -g @aws-amplify/cli
amplify configure
Then set up your back-end
amplify init
Create your API and push it
amplify add api
amplify push
Great! We have our back-end live and now we can leverage the beauty of React w/ Hooks.
Create your Handles to list, add and delete your todos.
JTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1Yi5jb20lMkZ3dnhhdmllciUyRjY4YTQ3OTJjNjFiYjcxZTIzODllZGQ1MzQ4ODE5ZjE2LmpzJTIyJTNFJTNDJTJGc2NyaXB0JTNF
Create your components, our application imports react-strap for styling but you can keep it simple and use pure JSX.
JTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1Yi5jb20lMkZ3dnhhdmllciUyRjI2YmVlYTczYjdjYjZkMjA5MzExZjc5ZWQ0ZWM3Y2E4LmpzJTIyJTNFJTNDJTJGc2NyaXB0JTNF
Hooks!
We have our functions and now its time to add state to our component.
JTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1Yi5jb20lMkZ3dnhhdmllciUyRmExZTE4NjAxZDM5YmUzMjIzN2U3ODBmYmU4Njk3YTY5LmpzJTIyJTNFJTNDJTJGc2NyaXB0JTNF
In order to refresh our todo list during the component Lifestyle use useEffect and include your query your todo list into our useEffect hook.
JTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1Yi5jb20lMkZ3dnhhdmllciUyRjM5YmI5OGFkNTMwZjA0ZTNkMjI2NDQzYWFlNjc5NjQwLmpzJTIyJTNFJTNDJTJGc2NyaXB0JTNF
Give to useEffect an empty array as the second argument, If you don’t pass an array into the useEffect Hook, your component will continuously reload repeatedly.
♾️
Result:
Play around and check how simple is to manage your component state using Hooks!
🙂
You can check the project on GitHub repository:
aHR0cHMlM0ElMkYlMkZnaXRodWIuY29tJTJGd3Z4YXZpZXIlM0Z0YWIlM0RyZXBvc2l0b3JpZXM=[promo_banner image=”2230″ style=”shadow” text_alignment=”center” content_width=”100″ woodmart_css_id=”5ffff22d5f001″ link=”url:https%3A%2F%2Fgithub.com%2FDNXLabs%2F|||” title=”Click here to access our open-source projects on GitHub!” hide_btn_tablet=”no” hide_btn_mobile=”no” increase_spaces=”no” img_size=”medium”][/promo_banner]
[html_block id=”1164″]
[html_block id=”1336″]
