https://github.com/ReactPrimer/ReactPrimer
React component prototyping tool that generates fully connected class component code.
https://github.com/ReactPrimer/ReactPrimer
boilerplate component component-hierarchy create-react-app developer-tools front-end-development generator javascript react react-boilerplate react-component react-devtools react-generators react-starter-kit reactjs skeleton visualization
Last synced: 9 days ago
JSON representation
React component prototyping tool that generates fully connected class component code.
- Host: GitHub
- URL: https://github.com/ReactPrimer/ReactPrimer
- Owner: ReactPrimer
- License: mit
- Created: 2017-10-31T17:20:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-23T20:41:12.000Z (about 8 years ago)
- Last Synced: 2023-10-26T05:17:07.636Z (over 2 years ago)
- Topics: boilerplate, component, component-hierarchy, create-react-app, developer-tools, front-end-development, generator, javascript, react, react-boilerplate, react-component, react-devtools, react-generators, react-starter-kit, reactjs, skeleton, visualization
- Language: JavaScript
- Homepage: http://react-primer.com/
- Size: 16.1 MB
- Stars: 741
- Watchers: 21
- Forks: 45
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-github-projects - ReactPrimer - React component prototyping tool that generates fully connected class component code. ⭐732 `JavaScript` (📦 Legacy & Inactive Projects)
README
# ReactPrimer · 
[](https://github.com/ReactPrimer/ReactPrimer/blob/master/LICENSE.md) [](https://github.com/ReactPrimer/ReactPrimer/releases/tag/1.0.0)
React Primer is a component prototyping tool that generates fully connected class component code.
## Setup
###### MacOS
1. [Download](https://github.com/ReactPrimer/ReactPrimer/releases/download/1.0.0/ReactPrimer.dmg) the latest release .dmg file.
2. Open the installer.
3. Move React Primer to your local application folder.
###### Windows
1. [Download](https://github.com/ReactPrimer/ReactPrimer/releases/download/1.0.0/ReactPrimer-win32-x64.zip) the latest .zip file.
2. Unpackage the .zip file.
3. Shortcut .exe file to destktop.
3. Follow installation process.
###### Linux
1. [Download](https://github.com/ReactPrimer/ReactPrimer/releases/download/1.0.0/React-Primer_1.0.0_amd64.deb) 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).
3. 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: hello@react-primer.com
## 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](LICENSE.md) file for details