Giter VIP home page Giter VIP logo

react-hooks-hogwild's Introduction

HogWild: The React app for fans of prize-winning pigs

React Week 1 Project

Deliverables

  • When the app first loads, display a tile for each hog in the porker_data.js file. In the tile, display the name and image for each hog.

  • When the user clicks on the hog tile, display the other details about the hog (its specialty, weight, greased, and highest medal achieved)

  • Allow the user to filter the hogs that are greased

  • Allow the user to sort the hogs based on name or weight

  • BONUS: Allow users to hide hogs (not delete them, just hide them from view!)

  • BONUS: Add a form to allow users to add new hogs to the page

  • BONUS: Implement Semantic Cards for each hog

Project Guidelines

  • Follow React best practices to create components and decide where state needs to live
  • Pass props down from parent components to children
  • Use inverse data flow and callback functions to pass data up from child components to parents
  • Re-render components by setting state

What we have so far

  • A file containing all our hog data (./src/porkers_data.js) imported into App.js
  • A <Nav> component rendered in our App.js

Trying to figure out where to start?

There are lots of ways to build this project, and while some ways are better than others, there is no 'right' way! Start by wireframing what you want the app to look like and breaking it up into components.

One good model to follow for this is Thinking in React.

Once you've decided on your components, use the MVP (minimum viable product) approach. What's the simplest thing we can render to the page? Perhaps a paragraph tag displaying each hog's name? Which components would this involve?

When building your filter and sort functionalities, consider what you want to store in state and where that state should be stored. How can a child component pass information up to its parent component? Think about what needs to happen upon each index rerender. What if a user filters out un-greased pigs, and then wants the remaining pigs sorted by weight?

Be sure to use good programming practices, such as clear variable names and single responsibility functions. React apps can quickly become tangled and hard to debug if built without best practices!

Styling

We've imported the Semantic CSS library to keep your piggies looking pretty. To keep your hogs in columns, make sure their parent container has the class "ui grid container". The children in the columns should have class "ui eight wide column". (Semantic uses a grid with a default of 16 units wide, so 8-wide will make two columns and 4-wide will make 4 columns.)

Semantic will take care of assigning the columns for you. You can also try implementing Semantic Cards for each hog.

react-hooks-hogwild's People

Contributors

ndalcin avatar ihollander avatar rachelsa avatar danielseehausen avatar realandrewcohn avatar thuyanduong-flatiron avatar lizbur10 avatar adam-larosa avatar rexman17 avatar humzahchoudry avatar hyeokjungkim avatar jlboba avatar geluso avatar alexgriff avatar notnotdrew avatar isabelxklee avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.