Giter VIP home page Giter VIP logo

react-presentation-components-lab's Introduction

React Presentation Components Lab

Overview

In this lab, you'll write two components:

  1. A presentation component with minimal UI state
  2. A so-called stateless function

Overview

A truth in programming is this: managing state is hard. We humans know this: imagine taking lunch orders for a small group of colleagues or friends. Say everyone orders a sandwich. If you poll your friends you're going to rapidly exceed the human brain's memory capacity:

  • "If they have capicola, I want that, but if they don't have it, I want ham with mustard, but only if that mustard is spicy."
  • "PB&J! #simplelife #yolo"
  • "I'll have whatever the vegan options is, unless it's soy-patty. In that case, nothing. I'm a vegan, but that stuff is awful."

The same is true for complex applications, especially front end applications. If the user is logged in but hasn't selected a checkbox yet then we should prompt them to." Keeping up with all that state is hard to do as a programmer.

To help React developers signal to other React developers that something on the screen is simple and has no state impact and is also not affected by state, React has a concept called a "presentational component" or a "simple component." They're called that because, other than rendering themselves or using props data, they really don't know how to do much else.

Typically they're simply a single function that returns JSX. It's as simple as a React component can be. They look something like:

const ComponentName = props => <div onClick={props.handleClick}>I am just happy.</div>

We have an arrow function that takes one argument, props and then renders some JSX. That's it. It doesn't get much simpler in React-land.

As a comparison, Components that need to use state look more like this:

class ComponentName extends Component {
  constructor(props) {
    super(props);

    // Initial state here...
    this.state = {
    };
  }

  handleClick = () => {
    // Probably do some work to update the state
  }

  render() {
    // Return JSX that renders into HTML
  }
}

In this lab, we'll illustrate this principle by building two components:

  1. A SimpleComponent: Our SimpleComponent will be a component with a tiny bit of state. It won't be quite as simple as things could be. It will have a full component class declaration and will need to manage a state variable.
  2. A SimplerComponent: a "stateless functional" component

SimpleComponent

The specs for our SimpleComponent require the following:

  1. In the components/SimpleComponent.js file, create a SimpleComponent component.

  2. The component should be declared as a class (instance of Component) so that it can carry state.

  3. The component should have a state property called mood that has a default value of happy.

  4. The component should simply render its current mood state to the page in a div.

  5. The component should implement a handleClick function that can serve as a callback to the <div>'s click event. When clicked, the component's mood should toggle between happy and sad states.

SimplerComponent

The specs for our SimplerComponent require the following:

  1. In the components/SimplerComponent.js file, create a SimplerComponent component.

  2. The component should be a "stateless functional" component.

  3. It should render a <div> to the page that contains the text: "I am just happy".

  4. If you open the index.js file, you'll see that SimplerComponent receives one prop called handleClick that is currently undefined. Rewrite this prop to perform any action of your choice! Then, make sure SimplerComponent can trigger this action when it's clicked on.

Synthesize

When you've finished SimpleComponent and SimplerComponent, take a moment to compare them to each other.

See how SimplerComponent has no ability to change its output internally? We can always know, based on the props that we provide, what type of output it will produce. Note, as well, that this doesn't mean that the component lacks interactivity. We can actually determine a wide variety of click behaviors on the component just by providing different information via the props Object when we use the component.

This kind of "simpleness" is actually a good thing because it makes our component more predictable and easier to maintain. If we have a single store from which state is passed, bubbling downward via props to components like SimplerComponent debugging and maintaining the components is much easier than when a component needs to manage state as well.

A good bit of advice would be to start with a simple presentational component (like SimplerComponent) and only when you can't make it work without container-held state, change it to be a full Component. Developers like to constrain themselves to be as simple as possible until they absolutely have to be more complex. In the long run, this is a good heuristic for creating code that scales and is easy to debug.

Resources

react-presentation-components-lab's People

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-presentation-components-lab's Issues

Poor example

SimpleComponent and SimplerComponent do different things and SimpleComponent has more functionality. This lesson fails to teach me how to similarly modify the SimplerComponent div without setting state inside the component.

Error: Element type is invalid

When I try to view the lab on the browser, I get an error: "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

image

Older webpack version conflicting with new webpack

Every time I try to npm install on a particular lab, I get a long list of errors with a yellow WARN message to the left of each error. Then, I am recommended to run npm audit fix. This work around sometimes worked on some labs, but recently, running npm start has been suggesting me to do the following:

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

  2. Delete node_modules in your project folder.

  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.

  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
    This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/jasurabdullin/Desktop/flatironschool/4-module/6-advanced-components/react-presentation-components-lab-dc-web-102819/node_modules/webpack is outside your project directory.
    For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls webpack in your project folder.
    This will tell you which other package (apart from the expected react-scripts) installed webpack.

Previously, I was executing Step 1-4 after which running npm start would work and start the react-server

However, for this lab, none of my previous fixes are working. Should I install yarn or is this a different kind of issue?

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.