reactide/reactide

Reactide is the first dedicated IDE for React web application development.

Reactide is the first dedicated IDE for React web application development.

Reactide is a cross-platform desktop application that offers a simulator, made for live reloading and quick React component prototyping. React brings an integrated suite of development tools to streamline react development. The days of flipping between browser, IDE, and server are over.

Reactide is in active development. Please follow this repo for contribution guidelines and our development road map.

Get right to coding

Reactide runs an integrated Node server and custom browser simulator. As projects evolve, the developer can continually track changes through live reloading directly in the development environment without the need for constant flipping to the browser. Reactide also offers integration with Create React App for faster project boilerplate configuration. The simulator and component tree are both functioning for all React applications.

State flow visualization.

Managing state across a complex React application is the biggest pain point of developing React apps. Reactide offers a visual component tree that dynamically loads and changes based on components within the working directory while giving information about props and state at every component. By navigating through a live-representation of the architecture of a project, developers can quickly identify and pinpoint the parent-child relationships of even the most complex applications.

The component tree works out-of-the-box by finding the entry point to your React application that you provide inside the reactide.config.js file.

Integrated Terminal for powerful commands and workflows

The terminal is the life and blood of any IDE, allowing for complex manipulation of the file system, node, and even build-tools. Reactide offers a compatible terminal for running commands in bin/bash for Unix, and cmd for Windows to provide powerful workflows to even seasoned developers.

Getting Started with Reactide

The Reactide IDE can be set up in two ways, the first is to bundle the electron app and run it as a native desktop App. The instructions are as follows:

1. go to your terminal and type the following:

git checkout 3.0-release
npm install
npm run webpack-production
npm run electron-packager

2. in your Reactide folder, navigate to the release-builds folder and double-click on Reactide (executable).

To check out Reactide in developer mode follow these instructions:

1. go to your terminal and type the following:

git checkout 3.0-release
npm install
npm run webpack-production
npm start

Setting up the Simulator

In order to take advantage of the live simulator, please follow the below steps in your project directory.

1. Go to the reactide.config.js file and change the .html and .js entry points to the relative path of your respective files.
2. In the terminal run: npm run reactide-server

For any questions, please look at the example project in the example folder for how to set-up webpack and dev-server.

Contributors

Jin Choi | Mark Marcelo | Bita Djaghouri | Pablo Lee | Ryan Yang | Oscar Chan | Juan Hart | Eric Pham | Khalid Umar | Rocky Liao

reactide's Issues

Was this project an april fools ? Doesn't work on windows or mac?

I'm really curious was this an april fools joke? did anyone get this to work? Not trying to be an a-hole to the creators if this is a real project I tried windows and mac and none of them work. This is a problem with most projects on github everyone is giving this project stars but the project don't work yet.... so why are people giving it a star? give it a star once it works if its real....

[Installation] npm install broken

Hi,
I'm trying to install ReactIDE, but when I use npm install there's an error :

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] No repository field.

and :

$ npm start

> [email protected] start /opt/reactide
> cross-env NODE_ENV=production electron .

/opt/reactide/node_modules/electron/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory

npm ERR! Linux 4.4.0-45-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `cross-env NODE_ENV=production electron .`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=production electron .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the reactide package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production electron .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs reactide
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls reactide
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /opt/reactide/npm-debug.log

I'm on a VM on vagrant.

Regards,
Fabrice

Project Dead?

Is the project dead?
Perhaps we could salvage some of the packages for atom itself?

AVD错误

/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.0.41/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 3
报这个错误如何解决？

General Use

Hi there!

Nice work so far! I would definitely like to contribute to this program in the future. I've gotten the document editor to open up and everything. So now I can open folders and dump it into the viewer(which is stellar by the way) but I have zero idea how the component tree-view works in the bottom left, or the manipulation pane on the top right? I wouldn't imagine that loading in the components is automated, but I couldn't find any controls to manually perform this function. I did cross my fingers and tried to load my own React project, though I still didn't get anything if that makes a difference.

I've also noticed some grammatical errors and things on the main site. Is there some place I can submit edits on those?

Add ESLint and ESLint-loader to webpack config

