lab-bulma-components's People
Forkers
spartan-dev anabelperez mon0225 myrnaarredondo cestarck leriu yannyyss adithemighty youxiberlin tlebon enstef nicholsonj ntnhan30 jessica111110 katrinai bhavanavenu alinakr niconek kaschief jasonsimms gyasikn ironhack-paris-webdev-august-2018 yvens16 xapi1972 laurarojeda buski87 hilaring sasrous xavifserra grannysimons bartosian alexrojas satga laurencahill eusha5 dougdejong yonathanh kpoff crispinonicky batuhaandogan lkapt elvair evenstarw1 wergilia jacobcasado ironlabs blachlock yamioliva ihrgg ironhack-exercices ricardoalonzoironhackrepositories robotic-amoeba-ironhack rubenarmendariz perlavianey mishulicious lutherbarragan edcm11 ajpalacios omar-nav jordyaq almaady andrew00624 danielitocm joebit213 crisderzweiter theledzed amelrodr irving017 g-ironhack-exercises sahadad05 jorgerybar davidsirit71 agdwm paulagonzalez eamayag crazyunicorn cmenow rovisal max-n3o csirvente hananedup xamsp cesarlugoe evukipm teresaplaz amoreno315 bjornhona alekz7 greengold33 mikempala iqaldebaran petercruz ricardomayosa lucaasdfg vermontgarcia gzuppa royquiroz sannchez-mx albertommip mnavarroilab-bulma-components's Issues
students need to be reminded to not use font awesome or use the the react version
Bulma suggests to include the following script tag in index.html:
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
This font awesome library does dom manipulation which causes errors in react that are very hard to solve for beginners. Please put this in either the lab or the lesson.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.