# React & REST API Workshop Version 3 ## Let's POST Data to a Web Database From a React Component Thank you for attending our 2nd **Kintone x React** workshop! Use the following files to follow along! ### Download Links Click [**here**](https://gist.github.com/ahandsel/556e42aad59ff22604a9042174c556bc/archive/master.zip) or the  button on the upper right corner for all the code & slides you need for our workshop! --- ## Outline * [📎 PREREQUISITE](#-prerequisite) * [💾 Install Node & npm](#-install-node--npm) * [🕹️ Install a Sample React App](#️-install-a-sample-react-app) * [🚀 Getting your FREE Kintone Database](#-getting-your-free-kintone-database) * [📺 Quick Videos Going Over the Prep Work](#-quick-videos-going-over-the-prep-work) * [📚 Suggested Reading](#-suggested-reading) * [Details at dev.to](#details-at-devto) * [Overview of the Workshop](#overview-of-the-workshop) --- ## 📎 PREREQUISITE ### 💾 Install Node & npm * Node ≥ 10.16 and npm ≥ 5.6 are required for this workshop * Confused? 🤔 → Check out the [Video Guides](#-quick-videos-going-over-the-prep-work) ### 🕹️ Install a Sample React App * Create a `myproject` folder * We will be starting from the publicly available [sample React App](https://create-react-app.dev/). * Confused? 🤔 → Check out the [Video Guides](#-quick-videos-going-over-the-prep-work) ### 🚀 Getting your FREE Kintone Database #### ① Sign-Up for Developer Program Account (Website) 🌐 * [bit.ly/KDP_signup](https://bit.ly/KDP_signup) * ⚠ Do NOT use Safari * ⚡Accept Cookies First * ✅ Use Chrome & Firefox #### ② THEN Create a Kintone Subdomain (Database) 📂 * [bit.ly/K_DevLic](http://bit.ly/K_DevLic) * ⚡ Only use lowercase, numbers, & hyphens in your subdomain * ⚠ Do not use uppercase nor special characters Confused? 🤔 → Check out the [Video Guides](#-quick-videos-going-over-the-prep-work) --- ### 📺 Quick Videos Going Over the Prep Work | Install Node & Sample React App | Signing Up for Kintone | | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | [](https://youtu.be/4Kw-i_rX3tY) | [](https://youtu.be/Gzz8SbTuoFg) | --- ## 📚 Suggested Reading We advise you to have a look through the following React documents beforehand: 1. [Hello World](https://reactjs.org/docs/hello-world.html) 2. [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html) 3. [Rendering Elements](https://reactjs.org/docs/rendering-elements.html) 4. [Components and Props](https://reactjs.org/docs/components-and-props.html) ## Details at [dev.to](https://dev.to/will_yama/series/11707) [](https://dev.to/will_yama/series/11707) Check out Will's [React & REST API Series' Articles](https://dev.to/will_yama/series/11707) at [dev.to](https://dev.to/will_yama/series/11707) Community 👩‍💻👨‍💻! --- ## Overview of the Workshop | Parts | Type | Description | | ------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------ | | [Prep](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-01_prep-md) | Setup Guide | Everything you need to do before the workshop | | [Part A](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-a_promiseerror_demo-md) | Demo | Quick demo using promises in React | | [Part B](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-b_hooks-md) | **Live Coding** | Let's use `useState` & `useEffect` Hooks instead | | [Part C](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-c_kintonedatabase-md) | Setup Guide | Create a Kintone account & a database app | | [Part D](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-d_cors_error_demo-md) | Demo | Quick demo that results in CORS error | | [Part E](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-e_expressserver-md) | Setup Guide | Let's install the *backend* Express server | | [Part F](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-f_get_data-md) | Demo | Getting data from the Kintone App | | [Part G](https://gist.github.com/ahandsel/813e642bf36008192708c50a23185935#file-g_post_data-md) | **Live Coding** | Posting data to the Kintone App |