$ rails new apartment-app-15 -d postgresql -T

$ cd apartment-app-15

$ rails db:create

$ bundle add rspec-rails

$ rails generate rspec:install

$ git remote add origin https://github.com/learn-academy-2022-alpha/apartment-app-scalisema.git

$ git checkout -b main

$ git add .

$ git commit -m "Create Rails App"

$ git push origin main

$ bundle add webpacker

$ bundle add react-rails

$ rails webpacker:install

$ rails webpacker:install:react

$ yarn add @babel/preset-react

$ yarn add @rails/activestorage

$ yarn add @rails/ujs

$ rails generate react:install

$ rails generate react:component App

$ bundle add devise

$ rails generate devise:install

$ rails generate devise User

$ rails db:migrate

  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

  # Find this line:
  config.sign_out_via = :delete
  # And replace it with this:
  config.sign_out_via = :get

$ rails generate controller Home

CD into app/views/home

$ touch index.html.erb

  <%= react_component 'App', {
    logged_in: user_signed_in?,
    current_user: current_user,
    new_user_route: new_user_registration_path,
    sign_in_route: new_user_session_path,
    sign_out_route: destroy_user_session_path
  } %>

  // Find this line:
  <%= javascript_importmap_tags %>

  // And replace it with this:
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  get '*path', to: 'home#index', constraints: ->(request){ request.format.html? }
  root 'home#index

$yarn add [email protected]

  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

$ bundle add bootstrap

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

$ yarn add reactstrap

  @import 'bootstrap';

$ rails g resource Apartment street:string city:string state:string manager:string email:string price:decimal bedrooms:integer bathrooms:integer pets:string image:text user_id:integer

$ rails db:migrate

  belongs_to :user

    has_many :apartments

app/javascript/components/components

Header.js

app/javascript/components/pages

Home.js

app/javascript

App.css

Added Imports to App.js

  import Header from './components/Header'
  import Home from './pages/Home'
  import './App.css'

Added render for React Componets to App.js

class App extends React.Component {
  render() {
    return (
      <>
        <Header {...this.props} />
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
          </Switch>
        </Router>
      </>
    )
  }
}

Added basic react page template code to both:

  import React, { Component } from 'react'

  class Header extends Component {
      render() {
          return (
              <div className="header">
                  <h1>This is my fancy header</h1>
              </div>
          )
      }
  }
  export default Header

Added Basic classes for Home and Header

  .header {
      background-color: pink;
  }

  .home {
      background-color: aqua;
  }