how do i add react to my laravel project?

Question

this is a simple question. but I tried from the laravel documentation. I ran php artisan preset react and then npm install && npm run dev, now I just want to write a simple react script

const title = React.createElement(
        'h1',
        {id:'title',className:'header'},
        'Hello World'
    )
    ReactDOM.render(
        title,
        document.getElementById('react-container')
    )

it doesn't work ( a Header with hello world should be added to the dom ) . but when I add react cdn it works ( header is added ) . do I still need to include the cdn for react after i installed it in laravel ? or am i doing something wrong . i searched the web. but its a bit complicated for me. I can't understand. can someone please help me?

this is all my code in the laravel blade :

@extends('BaseLayouts.body')
@section('main_body')

<link rel="stylesheet" href="{{asset('css\app.css')}}" />
<script src="{{asset('js\app.js')}}"></script>
    <script>
window.onload = function () {
    const title = React.createElement(
            'h1',
            {id:'title',className:'header'},
            'Hello World'
        )
        ReactDOM.render(
            title,
            document.getElementById('react-container')
        )
};



</script>

<div id="react-container"></div>


@endsection

also i saw in a tutorial that a sample file written in react is added to js folder , in my casing there is no such file .

when I write the script in a separate file, phpStorm detects the React, but for React.createElement the createElement part phpStorm says unresolved function or method

Answer 1

Although the question was asked a month ago, i think this answer can help somebody.

The right way to work with React in Laravel is compiling the react components with Laravel Mix. When you run the command php artisan preset react, Laravel Mix is configured to compile React components with React itself, not with a CDN. [IMPORTANT UPDATE] Since Laravel version 6.x, the command used to tell laravel you are going to use React is php artisan ui react.

So ill try to explain how to correctly work with Laravel and React in some steps bellow.

1. Prepare Laravel to use React

For this, on laravel 5.x you just have to use the command php artisan preset react, for laravel 6.x and up the command is php artisan ui react, then run npm install, this command will install all the dependencies required.

You already done this step.

2. Create your first React component

First some explanations

For this step, you should take a look to the file webpack.mix.js, this is an important file, because here you will tell Laravel Mix what files you need to be compiled. If you have never opened this file, you will se something like bellow:

mix.react('resources/js/app.js', 'public/js') // here the react component
 .sass('resources/sass/app.scss', 'public/css');

This means that Laravel Mix will search the file resources/js/app.js and compile it into the folder public/js. It will do the same with the sass file.

Now create your React Component

If you want Laravel Mix to compile your custom component, you have to create a file with react and/or reactdom and save it to some folder (example: resources/js/mycomponent.js)

import React from 'react';
import ReactDOM from 'react-dom';

// ...your react code

Note Don't forget to render your component with ReactDOM

ReactDOM.render(<Mycomponent/>, document.getElementById('div-id'))

Then you need to tell Laravel Mix that your new file exists and needs to be compiled, adding a line into the file webpack.mix.js, like bellow:

mix.react('resources/js/app.js', 'public/js')
   .react('resources/js/mycomponent.js', 'public/js') // here your new react component
   .sass('resources/sass/app.scss', 'public/css');

This will now compile your file into the folder public/js/mycomponent.js.

And finally to run Laravel Mix, just run the command npm run dev, and if you want to recompile the component on each change you need to run npm run watch, this will compile your components each time you save a file.

I hope this can help.