Table of content

• Start Online
• create-react-app CLI
• Tweet, notification, snackbar
• React in Symfony

Start Online

codesandbox: react.js 🔗 (opens new window)

create-react-app CLI

npx create-react-app react-demo

Tweet, notification, snackbar

npm i native-toast 

add a hook

import nativeToast, {ToastOptions} from 'native-toast';

const useToast = () => {
  const notify = (options) => {
    nativeToast({
      type: options.type,
      message: options.message,
      position: 'north',
      timeout: 3000,
      edge: true,
    });
  };

  return notify;
};

export default useToast;

use the hook to show the toast message

// import this css in the main component
import 'native-toast/dist/native-toast.css';

// use the toast hook
const notify = useToast();
notify({type: 'success', message: 'hello, world!'});
  

React in Symfony

add react packages

 yarn add --dev react react-dom @babel/preset-react

remove line in webpack.config.js

  // .splitEntryChunks() 

disable line in webpack.config.js

 .disableSingleRuntimeChunk() 

enable line in webpack.config.js

 .enableReactPreset()

update app.js

import '../css/app.css';

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

const App = () => {
    return <h1>react works!</h1>
}

ReactDOM.render(<App/>, document.getElementById('root'));

rebuild the react Component and remove the cache and refresh symfony server

yarn dev

react works! should be displayed on the homepage.