Client Week day 3 -onClick using React



So today was day 3 of our client project. Day 1 and 2 are linked above. Our project started to take real strides today. Yesterday I remember leaving class and thinking, “we have so much to do”, and now i’m feeling much better about where we are in the process. Today I found myself really appreciating React and its usefulness and design. It’s been really nice being able to figure things out and learn some really simple ways to solve what would have been much harder problems in vanilla javaScript. I said in yesterday’s post that I would show more code so that’s what i’m going to do.

Our design for the project was simple. We would create 3 static html pages, but then integrate the components into our React file called home.js. Our goal was to have our home page display a list of posts that a user can click on and have a button available that would allow them to create their own post. When the “create post button” was clicked, it would then trigger a class that would hide the “list of posts” page and show a “create post page”, then from there, have a post button that would hide the “create new post” page and show a “detailed post” page which will show the post that was just created. Today however i’m only going to go through the first page change, which was going from “home” to “create a post” .

Here is our home page with the creat new post button at the bottom. (CSS not complete) :/

When the Create New Post button is clicked: these two classes are used.

The “hidden” class would be placed on the “list of post” page and the “visible” class would be placed on the “create new post” page. Which shows the following.

Here is the React code for this particular event. This basically says the following.

“Hey onClickCreate function, go find the references to createPost and listOfPost and change the class names to “visible” and “hidden” respectfully”.

Here are the references placed on the elements that have the class that needs to be added or replaced with the new classes called by the function.

The function is called onClickCreate, and its calling two events to happen. This only works when an onclick={this.onClickCreate} is placed in the open tag of the the <button></button> element that needs to be clicked.

So we need the3 things for this one event to work.

  1. The function(),
  2. The ref's to the elements where the classes need to be
  3. The OnClick event on the <button> element that will be clicked.

This is just one of the functional aspects of our project that we created today in our javaScript file using React.

If there was one thing tho, that I think we achieved more then anything, was creating a great workflow, and understanding our group dynamic and process. Granted it took us three days to accomplish that, but what was important was the journey we took to get there. Tomorrow we are hoping to have the minimum requirements of the project done, then over the next two days do some of the more complex “stretch” portions of the assignment. Till tomorrow.

Happy coding everyone