React

Building a react app from scratch

1. Break the app into components
2. Build a static version of the app
3. Determine what should be stateful
4. Determine in which component each piece of state should live
5. Hard-code initial states
6. Add inverse data flow
7. Add server communication

---

Start new project

  npm start
#    Starts the development server.

  npm run build
#    Bundles the app into static files for production.

  npm test
#    Starts the test runner.

  npm run eject
#    Removes this tool and copies build dependencies, configuration files
#    and scripts into the app directory. If you do this, you can’t go back!

---

Semantic ui

Add semantic ui

• See demo
• How to customize
• Known issue

# 1. in the root of your project
npm install semantic-ui

# 2. choose instal location: `public/semantic-ui`

# 3. Select your theme and configure other variables here: `semantic-ui/src/site/globals/site.variables`

# 4. After completion navigate to public/semantic-ui and run "gulp build" to build
cd public/semantic-ui
gulp build

Labels

    <div class="ui action input">
      <input type="email" placeholder="taylor@gmail.com">
      <div class="ui primary button">Subscribe</div>
    </div>
    <div class="ui action input">
      <input type="text" placeholder="taylonr" >
      <button class="ui red right labeled icon button">
        <i class="trash icon"></i>
        Delete user
      </button>
    </div>

    <div class="ui corner labeled input">
      <input type="text" placeholder="Name..." />
      <div class="ui corner label">
        <i class="red asterisk icon"></i>
      </div>
    </div>

    <div class="ui right labeled input">
      <div class="ui label">$</div>
      <input type="text" placeholder="Amount">
      <div class="ui basic label">.00</div>
    </div>

Image Labels

<!-- image label -->
    <div class="ui image label">
      <img src="http://placeimg.com/200/100/animals"> Nature
    </div>
    <!-- image pointing -->
    <div class="ui pointing label">
      Default pointing
    </div>
    <div class="ui left pointing label">
      Left pointing
    </div>
    <div class="ui right pointing label">
      Right pointing
    </div>
    <div class="ui bottom pointing label">
      Bottom pointing
    </div>
    <!-- image corner label -->
    <div class="ui image">
      <div class="ui corner label">
        <i class="heart icon"></i>
      </div>
      <img src="http://placeimg.com/400/300/any">
    </div>

Tag label

    
      <!-- tag label -->
      <div class="ui tag label">
        JavaScript
      </div>
      <div class="ui tag label">
        Semantic UI
      </div>
      <div class="ui tag label">
        CSS
      </div>

Ribbon label

      <!-- tag label -->
      <div class="ui image">
        <div class="ui ribbon label">
          Animal
        </div>
         <img src="http://placeimg.com/400/300/animals">
      </div>
      <div class="ui image">
        <div class="ui right ribbon label">
          Animal
        </div>
         <img src="http://placeimg.com/400/300/nature">
      </div>