Content rendered by ReactJS does not react to jQuery code

I have a Laravel project with a frontend where I am listing items from a database. I wrote previously a custom main.js file where I use jQuery for animating my items.

Later on I integrated my project with ReactJS, and replaced my items to a React component. All my items are rendered correctly (checked by Chrome DevTools), but they are hidden, since my animation written in main.js are intended to fade them in.

It seems to me, that the main.js does not have any effect to the React component.

Basically I have a CSS file where I use opacity: 0; visibility: hidden; to hide the items, then fade them in later on. If I remove these settings from the CSS file, all my items show up, but they have different styling than before.


<div id="items"></div> <-- This part got replaced to a React component
<script src="{{ asset('js/app.js') }}"></script> <-- React component
<script src="{{ asset('js/main.js') }}"></script> <-- Custom animations




(function ($) {
    "use strict";
    // animations here ..


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

export default class Items extends Component {

    constructor() {
        this.state = {
            items: []

    componentWillMount() {
            .then(response => {
            .catch(errors => console.log(errors));

    render() {
        return (
            // rendering items happens here

if (document.getElementById('items')) {
    ReactDOM.render(<Items />, document.getElementById('items'));

I tried replacing the import of app.js and main.js but it didn't work. I am using npm run dev and it doesn't give any errors.