score:1

Accepted answer

the problem is not in your code but in your comment statement.

// is not jsx comment statement. {/* ... */} is jsx comment.

change your code to

index.js

const store = createstore(
  reducer,
  applymiddleware(thunk, logger)
)
render(
  <provider store={store}>
    <app>
       <loadingbar />
    </app>
  </provider>,
  document.getelementbyid('root')
)

app.js

const app = () => (
  <div> hello world
    {/* < recentchannelitem />
    < channelsfield />
    <button />
    <topnews /> */}
  </div>
)
export default app;

score:0

you cannot add app and loadingbar as children to provider because it expects to have only one child which is surely your app component, actually this is not a proper place to add the loadingbar at all.

i just modified index.js to be as follows:

import react, { component } from 'react';
import { render } from 'react-dom';
import hello from './hello';
import './style.css';
import loadingbar from "react-redux-loading-bar";

import react from 'react'
import { render } from 'react-dom'
import { createstore, applymiddleware } from 'redux'
import { provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
import app from "./components/app"

const store = createstore(
  reducer,
  applymiddleware(thunk, logger)
)
render(
  <provider store={store}>
   <app />
  </provider>,
  document.getelementbyid('root')
)

app.js:

import react from 'react'
// import channelsfield from './channelsfield'
// import recentchannelitem from './recentchannelvalues'

// import button from '../containers/button'
// import topnews from '../containers/topnews'
const app = () => (
  <div>
    <h1> hello </h1>
  </div>
)
export default app;

and the component is rendered and i can see hello.

usually elements like loadingbar are used inside your components to be displayed when you are waiting for asynchronous tasks to complete (for example fetching data from api)

so i suggest importing it using import statement inside app (or any other component) and use it.


Related Query

More Query from same tag