reactide / reactide Goto Github PK
View Code? Open in Web Editor NEWReactide is the first dedicated IDE for React web application development.
Home Page: https://reactide.io
License: MIT License
Reactide is the first dedicated IDE for React web application development.
Home Page: https://reactide.io
License: MIT License
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.
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.
http://reactide.io/download.html
On the website, there is no actual download link. Is the only way to run it from source?
I wanna to translate this repository to persian language.
Please guide. 👍
Thanks.
Be awesome. 🚀
Come on , man!
Hi! @JiniHendrix I saw you added a nyancat progress bar for tests.
But it looks ugly on travis. Maybe we should change it?
https://travis-ci.org/reactide/reactide/builds/218567425
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.
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.
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
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 !!!!
Found this while skimming code:
<<<<<<< HEAD
/*float:right;*/
position: absolute;
right: 0px;
=======
float: right;
>>>>>>> 567b80181c05917b48b24d6cde727a1b00dc366c
line 9492 (master branch)
All code need to be consistent. So strange that so popular project doesn't have eslint config in project
after yarn install/npm install, how to run this project
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.
/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
报这个错误如何解决?
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
I think you should add linters at the very beginning, so that the project has a coding style.
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.
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
Is the project dead?
Perhaps we could salvage some of the packages for atom itself?
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.
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
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.
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.
It would be nice to create a simple guide about how to run the project locally.
For example:
yarn install
yarn run dev-start
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.
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.
I followed below steps.
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 ?
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?
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.
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.
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...
`
npm run dev ,soon,localhost:8081 have a error,process is not defined at index 13.Who can tell me this error?
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.
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 :
Maybe "How to install" section can be very helpful in Readme file. Is there any plan for this?
Thanks.
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
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....
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
}
}
}
I would like to contribute to this project. Is there a roadmap? Any slack channel?
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!
Hello,
if you want to use reactide
as it is now, you will need to do few more steps.
reactide
repo
git clone https://github.com/reactide/reactide.git
cd ./reactide
yarn
or npm install
reactide
repo)"scripts": {
"...": "...",
"build": "webpack -p"
}
dist
folder inside your reporeactide
with yarn start
or npm run start
scriptCreate New Project
which can be located in MenuBarI 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
Hi,
How do you start this IDE ? There are no explanations in the readme file.
Thanks for your help.
Ps : I'm a beginner.
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 :)
http://reactide.io/download.html The big "Download" link doesn't link to anything :(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.