Giter VIP home page Giter VIP logo

reactide's Introduction

reactide

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.

Reactide Screenshot

Get right to coding

Reactide runs an integrated Node server and custom browser simulator, which works best with Webpack and Webpack dev-server. 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 Create-React-App made 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 by finding the entry point to your React application from the webpack.config.js file. It works out-of-the-box with Create React App.

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 2.0-release
npm install
npm run webpack
npm run electron-packager
  1. 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 2.0-release
npm install
npm run webpack
npm start

Beware: the close simulator button works by creating a child node process and executing killall node on close, clicking on the 'close simulator' button in developer mode will cause the electron app to close as well.

Setting up Webpack dev-server to work with Simulator

In order to take advantage of the live simulator, please follow the below steps in your project directory. We are assuming you have a basic webpack config file, which you can find an example of in our repo under the example folder.

  1. npm install webpack dev-server -D
  2. Go to your webpack.config.js file and add the following lines of code. Make sure you set the port to 8085.
    devServer: {
       publicPath: path.resolve(__dirname, '/build/'),
       port: 8085,
       hot: true,
     },
    plugins: [
       new webpack.HotModuleReplacementPlugin(),
     ],
    mode: 'development',
  1. Go to your package.json and add the following scripts under the "scripts" object:
"dev-server": "webpack-dev-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

reactide's People

Contributors

bitadj avatar chanoscar0 avatar hit1st avatar isnifer avatar markmarcelo avatar pablolee89 avatar znk avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.