Skip to content

Latest commit

 

History

History
47 lines (28 loc) · 1.64 KB

Part_2_React.md

File metadata and controls

47 lines (28 loc) · 1.64 KB

Part 2 - React.js

Learning JS Together - React (#2)

📺 YouTube Live: https://youtu.be/7hC0HpkBw8g

We will be converting a jQuery-based Kintone Plug-in to a React version. Specifically, we will be focusing on the Plug-in's config settings page in this episode.

Steps:

  1. Create React App
  2. Simplifying the boilerplate code
  3. Getting the original settings page code
  4. Setup HTML Rendering
  5. npm run build

Notes

Starting Point

Table-Utility-Plug-in/blob/main/1_Starting_Point/src/js/config.js

Command to create a sample React App to get you started with a React project

npx create-react-app

Table-Utility-Plug-in/1_Starting_Point/src/css/

React.StrictMode is a tool for highlighting potential problems in an application. Strict mode checks are run in development mode only; they do not impact the production build.

Strict Mode – React

Moved config.html --> App.js

We want main.[hash].chunk.js after the npm run build command

Create React App Doc | Creating a Production Build https://create-react-app.dev/docs/production-build/

How do I add CSS classes to components?

Pass a string as the className prop

Styling and CSS – React