amarg26

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 or the button on the upper right corner for all the code & slides you need for our workshop!

amarg26

#Add stylelint, eslint and prettier config file
git clone https://github.com/gcnit/code-template.git

#Rename folder to your project name
mv code-template <folder-name>

#Go to folder
cd <folder-name>

#Remove .git folder

amarg26

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

amarg26

C:\Users\admin\Desktop>npx create-react-app your-app

Creating a new React app in C:\Users\admin\Desktop\your-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.17.3
info No lockfile found.

amarg26

require('isomorphic-fetch');
require('dotenv').config();

const fs = require('fs');
const express = require('express');
const session = require('express-session');
const RedisStore = require('connect-redis')(session);
const path = require('path');
const logger = require('morgan');

amarg26

secret option required for sessions
Error: secret option required for sessions
    at session (C:\Users\User\Documents\shopify-node-app\node_modules\express-session\index.js:199:12)
    at Layer.handle [as handle_request] (C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\index.js:275:10)
    at logger (C:\Users\User\Documents\shopify-node-app\node_modules\morgan\index.js:144:5)
    at Layer.handle [as handle_request] (C:\Users\User\Documents\shopify-node-app\node_modules\express\lib\router\layer.js:95:5)

amarg26

console.log("it's me");

amarg26

import React from "react";
import ForgotPassword from "../Login/ForgotPassword";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
class LoginForm extends React.Component {
  state = {
    fields: {},
    errors: {}
  };

  handleChange = e => {

amarg26

import React from "react";
import LoginForm from "../Login/LoginForm";
import RegisterForm from "../Login/RegisterForm";
import { BrowserRouter, Route, Switch } from "react-router-dom";
class LoginPage extends React.Component {
  state = {
    isValidated: false
  };

  validate = () => {

amarg26

import React from "react";
//import { Link, NavLink, Router } from 'react-router-dom';
//import { Route } from 'react-router-dom';
const json = require('../HomePopularCards/carddata.json');


const Card = props => {
  return (
    <div className="card card-project" style={{ width: "18rem" }}>
      <img className="card-img-top" src={props.profileProjectImage} alt="" />