Let's look at how we can install and use React with Vite and Laravel. Now of course before we begin, if you plan on using React or Vue or anything, just use one of the other starter kits, because it is going to give you everything that you need out of the box. But it can be helpful to know how to do this stuff, so let's get started. Of course, the first thing that we need to do is install all of our dependencies. And we will install React, ReactDOM, and we will of course save those. But we also need to install the React plugin for Vite. That is a development dependency, so we will save that as such. And before we run our development server, we need to make at least one change to our

That is a development dependency, so we will save that as such. And before we run our development server, we need to make at least one change to our tailwind.config.js. Because now, since we are working with React, we are working with more than just JS files, we also need to include JSX files. And with that done, we can close that file, we can go back to the command line, and we can run our development server. So let's start with our vite.config.js. Because we need to first of all import that React plugin. And we do so by importing React from vite.js slash plugin-react.

Because we need to first of all import that React plugin. And we do so by importing React from vite.js slash plugin react. And while there are options that we can use, for the most part, we're just going to call the React function as an element inside of our plugins. And that's really all that we need to do as far as that is concerned. We do need to change our input, because now we are working with JSX files, we will have an app.jsx as opposed to an app.js. And I'm going to add back in the images alias. So with that in place, I want to essentially replicate what we did in the previous episode. And that is take the content of our welcome view and replace it with a React component.

So with that in place, I want to essentially replicate what we did in the previous episode. And that is take the content of our welcome view and replace it with a React component. So first of all, we need a place for our React application to be rendered. So we'll just have a div with an ID of app. And then let's create a welcome component inside of our components directory. We'll call it welcome.jsx. And we will export default welcome. And we need two props here. We need the title and the subtitle. And then inside of this function, we will simply return some JSX.

We need the title and the subtitle. And then inside of this function, we will simply return some JSX. And inside of this function, we will return a component that contains our markup. Now, of course, we do need to make some changes. This is React. So we do not use the class attribute. Instead, we use className. So let's make that change. And since this is XML, we need all of our elements to have a closing tag, or at least be self-closing.

And since this is XML, we need all of our elements to have a closing tag, or at least be self-closing. So our image element needs to self-close. Let's add in where we want to render the title and the subtitle. And we also need to import the logo so that we can use that. So we will import logo from, and we will use our images alias logo.png. And then we will use that as the source for our image. And with that in place, we should be done as far as this particular component is concerned. So let's close while we're getting an error somewhere.

is concerned. So let's close while we're getting an error somewhere. Where are we getting an error? export default, oh, function, that's kind of important. And so with that, we need to rename app.js to app.jsx. Then let's open up that file because we need to get rid of this modal, and we need to import react from react. We also want to import react-dom from react-dom/cliend. And we also need to import the Welcome component from comps/welcome.jsx. Just like before, we're going to continue to import our images here.

And we also need to import the welcome component from comps/welcome.jsx. Just like before, we're going to continue to import our images here. But now we want to pull in our title from our environment variables. That was vt.appName. We also want the subtitle from the environment variable called vt.org. And then we're just going to create our application. We will use react-dom to create root, and we want to get the element with the ID of app so that we can render our welcome component. But we do need to supply the title as well as the subtitle. And with all that in place, the only other change that we need to make is inside

But we do need to supply the title as well as the subtitle. And with all that in place, the only other change that we need to make is inside of our welcome view because we are pulling in app.jsx now. But in order to use hot module reloading, we also need to use the vite react-refresh directive. And we need to call this before we use the vite directive. That's very important. But that's all this does. We include this so that we can use React and hot module replacement. So with that in place, we should be able to just go to the browser and

We include this so that we can use React and hot module replacement. So with that in place, we should be able to just go to the browser and something has failed. We can see that it failed to resolve the import of images logo.png. So let's make sure those paths are okay. Let's go to our webpack.config.js. We have our images alias that is pointing to resources, and that needs to be plural. So with that done, once this reloads, we have the result that we had before. So adding React to your project is just as easy as adding Vue. There are, of course, a lot more changes that you have to make just because

So adding React to your project is just as easy as adding view. There are, of course, a lot more changes that you have to make just because React has different file extensions and a different way of doing things. But for the most part, it's relatively the same. Install react, react-dom, install the vite-react plugin, change the .js file extensions to .jsx, and then use the vite-react-refresh directive to enable hot module replacement. But again, if you know you're going to be using React or anything, just use one of the starter kits. It'll save you a lot of time.

anything, just use one of the starter kits. It'll save you a lot of time.