Merge pull request #8 from VKEA/develop

Develop

assets/app.js

@@ -4,11 +4,19 @@
  * We recommend including the built version of this JavaScript file
  * (and its CSS file) in your base layout (base.html.twig).
  */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import MyComponent from './scripts/components/MyComponent'
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
 
-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
+ReactDOM.render(
+    <React.StrictMode>
+        <MyComponent />
+    </React.StrictMode>,
+    document.getElementById('root')
+)
 
-console.log('Hello Webpack Encore! Edit me in assets/app.js');
+serviceWorker.unregister()

assets/scripts/components/MyComponent.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+function MyComponent(props) {
+return (
+<div class="example-wrapper">
+    <h1>Hello World! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>src/Controller/DefaultController.php</code></li>
+        <li>Your template at <code>templates/default/index.html.twig</code></li>
+        <li>Your react component at <code>assets/scripts/MyComponent.js</code></li>
+    </ul>
+</div>
+)
+}
+
+export default MyComponent

package.json

@@ -1,3 +1,4 @@
+
 {
     "devDependencies": {
         "@babel/preset-react": "^7.10.4",
@@ -19,4 +20,4 @@
         "react": "^16.13.1",
         "react-dom": "^16.13.1"
     }
-}
+}

src/Controller/DefaultController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+
+class DefaultController extends AbstractController
+{
+    /**
+     * @Route("/", name="index")
+     */
+    public function index()
+    {
+        return $this->render('default/index.html.twig', [
+            'controller_name' => 'DefaultController',
+        ]);
+    }
+}

templates/default/index.html.twig

@@ -0,0 +1,16 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello DefaultController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('App') }}
+{% endblock %}

webpack.config.js

@@ -23,9 +23,7 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.js')
-    //.addEntry('page1', './assets/js/page1.js')
-    //.addEntry('page2', './assets/js/page2.js')
+    .addEntry('App', './assets/App.js')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()