integration template reactjs in symfony

Question

I am integrating template reactjs in my Symfony application.But,when I am running my application, my application displays a blank page.

Please help me!

I am using symfony4 and react js with webpack encore.

This is my layout.html.twig:

      <!DOCTYPE html>
         <html>
          <body>
            {% block body %}
             <div id="root"></div>
              {% endblock %}
              {% block javascripts %}
              <script type="text/javascript" src="/build/js/temp.js"> 
              </script>
        {% endblock %}
        </body>
        </html>

This is my Controller:

 <?php
  namespace App\Controller;
       use Symfony\Bundle\FrameworkBundle\Controller\Controller;
        use Symfony\Component\HttpFoundation\Response;
        use Symfony\Component\Routing\Annotation\Route;
        final class HomeController extends Controller
        {

        public function home(): Response
        {
    return $this->render('layout.html.twig');
         }
         }

My Webpack.config.js:

 var Encore = require('@symfony/webpack-encore');

 Encore

.setOutputPath('public/build/')

.setPublicPath('/build')
.addEntry('js/main', './assets/js/main.js')
.addEntry('js/temp', './assets/js/temp.js')
.addStyleEntry('css/util', './assets/css/util.css')
.addStyleEntry('css/material-dashboard-react', './assets/css/material- 
 dashboard-react.css')
.addStyleEntry('css/main', './assets/css/main.css')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel(function(babelConfig) {
  babelConfig.presets.push('env');
})
.enableReactPreset();
;

module.exports = Encore.getWebpackConfig();

I am integrating template reactjs in assets/js/temps.js. In temp.js:

 js
 ¦___temp.js
          ¦__components
          ¦__Containers
          ¦__routes
          ¦__variables
          ¦__views
          ¦__index.js

This is my index.js:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
 import {
   Router,
   Route,
   Switch
} from 'react-router-dom';

import '../../css/material-dashboard-react.css';

import indexRoutes from './routes/index.jsx';

const hist = createBrowserHistory();

ReactDOM.render(
<Router history={hist}>
    <Switch>
        {
            indexRoutes.map((prop,key) => {
                return (
                    <Route path={prop.path} component={prop.component}  key= 
{key}/>
                );
            })
        }
    </Switch>
</Router>
, document.getElementById('root'));

Answer 1

I think you should try this:

build your react project
place bundled scripts and css from build/static/ to appropriate directory
load it in template

also you should evaluate ReactDOM.render from your template

integration template reactjs in symfony

Question

1 answers

solution1
0 2019-02-08 12:02:54

integration template reactjs in symfony

Question

1 answers

solution1 0 2019-02-08 12:02:54

solution1
0 2019-02-08 12:02:54