I think you should add linters at the very beginning, so that the project has a coding style.

No Download link on Reactide website...

http://reactide.io/download.html

On the website, there is no actual download link. Is the only way to run it from source?

debugger.html

Firefox is developing https://github.com/devtools-html/debugger.html which is written in React, and works in other browsers, such as Chrome.
Please see if you can share and integrate their fine work!

Installation & Usage Guide

Hi can you include an Installation Guide in the README?

I'm getting this error when I clone, and run npm install; npm start:

/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.1.5/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 3

I just have an empty black window, and none of the Mac menu items do anything.

Starting the IDE

Hi,

How do you start this IDE ? There are no explanations in the readme file.

Thanks for your help.

Ps : I'm a beginner.

Download link is broken

http://reactide.io/download.html The big "Download" link doesn't link to anything :(

How do I use it with my projects?

I followed below steps.

1. Clone the project
2. install dependencies
3. npm start

At 3rd step I was hoping for a interactive GUI. But actual was a electron browser with no content in it.

Can someone point me at the right direction ?

[Proposal] Create a simple guide "How to run"

It would be nice to create a simple guide about how to run the project locally.

Why is it profitable ?

1. People will know how to work with a project
2. The number of pull requests will increase
3. The project will grow faster

For example:

How to run locally ?

1. yarn install
2. yarn run dev-start

Failed to create a new project

I just installed the dependencies, and then runned npm run dev in a tab and npm start in another. The window appeared with a dark background but with no content. When I clicked in the menu Test and then in New project, this error alert popped:

I'm running with Node 7.7.3 and NPM 4.1.2.
I installed the dependencies with yarn in version 0.21.3.
Then I tried to run the same commands through yarn and this way I managed to see it working, but still I couldn't create a new project.

Is this Project dead?

Why is the installation still pending?

When I install it as a yarn, I stop it from waiting in electron installation and can not proceed.
Is it just me ..?

`
$ yarn install

yarn install v0.21.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "[email protected]" has unmet peer dependency "[email protected] || 0.20.x || 0.22.x".
[4/4] 📃 Building fresh packages...
[1/2] ⠁ electron
[2/2] ⠁ fsevents: info ok
[-/2] ⠁ waiting...
[-/2] ⠁ waiting...
[-/2] ⠁ waiting...
`

Eslint ?

All code need to be consistent. So strange that so popular project doesn't have eslint config in project

Translation : Persian

I wanna to translate this repository to persian language.

Please guide. 👍

Thanks.

Be awesome. 🚀

[Question] Unit Test Stack

I love wrote unit tests, and want help with this in that project, but for that I need to understanding why use a big complex stack of unit test if with jest we can use enzyme too but with a not complex approach :)

If you guys want to test you can create a this command on scripts:

"test": "jest --config jest.config.json --watch",
"test:cov": "jest --config jest.config.json --coverage",

And create an jest.config.json into root :)

{
    "testPathDirs": [
        "tests"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/node_modules/jest-enzyme/lib/index.js",
    "unmockedModulePathPatterns": [
        "node_modules/react",
        "node_modules/enzyme",
        "node_modules/jasmine-enzyme"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "coverageDirectory": "coverage",
    "coveragePathIgnorePatterns": [
        "/node_modules/"
    ],
    "collectCoverageFrom": [
      "src/**/*.js",
    ],
    "coverageReporters": [
      "html",
      "lcov"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 95,
        "branches": 95,
        "functions": 95,
        "lines": 95
      },
      "each": {
        "statements": 95,
        "branches": 95,
        "functions": 95,
        "lines": 95
      }
    }
}

Support for other "frameworks"?

Hi, this looks amazing 👋

Are you considering to support other frameworks in the future, maybe? :)

It would be great to benefit from Reactide's state flow visualization and other UI characteristics without being locked in to a particular framework.

monaco syntax problem

hi
  recently,i am developing a prototype tool which use monaco-editor,however i found that it doesn't support jsx syntax.
  since the reactide is also using with monaco-editor and makes the jsx syntax work ,i come here to look for some help.
thanks !!!!

Uncaught Error: Cannot find module '../dist/bundle.js'

I get this error when running the project

