Как добавить возможность передавать json в react приложение, а затем этим же приложением перезаписывать его (сохранять этот файл локально)?

Question

[Leonardo-lavanda]

Допустим, я бы хотел получать json в этом коде, и перезаписывать его (сохранять обновленные данные). Так как сделано в коде, к сожалению, не получится из-за того, что fs не входит в реакт приложение. Каким образом можно реализовать?

import React from 'react';
import './App.css';

// components 
import Sidebar from './components/Sidebar/Sidebar.js'


// data
let webComponents = require('./data/web-components.json');

fs = require('fs');

fs.appendFile('file', 'path to file');



class App extends React.Component {

  constructor() {
    super();
  }
 
  render() {
     return (
        <div className='App'>
          <Sidebar items={webComponents} />
        </div>
      );
  }
}

export default App;

Answer 1

[kova1ev]

Приложение на реакте будет работать на клиентской машине. Никаких файлов на клиентской машине прочитать/записать не получится. Схема может быть такой: реакт приложение шлет запрос на бэкенд -> бэкенд считывает данные из файла и отправляет их клиентскому приложению -> данные в клиентском приложении меняются и отправляются назад на бекэнд -> бекэнд записывает файл с новыми данными.

Либо юзать localStorage, но тогда, для json-данные будут разными для каждой машины.