Introducing Rekit Studio: a real IDE for React and Redux development

#reactjs , with #Redux to #code there is now this:

  • As an IDE, besides code editing, Rekit Studio provides the capability for code generation, dependency diagraming, refactoring, building, unit tests, and a meaningful way to navigate code.You will no longer care about how to setup the project, config webpack, or organize your folder structure.
  • That’s what makes Rekit Studio different from other code editors like Sublime Text and VS Code.See the quick demoBefore the introduction, you may want to see a quick demo video about how to use Rekit Studio to manage Redux actions.From the video, we can see that all we care about is…
  • Then the project explorer can show the project structure in a meaningful way, like this:Project ExplorerRekit Studio knows the features of those project elements, like which actions are asynchronous (with blue mark “A”), which components connect to the Redux store (with green mark “C”), and which components are managed by…
  • This caused our project to become hard to maintain in a short time.Now with Rekit Studio, you can right click a component or action to move, and rename or delete it just like you do with other IDEs like Eclipse for Java or Visual Studio for .Net.
  • If you want to create some new elements like selectors, or you want to alter the default code boilerplate (like using `redux-saga` instead of `redux-thunk` for async actions), you can create plugins to do it.See more about the plugin system here.Command line interfaceBesides Rekit Studio, there is another command line…

We’re very excited to announce the stable release of Rekit Studio, a complete IDE for React, Redux and React Router development! Though it’s maybe new to some of you, it has helped us build…
Continue reading “Introducing Rekit Studio: a real IDE for React and Redux development”

Introducing Rekit Studio: a real IDE for React and Redux development

Introducing Rekit Studio: a real IDE for React and Redux development

