Integrating React into Electron

Keyboard Shortcuts

React and electron can communicate with each other easily through Inter Process Communication. In this video, we'll create the simplest ReactJS code and see how electron can work with the library to build applications.

- [Teacher] ReactJS is a really…great way to work with Electron.…So let's go ahead and install the framework…and build our first JSX component.…Now our animation is going to handle…the processing of JSX as well as ReactJS,…but we need to go ahead and import our React library.…So we do that just like we would…with any other React project:…we create a variable and then use a require statement,…and we'll require the React library like this.…

And then we'll create another variable for ReactDOM,…which is how you deal with the virtual DOM within React.…So we'll do a require statement here,…and we'll import the other library called ReactDOM.…When you're working with React,…what you want to do is create a series of components.…My first component is going to be called MainInterface.…I'm going to delete this right here, and then I'm…going to create this new variable called MainInterface.…

When I do that, I'll need to create a React class…using the React object here, so createClass,…and this is going to be passed a configuration object.…

Resume Transcript Auto-Scroll

Author

Released

11/17/2016

Electron is an open-source framework for creating desktop applications with your favorite web technologies: JavaScript, HTML, and CSS. It makes it easy to create a simple app with a few lines of code, using languages you already know. Want to learn more? Join Ray Villalobos as he walks through the techniques you need to master cross-platform desktop development with Electron. Learn how to configure and communicate between app windows (aka webpages) via the main and renderer processes, and integrate the React and Bootstrap frameworks to build interfaces with multiple panels and custom menus. As a final step, Ray shows how to package your project into a standalone, clickable app that can be run on Windows, Mac, or Linux machines.