Getting Started Cra

Getting started with Create React App

Let's create from scratch a Create React App project with LetsForm.

Start scaffolding an empty Create React App project with

npx create-react-app my-letsform-app

Now enter the project folder and select which UI library you wish to use, LetsForm uses the native components of the supported UI libraries (i.e. React, RSuite, AntD, etc), each library has a different build

cd my-letsform-app

Install LetsForm

npm i lets-form -D

then try a simple form with just one text field (or use the LetsForm Designer (opens in a new tab) to create one)

src/App.jsx

import React from 'react';
import LetsForm from 'lets-form/react;
 
// copied and pasted from LetsForm Designer
const MY_FORM = {
  "$schema": "https://unpkg.com/lets-form/schemas/react/form.json",
  "version": 1,
  "layout": "vertical",
  "validationMode": "onSubmit",
  "fluid": true,
  "fields": [
    {
      "component": "input-text",
      "label": "My Field",
      "name": "my_field"
    }
  ],
  "name": "Simplest example"
};
 
const App = () => {
  return (
    <LetsForm
      form={MY_FORM}
      // or onChange
      onSubmit={values => {
        alert(JSON.stringify(values, null, 2))
      }}
    />
  );
};
 
export default App;

Now launch the Create React App server

npm run start

and point the browser to http://localhost:3000/, you should see something like

Try to fill in the form and click "Submit", then inspect the values returned by onChange and onSubmit callbacks.

Now it's the time to try LetsForm Designer (opens in a new tab) for more complex forms!