Владимир

Можно посмотреть на html файл? возможно функция

var slides = document.getElementsByClassName("mySlides");

не нашла элементов

App.js:

import React from "react";
import ReactDOM from "react-dom";

import App2 from "./App2";

const App = () => {
  const s3 = "foo";
  return <App2 z1={s3} />;
};

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

App2.js:

import React from "react";

const App2 = ({ z1 }) => {
  return <div>{z1}</div>;
};

export default App2;

Примерно так:

<div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <button @click="changeCount" v-if="showButton">{{ buttonText }}</button> 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                showItemCount: 4,
                isOpen: false,
                array: [
                    'Первый', 'Второй', 'Третий', 'Четвертый', 'Пятый', 'Шестой', 'Седьмой'
                ]
            },
            computed: {
                list() {
                    return this.array.slice(0, this.showItemCount)
                },
                showButton() {
                    return this.array.length > 4
                },
                buttonText() {
                    return this.isOpen ? 'Скрыть' : 'Подробнее'
                }
            },
            methods: {
                changeCount() {
                    if(this.isOpen) {
                        this.showItemCount = 4
                    } else {
                        this.showItemCount = this.array.length
                    }
                    this.isOpen = !this.isOpen
                }
            }
        })
    </script>

Имя функции, описывающей компонент, должно быть с большой буквы, иначе при транспиляции из JSX не будет создана ссылка на компонент

function Jo () {
  return(
    <div>
      <h1>jojojojo</h1>
    </div>
  )
}
render(<Jo />, document.getElementById('root'))