#reactjs #javascript

  • As an IDE, besides code editing, Rekit Studio provides the capability of code generation, dependency diagram, refactoring, build, unit tests and a meaningful way of code navigation.
  • That’s what makes Rekit Studio different from other code editors like Sublime Text, VS Code.See the quick demoBefore the introduction you may want to see a quick demo video about how to use Rekit Studio to manage Redux actions.From the video we can see with Rekit Studio, all you care about…
  • I introduced the practices in two previous articles:Based on the pattern, Rekit Studio knows which files are components, which are actions, where routing rules are defines and so on.
  • Then the project explorer could show the project structure in a meaningful way like below.Project ExplorerRekit Studio knows feature of those project elements, like which actions are asynchronous (with blue mark ‘A’); which components connect to Redux store (with green mark ‘C’); which components are managed by React Router (with…
  • This will cause our project becomes hard to maintain in a short time.Now with Rekit Studio, you can right click a component or action to move, rename or delete it just like you do with other IDEs like Eclipse for Java, Visual Studio for .Net.

We’re very excited to announce the stable release of Rekit Studio, a complete IDE for React, Redux and React Router development! Though it’s maybe new to some of you, it has helped us build…
Continue reading “Introducing Rekit Studio: a real IDE for React and Redux development”

ASP.NET Core Basics: React with an API – Eric L. Anderson

#aspNETCore basics: build a #ReactJs app with an #API

  • This post is going to cover adding a React project to the existing using the React template that is now built into Visual Studio.
  • The goal for the React project in this initial post will be to connect to the contacts API and download a list of contacts and render that to the screen.
  • The following is the resulting React project in the context of the full solution.
  • Next, make sure and run npm install from a command prompt in the React project’s directory to ensure all the npm packages get restored.
  • Since this is my first time working with React I took the  FetchData.tsx file and copied the contents and used that as the starting point for my contact list.

In the past, I have done some exploration on Aurelia and Angular via the ASP.NET Core Basics series. This post is going to take a similar approach as I start doing some exploration with React. The code for the project will be in the same repo as the previous basics examples and will be utilizing the same API to pull data. The code before adding the React project can be found here.
Continue reading “ASP.NET Core Basics: React with an API – Eric L. Anderson”

#React Tutorials – Day 2 – Environment Setup by @pankajmalhan30 cc @CsharpCorner #ReactJS

#React Tutorials - Day 2 - Environment Setup by @pankajmalhan30 cc @CsharpCorner  #ReactJS

  • Create React App

    After installing the React global packages now run “create-react-app reactapp” command, this command will create a React project and name this project as “reactapp”.

  • Now you are in root directory of the project again run the “npm start” command this command run the React project on “3000” port.
  • Now, run the command “dotnet new React“

    This command creates a template project for React Application.

  • Using Webpack and Babel

    So far we set up the React Environment set up using the npm and Visual Studio 2017 SPA templates.

  • Now we will focus on the Webpack and babel to setup the React project.

In this article you will learn about Environment Setup in React.
Continue reading “#React Tutorials – Day 2 – Environment Setup by @pankajmalhan30 cc @CsharpCorner #ReactJS”

#React Tutorials – Day 2 – Environment Setup by @pankajmalhan30 cc @CsharpCorner #ReactJS

#React Tutorials - Day 2 - Environment Setup by @pankajmalhan30 cc @CsharpCorner  #ReactJS

  • Create React App

    After installing the React global packages now run “create-react-app reactapp” command, this command will create a React project and name this project as “reactapp”.

  • Now you are in root directory of the project again run the “npm start” command this command run the React project on “3000” port.
  • Now, run the command “dotnet new React“

    This command creates a template project for React Application.

  • Using Webpack and Babel

    So far we set up the React Environment set up using the npm and Visual Studio 2017 SPA templates.

  • Now we will focus on the Webpack and babel to setup the React project.

In this article you will learn about Environment Setup in React.
Continue reading “#React Tutorials – Day 2 – Environment Setup by @pankajmalhan30 cc @CsharpCorner #ReactJS”

Announcing Meteor 1.4.4 – Meteor Blog

Announcing Meteor 1.4.4  #npm #react #nodejs #javascript #meteor #reactjs

  • Announcing Meteor 1.4.4Node.js and npm updates, Cordova Google Sign-In, and hybrid minificationToday we’re excited to announce Meteor 1.4.4, a routine incremental release to update core dependencies, fix bugs, improve stability, and address a critical Google authentication change for Cordova apps.
  • meteor directory is committed to your version-control system (e.g. Git, Subversion, etc.) so it’s easy to roll-back if you ever encounter problems during any upgrade.Node.js, npm, and node-gypAs usual with new Meteor releases, underlying dependencies of the framework have been updated to their latest versions in Meteor 1.4.4, with Node.js at 4.8.1 and npm at 4.4.4.
  • See the Node.js 4.8.1 release notes for the full details, including numerous bug fixes and performance benefits.Critical Cordova updates for Google OAuthMeteor developers with mobile apps based on Cordova, who let their users authenticate with Google OAuth (via the accounts-google, google, or google-oauth packages): please pay close attention to this section!Google announced in August 2016 that they would be blocking OAuth logins from embedded web-views (such as the WebView UI element on Android and UIWebView/WKWebView on iOS), and started displaying the following message on the iOS and Android consent pages late last year:Notice for developers: authorization requests in embedded browsers will be blocked on April 20, 2017.
  • Thank you, Seth!New export-from syntaxSpeaking of bleeding-edge ECMAScript features, Meteor 1.4.4 introduces support for two new kinds of export … from “.
  • To try the new features of Meteor 1.5, run meteor update –release 1.5-beta.14 in any application directory, though please make sure your .

Today we’re excited to announce Meteor 1.4.4, a routine incremental release to update core dependencies, fix bugs, improve stability, and address a critical Google authentication change for Cordova…
Continue reading “Announcing Meteor 1.4.4 – Meteor Blog”

Creating a ReactJS Site with Kentico Cloud

Blog: Creating a #ReactJS Site with #KenticoCloud  #HeadlessCMS #Kentico

  • I added a div element to my view to load my ReactJS content.
  • I added references to the data.jsx and ReactJS files (using a CDN) to my shared layout.
  • After entering the score, I switched back over to the site and waited for the ReactJS code to call the HighScores action.
  • To add ReactJS to my solution, I opened the NuGet Package Manager and added the ReactJS packages.
  • In Draft, I created a new content item for my score.

By now, you’ve probably heard a lot about Kentico Cloud and how it presents a new way to develop your applications. One of the greatest benefits of the platform is how you can quickly develop applications in nearly any language and leverage cloud-based content. In this article, I’ll show you how I recently used Kentico Cloud and ReactJS within an MVC site for a tournament website for our booth at CodeMash 2017. Oh, and of course it’s deployed to Azure Web Apps!
Continue reading “Creating a ReactJS Site with Kentico Cloud”

Creating Universal Windows Apps With React Native – Smashing Magazine

Creating Universal Windows Apps With React Native  #webdevelopment #news

  • The Windows plugin for RNPM will automatically install the react-native and react peer dependencies for react-native-windows if they have not been installed.
  • Adding React Native for Windows to Existing Projects Link
  • npm install –save-dev rnpm-plugin-windows rnpm windows
  • E.g., if you have files MyComponent.windows.js and MyComponent.js , node-haste will choose MyComponent.js for Android and iOS and MyComponent.windows.js for Windows.
  • Installing the React Native Universal Windows platform extension is easy, whether you want to add the Windows platform to your existing app, or you want to start from scratch building an app just for Windows.

React.js is a popular JavaScript library for building reusable UI components. React Native takes all the great features of React, from the one-way binding and virtual DOM to debugging tools, and applies them to mobile app development on iOS and Android. With the React Native Universal Windows platform extension, you can now make your React Native applications run on the Universal Windows families of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.
Continue reading “Creating Universal Windows Apps With React Native – Smashing Magazine”