As our views are now done using react (and defined under the `front/views` folder), we need to use the `send_react_front($viewURI, $viewArguments)` php function (located in the `src/react-render.php` file).
As our views are now done using react (and defined under the `front/views` folder), we need to use the `send_react_front($viewURI, $viewArguments)` php function (located in the `src/react-render.php` file) to render a react view.
If you look at the `send_react_front($viewURI, $viewArguments)` function, you'll see that is simply loads the file `src/react-display-file.php` with given arguments.
The file is a simple html5 template with a `<script>` block in the `<body>` section.
@ -84,24 +84,27 @@ here's how it renders if you do a request to `http://localhost:8080/`.
The index.php's router says that for a `GET` on the `/` url, we call the `SampleFormController#displayForm` method.
This method then uses the `send_react_front`, to render the `views/SampleForm.tsx` react element, with no arguments (an empty array).
You can see that the react view is rendered using a `render` function. This function **must figure in the view's file, and be exported**.
We'll talk about an important coding convention about views that this script block implies later.
You can see that the react view is rendered using a `render` function.
This function **must figure in the view's file, and be exported**.
We'll talk about an important coding convention with react views that this script block requires later.
But now let's talk about our server profiles !
## Server Profiles
If you go on the staging server, you'll see that, for the exact same request equivalent, the generated `render-react-file` file changes :
If you go on the staging server, you'll see that, for the exact same request equivalent, the generated `src/render-display-file` file changes :
(we can also see that much less files are downloaded than with our localhost aka development server).
Remember that react components and typescript files needs to be transpiled to javascript before being executable by a browser.
The generated file no longer requests the view to a `localhost:5173` or a `maxou.dev:5173` server,
Now our react components are directly served by the same server, as they has been pre-compiled by our CI (see `/ci/.drone.yml` and `/ci/build_react.msh`) into valid js files that can directly be send to the browser.
If you go back to our `index.php` file, you'll see that it requires a `../config.php` file, if you open it, you'll see that
it defines an `asset(string $uri)` function.
now our react components are directly served by the same server, as they have been pre-compiled by our CI (see `/ci/.drone.yml` and `/ci/build_react.msh`) into valid js files that can directly be send to the browser.
If you go back to our `index.php` file, you'll see that it requires a `../config.php` file, if you open it,
you'll see that it defines the `asset(string $uri)` function that is used by the `src/react-display-file.php`,
in the `<script>` block we talked earlier.
By default, the `/config.php` file uses the `dev-config-profile.php` profile,
the file is replaced with `prod-config-file.php` by the CI when deploying to the staging server (see the pipeline "prepare php" step in `/ci/.drone.yml`)
The two profiles declares a `_asset(string $uri)` function, used by the `/config.php::asset` method, but with different implementations :
The two profiles declares an`_asset(string $uri)` function, used by the `/config.php::asset` method, but with different implementations :
`DisplayResults` is the name of our React Component (the function).
To pass arguments to the `DisplayResults` function, we use the syntax `<function parameter name>={value}`. (somewhat like regular html/xml components).
Use the render's function `args` parameter to access to the php's array values (see below).
So now we have defined our react view, let's send it to the user's browser from php.
To render the `DisplayResults` view, we'll use the `send_react_front()`:
```php
require_once "react-display.php";
...
send_react_front(
"views/DisplayResults.tsx", // view file location, relative to the `/front` folder.
NOTE: in the project, the `$_POST` is placed instead of the hardcoded array, as the `$_POST` is an array containing the "name" and "password" keys. (regarding the SampleForm's form inputs names)).
Use the render's function `args` parameter to access to the php's array values.
We use typescript and react for the front, which requires to be transpiled to Javascript in order to be executed by browsers.
The fact that our `.tsx` components (our views) needs to be compiled to a js file to be executed does not allows us to dumbly refer to their file path in the php source code.
## Use of ViteJS to build our react components
We use [ViteJS](https://vitejs.dev/guide/) to build the react components.