What's up with how dependencies are handled?

This project handles npm stuff (node_modules, yarn.lock) in some pretty unconventional ways.
Here are a couple examples:

node_modules in source control

Tracking node_modules in source control is generally pretty frowned upon.

Tracking generated files leads to unnecessary noise and bloat in your git history. Worse, since some dependencies are native and must be compiled, checking them in makes your app less portable because you’ll be providing builds from just a single, and possibly incorrect, architecture.

yarn.lock not in source control

Similarly, gitignoring yarn'lock is also generally pretty frowned upon.

All yarn.lock files should be checked into source control (e.g. git or mercurial). This allows Yarn to install the same exact dependency tree across all machines, whether it be your coworker’s laptop or a CI server.

---

A very nice pull request addressing both of these issues was closed without comment, which I assume means the current behavior is intentional.

It looks like many of the issues / submitted PRs coming in here are related to confusion around dependency management.

Because of that, I think an explanation of why things are done as they are in this project could clear up a lot of confusion for the community.

references:

https://yarnpkg.com/en/docs/yarn-lock#toc-check-into-source-control
https://devcenter.heroku.com/articles/node-best-practices#only-git-the-important-bits

For anyone curious, how to use Reactide in the current state

Hello,

if you want to use reactide as it is now, you will need to do few more steps.

1. Clone reactide repo
   • git clone https://github.com/reactide/reactide.git
   • cd ./reactide
2. Install dependencies
   • yarn or npm install
3. Create production build npm script and run it (or just use webpack in root of reactide repo)

"scripts": {
   "...": "...",
    "build": "webpack -p"
}

4. After running webpack, you should have new dist folder inside your repo
5. Finally, you can start reactide with yarn start or npm run start script
6. Reactide opens and if you open devtools, it should not have any errors
   
7. Now, probably everything you can do is Create New Project which can be located in MenuBar
   
8. And then, it looks something like this
   

Create .eslintrc file for project

I suggest creating an eslint configuration file for the project that encapsulates the expected style of the code. This will help ensure that pull requests follow the same style. A simple travis script could help validate all pull requests.

Hope it will not be another Deco

Come on , man!

[Proposal] Create a docker configuration

It would be nice to create a docker configuration to run the project locally without stress of installing more stuff on the host.

I think we can use the docker-node-yarn from kkarczmarczyk.

I'll try to add those docker conf in a pull request 😸 .

Cheers

Curious question

First of all, well done on a project like this. I've already spread the word through social media about this. This is going to help a lot of people! But I have one curious question.
Will it have a feature like in Visual Studio, where all you need to do is to click on a component and it automatically prepares the code for you? You know for example in Visual Studio, I just have to double-click the button for example and it automatically writes the class and I'll I have to do is to write my code without writing the whole class first.

[Proposal] Reactide name

Kind of weird calling it just "Reactide", IDE for React.js.
Maybe calling it something like "React Studio"?

There is "Visual Studio" , "Android Studio" , "Xcode" , "Xamarin" , etc.

Thought it would be good suggestion to change the name of the software product.

[Bug] Cross-env from last merge broke Linux experience

I'm on Ubuntu 14 and the cross-env broke my yarn run dev-start and yarn dev command :/ When I start electron they not called ReactIDE, but the mainly electron page asking for drag an app.

When I remove cross-env from commands they work fine :)

Nyancat is awesome, but not everywhere

Hi! @JiniHendrix I saw you added a nyancat progress bar for tests.
But it looks ugly on travis. Maybe we should change it?

Travis

https://travis-ci.org/reactide/reactide/builds/218567425

Local

Contributing

I would like to contribute to this project. Is there a roadmap? Any slack channel?

sh: 1: webpack-dev-server: not found

After cloning the project, running npm install and then running npm run dev I am getting the following error message.

sh: 1: webpack-dev-server: not found

Why npm install is ERROR?

npm run dev ,soon,localhost:8081 have a error,process is not defined at index 13.Who can tell me this error?

Project state/roadmap

Hello,
I would like to contribute. Project seems very young, and so "Projects" tab is still empty. Is there any roadmap or list of things to write to advance toward a first release?

Thanks.

Exception thrown when trying to start a new project

yarn -v v0.21.3
node -v v7.0.0
Operating System: Linux local 4.9.0-2-amd64 #1 SMP Debian 4.9.13-1 (2017-02-27) x86_64 GNU/Linux

Description:    Debian GNU/Linux 9.0 (stretch)
Release:        9.0
Codename:       stretch

Entry Point: yarn run start and yarn run dev

Description of the Problem
When trying to create a new project, an exception is thrown.

Uncaught Exception:
Error: ENOENT: no such file or directory, mkdir 'lib/temp/new-project'
    at Object.fs.mkdirSync (fs.js:855:18)
    at recurseThroughSource (/home/douglas/development/reactide/lib/copy-directory.js:23:12)
    at module.exports (/home/douglas/development/reactide/lib/copy-directory.js:32:3)
    at click (/home/douglas/development/reactide/main/menus/file.js:41:11)
    at MenuItem.click (/home/douglas/development/reactide/node_modules/electron/dist/resources/electron.asar/browser/api/menu-item.js:52:9)
    at Function.executeCommand (/home/douglas/development/reactide/node_modules/electron/dist/resources/electron.asar/browser/api/menu.js:121:15)

Expected Result
A prompt for the creation of a new project.

Not the only one

There is another IDE for React called "Deco" (https://www.decosoftware.com) but not as Robust, I am guessing using the screenshot, because I couldn't get this to work. Deco hasn't been updated for awhile and needs a better component library but it is an IDE. I don't want this to sound rude at all. I was just letting you know because I thought it may be of some interest.

How to install documentation

Maybe "How to install" section can be very helpful in Readme file. Is there any plan for this?

Thanks.

Is it still in WIP ?

I run tnpm run dev-start and tnpm run dev. It will show the IDE screen with some errors in console panel . I look deep into the code so that I find the reducer code seems like is still in working like this

const rootReducer = combineReducers({
 // gifs: GifsReducer
 // add reducer objects here
});

So I wonder it still work in progress or how can I fix the problem I meet to open this great project correctly.

failed to get a service for display 3

Reactide in browser

Hi, I use Cloud9 for my development environment, and I'm wondering if there's a way to run Reactide in browser, so I don't have to use Electron? I tried but it just took me to a black screen.

Atom integration

This project looks very exciting -- but I'm still wondering one thing. A lot of the proposed UI looks very similar to Atom. Is there a reason this project is being developed as a standalone IDE rather than an extension package for Atom? I feel it would be more convenient for users if they could just install a plugin on Atom. It might also allow you to reach a wider user audience, since Atom is already widely adopted.

Errors when trying the IDE

Hi,

First of all, the Reactide project looks great and I am very interested in trying it out and maybe contribute.

I am having problems in the console and it seems a lot of components are not loaded. I checkouted the project (e416738b) then I did :

$ yarn install

It seems the yarn.lock is not up-to-date since after this command, I have got 693 additions and 82 deletions according to git on the yarn.lock file.

After I tried :

$ yarn run dev-start
$ yarn run dev (in another tab)

The editor launches with the console opened and I have got this in the console :

I must have made a mistake somewhere ?

Screenshot of the window :

IDE isn't loading

I just cloned the repo, installed the dependencies using yarn and ran a yarn run dev on it, and this is what I see:

Am I missing something?

merge conflict in renderer/assets/styles.css

Found this while skimming code:

<<<<<<< HEAD
  /*float:right;*/
  position: absolute;
  right: 0px;
=======
  float: right;
>>>>>>> 567b80181c05917b48b24d6cde727a1b00dc366c

line 9492 (master branch)

how to run this project

after yarn install/npm install, how to run this project

does this work properly with redux containers?

webpack 2 configuration

I believe webpack 2 now has slightly different syntax than what we had in webpack 1. e.g. module.loaders are now module.rules.

Ref. https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

ide can't be started!!

here is my operation:
1.open two tabs to run npm-script dev and dev-start separately.
but it seems to get sucked in the tab which runs dev-start,want your help,thanks.

/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.0.41/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 6

I built this locally and got error:
/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.0.41/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 6

node: v6.10.0
npm: 4.0.5