React.js

https://github.com/Gspatelw3/react-app/tree/master

// Insert background Image in react component
<div className="bannerBox" style={{'backgroundImage': 'url('+(process.env.PUBLIC_URL)+'/img/banner.jpg)'}}>


// Particlejs in react component
import React, { Component } from 'react';
import Particles from 'react-particles-js';

const particleOps = {
   particles: {
      color: {
         value: '#f90',
      },
      number: {
         value: 150,
         density: {
            enable: true,
            value_area: 600
         }
      },
      opacity: {
         value: 1,
      },
   },
   interactivity: {
      detect_on: 'canvas',
      events: {
         onhover: {
            enable: true,
            mode: 'bubble'
         },
         onclick: {
            enable: true,
            mode: 'repulse'
         },
         resize: true
      },
      modes: {
         bubble: {
            distance: 400,
            size: 3,
         },
      }
   }
}

class Banner extends Component {
   render() {
      return (
         <div className="bannerBox">
            <Particles params={particleOps} />
         </div>
      )
   }
}

export default Banner;

// How to add wowjs into react =============>
import WOW from 'wowjs'

const wow = new WOW.WOW();   
wow.init();


// How to print array
import React, { Component } from 'react';

class ContentList extends Component {
render() {
const listItem = [
{
'number': '1',
'color': '#f90',
'title': 'Uw lichaamsfuncties'
},
{
'number': '2',
'color': '#dc7d00',
'title': 'Uw mentaal welbevinden'
},
{
'number': '3',
'color': '#c46b00',
'title': 'Uw zingeving'
},
{
'number': '4',
'color': '#b35e00',
'title': 'Mee kunnen doen in de maatschappij'
},
{
'number': '5',
'color': '#9c5100',
'title': 'Uw kwaliteit van leven'
},
{
'number': '6',
'color': '#834200',
'title': 'Uw dagelijks functioneren'
}
];

return (
<ul>
{listItem.map( item => {
return (
<li>
<span style={{ 'backgroundColor': item[ 'color' ] }}>{item['number']}</span>

{item[ 'title' ]}
</li>
)
} )}
</ul>
)
}
}


export default ContentList;