reactprimer / reactprimer

React component prototyping tool that generates fully connected class component code.

ReactPrimer ·

React Primer is a component prototyping tool that generates fully connected class component code.

Setup

MacOS

1. Download the latest release .dmg file.
2. Open the installer.
3. Move React Primer to your local application folder.

Windows

1. Download the latest .zip file.
2. Unpackage the .zip file.
3. Shortcut .exe file to destktop.
4. Follow installation process.

Linux

1. Download the latest .deb file.
2. Unpackage the .deb file.
3. Type in React-Primer from the terminal.

Usage

• Name individual components, assign parent-child relationships, and add components to the project tree.

• Drag and drop individual components to restructure the hierarchy tree view.

• Export project to generate a folder of fully connected component classes.

• Save generated components locally to a new or existing project.

• Use Save/Load feature to revisit a prototype.

Forking Your Own Version

If you'd like to build your own version of React Primer:

1. Clone the repo and npm install dependancies.

2. Open one terminal and npm run dev to generate the webpack build.

3. Open another terminal and npm start to start Electron.

4. Uncomment line 23 require('electron-reload')(__dirname); for hot reloading (Optional).

5. Enable Devloper Tools (Optional).

     Chrome Developer Tool

         a. Uncomment line 45 mainWindow.webContents.openDevTools()

     React Developer Tool

         a. Uncomment line 78 const configValues = require('./config');

         b. Uncomment line 79 BrowserWindow.addDevToolsExtension(configValues.absolutePath);

         c. Create ./config in root directory:

{
  "absolutePath": "/Users/*User*/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/2.5.2_0"
}

Why

React Primer provides a visual representation of your project during the preliminary stages of development, before you write a single line of code.

This simple to use application saves time by generating component files that automatically require and render their child components based on the prototyped hierarchy.

React Primer’s component tree GUI makes it easy to test, edit, and re-export your component tree as many times as needed.

Contributing

Please submit issues/pull requests if you have feedback or message the React Primer team to be added as a contributor: [email protected]

Authors

Ken Lee (https://github.com/kenhughlee)

Kat Sampias (https://github.com/ksampias)

Vince Vuong (https://github.com/vincevuong)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

reactprimer's Issues

Support different ways of creating components

Currently it seems to export a full on React.Component. What about React.PureComponent, and just returning a const with a render function, e.g.:

import React from 'react';

export default ({title}) => (<div>{title}</div>);

Add support for component props and app state

Would be awesome to support adding props, and potentially state

Support create directory feature.

Hi, I have just downloaded and used the app. It's awesome. However, It would be more awesome if it had directory creation support. I think every one need it in their project, I hope this feature will be added in the future.
Thanks!

Ubuntu package broken

Hi! The Ubuntu installer is broken. It installs a symlink to an unknown location:

It tries to find /usr/lib/React-Primer/*React-Primer*/, but the file is /usr/lib/React-Primer/*Reactprimer*/:

Running that Reactprimer file works fine.

create-component-app integration

Hi guys!
I really like your project idea, it could be very useful to the community 🙂

I'm texting to you because it would be great if we can work together to integrate my library into your product to have different templates options and create new features for both of them.

create-component-app is a tool to generate different types of React components from the terminal.
But I can work to expose the APIs to make it accessible to others (for example from your GUI).

What do you think about it?

Thank you again to make the community a better place 🌮

edit: #50 #49 #48 #47

Support renaming components

The title says it all…
A typo is easily made, but fixing it could be easier in this app.
The most intuitive method I can think of, is making the labels editable.

What is the future of this project?

are there going to be some advanced features or this is the end, like

• Advanced JSX or Designing layouts
• Creating forms
• Different types of components (functional etc)
• Creating state or props for components
• and much more e.g. adding features from this React UI Builder Struct : https://github.com/ipselon/structor