React: Application Structure

Current Structure

Until this point our sample applications have put all of our components directly into src folder. This is going to be impractical once we build more complex applications. To introduce some order let’s talk a bit about a proper structure for an applications files.

New Structure

To start with we want to create a new directory inside of src called components and then move all of our components into that folder. This includes the App component. If we do that we can clean our index.js file up entirely so it exists just for configuration, for example database configuration.

Now our index.js file looks like this:

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

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

And our broken out components look like this:

import React from "react";
import SearchBar from "./SearchBar";

const App = () => {
  return (
    <div className="ui container" style={{marginTop: '10px'}}>
      <SearchBar />
    </div>
  );
};

export default App;

import React from "react";

class SearchBar extends React.Component {
  render() {
    return (
      <div className="ui segment">
        <form className="ui form">
          <div className="field">
              <label>Image Search: </label>
            <input type="text" />
          </div>
        </form>
      </div>
    );
  }
}

export default SearchBar;

Now everything is folded up nicely into a tree where all the components feed into one parent component called App and then App is imported into the index.

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More