I'm still playing with React, from Facebook, and have been thinking about ways to learn more about the library. One of the best ways to learn something new is to start a project using that thing so that's what I've begun doing. I'm going to be working on many small examples of React elements, or components, and then work toward turning them into a larger project.
This week I've decided to try my hand at making a simple photo gallery using ReactJS. There's not a whole lot going on here but I'll try to cover some of the things I went back and forth on.
Next we start building the
Gallery component and passing the data array in as a property. Inside the component we use that property to setup our initial state and pass those values to our inner elements; we have an
imgRow and an
map() function. Because the click event is nested inside this function I needed to be a little creative on the way we would handle the click. This took some figuring out but you're able to bind the
this value of the previous element using the
Once an image is clicked the
handleClick function takes over and resets the state of our hero image; found in the
selectedImg element. And that's it. We have a simple React Photo Gallery.
Check out the code below and check out my Profile on CodePen for more work.
See the Pen React">http://codepen.io/adamaoc/pen/KwMLpb/'>React Image Gallery by Adam Moore (@adamaochttp://codepen.io/adamaoc'>@adamaoc>) on CodePen.http://codepen.io'>CodePen.>