Preview and edit a component live with React Live

Instructor: [00:00] In this lesson, we're going to look at the React Live library to render React components and present the user with an editable live preview. I already have the start of an application with createReactApp, so I just need to install React Live.

[00:12] You could do this by using NPM or Yarn. In this case, I'm going to use Yarn. The next thing I need to do is import React Live into my application. React Live provides four components, liveProvider, liveEditor, livePreview, and liveError.

[00:31] What we're going to do here is we're going to make this createReactApp boilerplate component have an editable preview. The first thing I'm going to do is create a new component to house our code. It's going to be a functional component, and we'll call it appLive.

[00:45] We'll go ahead and use the liveProvider component that we've imported to wrap the other components and provide some code.

[00:58] Let's go ahead and test what we have so far by providing some normal JSX to our provider component. We can do that by adding a code property and giving it a string. A need to go ahead and export appLive instead of app. Let's check Chrome.

[01:14] It's looks like it's working. As you can see, I have the editor at the top and a preview at the bottom. Any changes that I make in the editor will be reflected down below. If we take a look at our appLive component for just a second, you'll notice that the liveEditor is at the top, which is our editor that we saw in Chrome.

[01:30] livePreview is below, and then we have this liveError component, which will render any error that occurs while trying to execute our code. Let's go ahead and get this createReactApp component working.

[01:41] The first thing that we're going to want to do is wrap this in a template literal. We can do that by just adding a variable here called code, put our ticks around it, add a return here, and then we can pass it to our code property.

[01:57] Let's check it out. You can see right here that our code is showing up in our editor, but it says component is not defined. What's all that about? React Live will automatically inject the React object into the scope of our code, but since we're extending component itself, it doesn't know about it.

[02:13] Let's change it so component is a property of React. Let's test it out again. As you can see, it looks like we're missing one other thing. It says that logo is not defined. As I mentioned earlier, React Live automatically injects the React object into our scope.

[02:30] However, the logo variable is not defined, so we'll need to go ahead and do that manually. We can add a second property to our provider component called scope, which takes an object. Pass our logo in like that, test it out.

[02:45] It looks like it's working. Let's make some changes and see what happens. We'll say welcome to React Live, remove the logo, add it back. Pretty cool, right? That just about wraps it up. By default, React Live will render the one component that you provide it.

[03:01] If you need to show multiple components, then you can use the no-inline property. Check out the docs for more info.