npx create-react-app form-builder
cd form-builder
npm start

הגדרת מבנה ה-Form Builder
נתחיל בהגדרת מבנה הבסיס של ה-Form Builder. ניצור קומפוננטה ראשית בשם FormBuilder שתכיל את כל שדות הטופס ואת הפונקציונליות לניהול הטופס:

import React, { useState } from 'react';

function FormBuilder() {
  const [fields, setFields] = useState([]);

  const addField = (type) => {
    setFields([...fields, { type, value: '' }]);
  };

  return (
    <div>
      <button onClick={() => addField('text')}>Add Text Field</button>
      <button onClick={() => addField('email')}>Add Email Field</button>
      <form>
        {fields.map((field, index) => (
          <div key={index}>
            <input 
              type={field.type} 
              value={field.value} 
              onChange={(e) => {
                const newFields = [...fields];
                newFields[index].value = e.target.value;
                setFields(newFields);
              }} 
            />
          </div>
        ))}
      </form>
    </div>
  );
}

export default FormBuilder;

const addField = (type) => {
  setFields([...fields, { type, value: '' }]);
};

return (
  <div>
    <button onClick={() => addField('text')}>Add Text Field</button>
    <button onClick={() => addField('email')}>Add Email Field</button>
    <button onClick={() => addField('number')}>Add Number Field</button>
    <button onClick={() => addField('date')}>Add Date Field</button>
    <button onClick={() => addField('password')}>Add Password Field</button>
    <form>
      {fields.map((field, index) => (
        <div key={index}>
          <input 
            type={field.type} 
            value={field.value} 
            onChange={(e) => {
              const newFields = [...fields];
              newFields[index].value = e.target.value;
              setFields(newFields);
            }} 
          />
        </div>
      ))}
    </form>
  </div>
);

const addField = (type, label) => {
  setFields([...fields, { type, label, value: '' }]);
};

return (
  <div>
    <button onClick={() => addField('text', 'Text Field')}>Add Text Field</button>
    <button onClick={() => addField('email', 'Email Field')}>Add Email Field</button>
    <button onClick={() => addField('number', 'Number Field')}>Add Number Field</button>
    <button onClick={() => addField('date', 'Date Field')}>Add Date Field</button>
    <button onClick={() => addField('password', 'Password Field')}>Add Password Field</button>
    <form>
      {fields.map((field, index) => (
        <div key={index}>
          <label>{field.label}</label>
          <input 
            type={field.type} 
            value={field.value} 
            onChange={(e) => {
              const newFields = [...fields];
              newFields[index].value = e.target.value;
              setFields(newFields);
            }} 
          />
        </div>
      ))}
    </form>
  </div>
);

const saveForm = () => {
  localStorage.setItem('formFields', JSON.stringify(fields));
};

const loadForm = () => {
  const savedFields = JSON.parse(localStorage.getItem('formFields'));
  if (savedFields) {
    setFields(savedFields);
  }
};

return (
  <div>
    <button onClick={() => addField('text', 'Text Field')}>Add Text Field</button>
    <button onClick={() => addField('email', 'Email Field')}>Add Email Field</button>
    <button onClick={() => addField('number', 'Number Field')}>Add Number Field</button>
    <button onClick={() => addField('date', 'Date Field')}>Add Date Field</button>
    <button onClick={() => addField('password', 'Password Field')}>Add Password Field</button>
    <button onClick={saveForm}>Save Form</button>
    <button onClick={loadForm}>Load Form</button>
    <form>
      {fields.map((field, index) => (
        <div key={index}>
          <label>{field.label}</label>
          <input 
            type={field.type} 
            value={field.value} 
            onChange={(e) => {
              const newFields = [...fields];
              newFields[index].value = e.target.value;
              setFields(newFields);
            }} 
          />
        </div>
      ))}
    </form>
  </div>
);