Recycle, Reduce, Reuse, React Components!
The 5th and final stage of Flatiron School is using the Javascript library called React. If you read my last blog then you know that I LOVED vanilla javascript, so with that being said I was a sceptic when I was first introduced to React. I was critical of everything… importing and exporting, passing down props, using state, you name it I didn’t like it. After some time working with it (because I had to) I began to realize that React is javascript! It’s actually javascript made faster, more reusable, and more organized. I can honestly say now that I LOVE React! I’m very sorry vanilla javascript, React is my new number 1!
For my phase 5 project I made a backend API with ruby on rails and took care of the front end with (you guessed it) React. The app that I built for this project is a Character Creator titled “My Character”. React was perfect for this app, if you have a couple minutes I’ll tell explain a bit!
Making “My Character” really solidified how useful and reusable React components are. If you think of a human body there are many different parts that make up the whole. Its no different with React components! I made a component called “Body” that took in properties or props (as we call them in react) that was the current state of the character’s attributes ( to learn about state: https://reactjs.org/docs/state-and-lifecycle.html). The “Body” component is made of a couple different components: “Hair”, “Eyes”, “Mouth”, “Shirt”, “Pants”, and “Shoes”. Since they are children of “Body” they inherit the props that were passed down to them, which was the state (in this case the state is hairstyle, eye type, etc). I assigned the props for hairstyle to “Hair”, eye type to “Eyes” and so on. As the state changes from “Body” the individual components that make up the body update. When the user is happy with their character they push “save me” and the attributes to create their character are saved to the database.
This is where the React components get extremely useful and reusable! I made a users index page which is a component called “AllCharacters”that displays all the users and all or their characters. I achieved this by mapping out the object usersAndCharacters (which is all the users and the characters from the database) to a “SingleUser” component.
const characters = () => this.props.usersAndCharacters.map( (user, i) => <SingleUser id={i} key={i} buttonFn={true} name={user.name } characters={user.characters}/> )`Then inside of the “SingleUser” component I mapped each oh the characters that each user has and assigned the props for each attribute
const characters = () => props.characters.map( char => <SingleCharacter key={char.id} id={char.id} name={char.name } userId={props.userId} hairIndex={char.hairIndex} eyesIndex={char.eyesIndex} mouthIndex={char.mouthIndex} shirtIndex={char.shirtIndex} pantsIndex={char.pantsIndex} shoesIndex={char.shoesIndex} skinTone={char.skinTone} /> )Then in “SingleCharacter” i simply reused the “Body” component! and sent it the props from each user’s characters from the backend. Thats all I had to write!
<Body attributes={props} />Since it was mapped from “AllUsers”, to “SingleUser”, to “SingleCharacter” in the end all that “Body” needs to take in is props!
I think the best way to think of React components are as reusable templates. When you think of apps like Facebook (creator of React) having templates is extremely important. Imagine saving all 1 billion plus profiles! You need a way to keep the data extremely lightweight. Having reusable components that you can feed props to from an api makes that possible!
There are so many things to love about React. I only covered a snippet of what it can do (didn’t even get into state!). It does take a lot of getting used to and a bit of a mindset shift, but its worth the initial headache! Give it a shot and I’m sure you will love it too!
