Laraval/React mix example doesn't display a page for me as illustrated on the tutorial.

Here is the C:\Users\Me\meblog\resources\js\components\Main.js (it's a Laravel 8 directory tree) that is in my test:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* Main Component */
class Main extends Component {

  constructor() {

    super();
    //Initialize the state in the constructor
    this.state = {
        products: [],
    }
  }
  /*componentDidMount() is a lifecycle method
   * that gets called after the component is rendered
   */
  componentDidMount() {
    /* fetch API in action */
    fetch('/api/products')
        .then(response => {
            return response.json();
        })
        .then(products => {
            //Fetched product is stored in the state
            this.setState({ products });
        });
  }

 renderProducts() {
    return this.state.products.map(product => {
        return (
            /* When using list you need to specify a key
             * attribute that is unique for each list item
            */
            <li key={product.id} >
                { product.title } 
            </li>      
        );
    })
  }

  render() {
   /* Some css code has been removed for brevity */
    return (
        <div>
              <ul>
                { this.renderProducts() }
              </ul> 
            </div> 
  
    );
  }
}

export default Main;

/* The if statement is required so as to Render the component on pages that have a div with an ID of "root";  
*/

if (document.getElementById('root')) {
    ReactDOM.render(<Main />, document.getElementById('root'));
}

It didn't have the last six lines in my prior failed tests, but adding them to the bottom now still yields only a "Laravel and React application" header at the top of the page with nothing else on it, no change.

My PostgreSQL table seeds and everything else is working except this.

But would the lack of data inside the table's created_at and updated_at fields cause the Products blockout to not appear at all on the left side of the page? Following the tutsplus instructions to the best of my knowledge, only the id, title, description, price, and availability columns are seeded.

No errors in the console. A nice blue Laravel Mix v6.0.11 rectangle and "Compiled Successfully in..." feedback accompanied by an audible chime, after yarn run dev.

"Also check react dev tools, are the products loaded in your state ?"

I'm not sure I'm doing this right; okay I've just typed "react dev tools" into the command line from inside my Laravel project's path and all I get is "'react' is not recognized as an internal or external command, operable program or batch file."

What does that mean? Because I've also got a create-react-app project going elsewhere on my machine. All I do to start that up is change my directory into it and then do npm start. My limited-knowledge takeaway from things thus far is React has to be separately loaded into any project I begin. Is that the case with React?

Then again, the import React and import ReactDOM lines at the top of the Main.js are not throwing any errors after I write yarn run dev.

I'm not seeing a path like that in Laravel 8. Nothing with a directory called api.

Would this be in the App\Http\Controllers namespace? I have a Products Controller class extending Controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class ProductsController extends Controller
{
    //

    public function index()
    {
        return Product::all();
    }

    public function show(Product $product)
    {
        return $product;
    }

    public function store(Request $request)
    {
        {
            $this->validate($request, [
            'title' => 'required|unique:products|max:255',
            'description' => 'required',
            'price' => 'integer',
            'availability' => 'boolean',
        ]);

//---me everything above this line inside function
        $product = Product::create($request->all());

        return response()->json($product, 201);
    }

    public function update(Request $request, Product $product)
    {
        $product->update($request->all());

        return response()->json($product, 200);
    }

    public function delete(Product $product)
    {
        $product->delete();

        return response()->json(null, 204);
    }
}

That's the whole of my ProductsController.php file. Those 7 lines including brackets content above the //--- line was added by myself into the existing store function; all the other stuff is preexisting. Insofar as the tutsplus narrative I'm attempting to follow.

Thanks. After implementing the above, DevTools indicates there's now an error thrown by statement

 public function update(Request $request, Product $product)

in the ProductsController.php

What's the error?

One red line error is:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) :8000/api/products:1 

And the other one is:

192.168.0.13/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0     192.168.0.13/:1

And then a yellow exclamation point warning below those two is:

DevTools failed to load SourceMap: Could not load content for http://192.168.0.13:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE