https://github.com/ericvicenti/react-fs-renderer

Declaratively render a tree of files with JSX
https://github.com/ericvicenti/react-fs-renderer

Last synced: 25 days ago
JSON representation

Declaratively render a tree of files with JSX

• Host: GitHub
• URL: https://github.com/ericvicenti/react-fs-renderer
• Owner: ericvicenti
• License: other
• Created: 2017-02-10T16:31:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-10T16:52:14.000Z (almost 8 years ago)
• Last Synced: 2024-10-10T11:52:01.499Z (about 1 month ago)
• Homepage: https://www.npmjs.com/package/react-fs-renderer
• Size: 29.3 KB
• Stars: 110
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: ReadMe.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-renderer - react-fs-renderer - Declaratively render a tree of files with JSX. (File)

README

        
# React FS Renderer [![CircleCI](https://circleci.com/gh/ericvicenti/react-fs-renderer.svg?style=svg)](https://circleci.com/gh/ericvicenti/react-fs-renderer)

Tired of using an imperitive API to manipulate a tree of output? React gives us a great declarative interface for browser DOMs and native view heirarchies, but it doesn't help output a directory of files with a given format.. until now!

First, install it (and you'll also need React):

```

npm install --save react react-fs-renderer

```

You'll need to compile JSX- see [this gist for the exact setup to do so](https://gist.github.com/ericvicenti/4a10c1349ba4ab0e4f6e6e2f95cfcfd8). Now you can use it:

```js

import React from 'react';

import {

  renderToFS,

} from 'react-fs-renderer';

const JSONFile = ({ name, json }) => (

  

);

const MyProjectTemplate = ({ name, displayName }) => (

  

    

    

    

      

    

  

);

renderToFS(

  ,

  './testDir'

);

```

This will create the following file tree:

```

./testDir/app.json

./testDir/package.json

./testDir/src/GreatApp.js

```

Now you can use React to declaratively render to files :-)

## About

This is a proof-of-concept implementation for the purpose of gathering feedback. If there is demand for this concept, I will maintain it and help move it to an organization for long-term stewardship.