GithubHelp home page GithubHelp logo

lab-bulma-components's People

Contributors

mc100s avatar papuarza avatar ross-u avatar sandrabosk avatar tzikas avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lab-bulma-components's Issues

Mexico Feedback

Lab issues

Hi, my name is Jose Carlos I'm TA at Ironhack Mex, we had a lot of troubles with this lab.
the first one was creating the couple buttons. Bulma doesn't have build-ready react components to render.

<!-- JSX version -->
<Button isSmall isDanger className="is-rounded my-class">Button 1</Button>
<Button isSmall isSuccess>Button 2</Button>

The result:

Once you get that error message, you try the second example and you get a couple of buttons with bulma styles applied.
but the students' thinking is:

  • is this correct because it worked?
  • Do I need to just put the classes in a className attribute and it works?
    This only generates confusion and questions, styles library or components library?. What is the goal of the lab? to teach the use of className as a substitute for class within jsx or to teach how to use component libraries?

it's necessary a third party library with built in components that really give us a react component to render, example:

import { Button } from ' some-react-bulma-components-library'

Otherwise we will confuse students believing that react magically draws beautifully buttons from zero.
for the rest of the lab it's almost the same, we don't have that components or import them from anywhere, for my part I found this library called react-bulma-components.
It is good but it's difficult to read, it makes use of HOC (high order components) in some examples and even uses the status or properties (something that up to this point should not be introduced according to the program).
then I suggest:

  • Use a real components library like Material-UI, react-materialize or ant design.
  • take a time to explain what is a components library and how to import a wanted component like a button or a navbar.
  • Show an example of how the result should look.

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.