ReacType 4.0.0 (Windows)

New Features:

• View dynamically created components/HTML elements in the component tree
• Typescript syntax for React
• Code preview is fully editable (make changes before exporting project)
• Create custom HTML elements
• Improved UI experience
• Comprehensive tutorial with images

ReacType 4.0.0 (Mac)

New Features:

• View dynamically created components/HTML elements in the component tree
• Typescript syntax for React
• Code preview is fully editable (make changes before exporting project)
• Create custom HTML elements
• Improved UI experience
• Comprehensive tutorial with images

ReacType 4.0.0 (Linux)

New Features:

• View dynamically created components/HTML elements in the component tree
• Typescript syntax for React
• Code preview is fully editable (make changes before exporting project)
• Create custom HTML elements
• Improved UI experience
• Comprehensive tutorial with images

ReacType 3.0 (Windows)

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

ReactType 3.0 (Mac)

Please note: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select ‘Open’ from the context menu to run the app. This extra step is necessary since we don’t have an Apple developer license yet.

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

ReacType 3.0 (Linux)

• Export code as a Next.js project
• Create nestable components/HTML elements using a drag-and-drop canvas
• Add CSS to any element on the canvas
• Components and HTML elements are rendered in the canvas in the same way they'll be rendered in the exported project
• View dynamically generated Next.js or classic React code as you build your project
• Authenticate with Github or email
• Save data for multiple projects in the cloud
• Critical Electron security gaps resolved

ReacType 2.0 (Windows)

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

ReacType 2.0 (Mac OS)

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

ReacType 2.0 (Linux)

• New tutorial mode integration through the help menu
• The tutorial mode can be exited by completing the tutorial or clicking on the backdrop
  • Modals appear at each step of the tutorial
  • React Native mode implementation
• React Native components can be wireframed onto the canvas
  • Components include View, SafeAreaView, Button, FlatList, Image, Modal, Switch, Text, TextInput, TouchOpacity
  • iPhone X mockup included in the interface for the canvas
  • Switching between modes clears the application state upon confirming through warning popup
  • Components are reflected in the code preview accurately and can be exported as components for any React
  • Native Android or iOS project
• Code preview fully functional and editable
  • Adding components and props are reflected accurately
  • Ace editor integration for editing values
  • Props added no longer crash with certain types and type checking is stricter
  • Prop addition limited to prop type with values added manually through an edit mode
• Image upload functionality fills the root App component with the image fixed to the ratio of the component
  • React Native mockup wraps the App component to allow for uploaded image template to overlay the App component
• Switch to toggle to class or functional component fully functional and reflected accurately on code preview
• Switch to a stateful component added and is reflected accurately on code preview using hooks if the target component is functional
• Component names can be edited by double-clicking on the component name and pressing enter to confirm or escape to cancel
  • Clicking away from the focused component exits name edit mode as well
• History navigation implemented as undo and redo menu actions and keyboard shortcuts
• Application Tree now labels the type of the HTML element or React Native component in each node
• Overall design changes

ReacType (Win.Version.1.0)

Merge pull request #114 from team-reactype/development

1.0 merge