GirlBossRush/web-app-architecture.md

## web-app-architecture.md

      
    Raw
  

              web-app-architecture.md
            
          
    Back in Rails, old web projects, etc

/src
/js
search-bar.js
/css
global.css
search-bar.css
/templates
search-bar.html
.search-bar {
  background: blue;
}

.search-bar input[type='text'],
input[type='email'] {
  border-radius: 5px;
}
<script>
  $.documentReady(function () {

  })
<div>
</div>
<!DOCTYPE html>
<html>
<head>
  <link src="search-bar.css" />
  <script src="search-bar.js" />
</head>
<body>
  
</body>
</html>


/src
  /containers (aka "Smart, one-off components")
  /utilities
  /store (data in redux, or MobX)
  /notes
  /components
    /SearchBar
      SearchBar.js
      SearchBar.css
      SearchBar.test.js
      LoadingSpinner.js
      index.js
// node_modules/react/index.js

export default React
export Component
class SearchBar extends React.Component {

}

export default SearchBar
export const SEARCH_BAR_HEIGHT = 40
import SearchBar, {SEARCH_BAR_HEIGHT} from 'components/SearchBar'
// components/SearchBar/index.js
import SearchBar from './SearchBar.js'


export default SearchBar

// or...

export {default} from './SearchBar.js
import React, {Component} from 'react'
import React from 'react'
import Goobers from 'react'

import {SearchBar, LoadingSpinner} from './components/SearchBar/{{index.js}}'
import SearchBar from './components/SearchBar/SearchBar.js'
import LoadingSpinner from './components/SearchBar/LoadingSpinner.js'
/node_modules
/react
Component.js