CODEWITHSUNDEEP
reactjs
ReactX
ReactX

Reputation: 31

Main.js component and does my folder tree look good?

I create web applications in ReactJS and I have some questions about how to organize components and how to do it. This is my folder tree for this moment:

Components
└ App.js
└ Layouts
  └ Header.js
  └ Sidebar.js (this is a Header.js child)
  └ Navigation.js (this is a Sidebar.js child)
  └ Footer.js (this is a Sidebar.js child)

This is my App.js file:

import React, { Component, Fragment } from 'react';
import Header from './Layouts/Header';

class App extends Component {
  state = {};

  render() {
    return (
      <Fragment>
        <Header />
      </Fragment>
    );
  }
}

export default App;

Now I want to create Main.js, but it will have some other components (depending on Navigation.js, what I will choose). So how can I do it? Should I create a new Main folder in Components? I would also like to use the React router, but I do not know how it works.

I know that React does not interfere in the tree of my application, but I want to do it professionally and my question is: does it look good at the moment?

Upvotes: 1

Views: 47

Answers (1)

brett
brett

Reputation: 351

I have seen react apps set up many different ways, but a common pattern is the have an index.js that sets up redux or any other work you need done before rendering the main app.js file that will hold all of the routing. Components are usually placed all in one components folder with sub folders organizing the different types of components, see the posts folder in this example. Some peopl put all components connected to Redux in Container folders, and unconnected components in component folders.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


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

app.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './components/User/Home';
import Header from './components/Layout/Header';
import Posts from './components/Posts/Posts';
import Post from './components/Posts/Post';


class App extends Component {
  render() {
    return (
      <div className="App">
      <BrowserRouter>
      <Header />
      <Switch>
      <Route path="/home" component={Home} exact />
      <Route path="/posts" component={Posts} exact />
      <Route path="/posts/:id" component={Post} />
      </Switch>
      </BrowserRouter>
      </div>
    );
  }
}

export default App;

Upvotes: 2

Related Questions