This topic is for listing and review of Game of Life projects built as a part of FCC challenges. Please stick to these basic rules to keep the topic clean:-
Post your Codepen (or other) link to your project as a general reply to this topic.
For Codepen links use the following format to avoid embedding the pen:-
Project Link - [http://codepen.io/santakmishra/full/pgqOYq/](http://codepen.io/santakmishra/full/pgqOYq/)
Post reviews as a specific reply to the link which you are reviewing.
The CSS is kind of rudimentary on this one, and it’s not organized very well, but I was more focused on playing with the game elements than making it really look good. I’ll try to come back later and spruce it up some.
Took about 2 day to finish this project. I think the most difficult part for me was finding the neighbors. I used tables instead of divs because it gave me better performance for larger grid sizes. It may be because I didn’t optimize the divs properly…
Functionality is fully there but the interface is very basic. Maybe someday I’ll go back and spruce it up.
Project Link =>https://aungmyokyaw.github.io/Game-of-Life/
I get stuck .
Finally I done.
I use div element.
And i add clear class every element%width ==1.
The most difficult part is finding neighbor.
Exactly finding neighbors of end div element.
I use display:table;margin:auto to center element
I’m not particularly great with React, but this was my first project, and I definitely prefer using React over JQuery and plain JS because it forced me to organize my code a lot more than I usually do. That being said, I don’t think it’s a particularly fast implementation and I really need to learn to use React effectively. I also didn’t add options to make it faster or change the layout size, unlike the others (although I’ve written the code with row/column number variables instead of hard coding it so it shouldn’t be difficult to implement later).
That being said, this was a fun and relatively easy project and I added a bunch of options to make it cool (gradient shadows and randomized colors). It might hurt the performance a bit, but it’s worth it. Check it out, especially with fade and grid turned on.
Looks really good! I finished this project too recently and really enjoyed it. I also agree, I really like coding with React. It just pushes you to break what you are building into composable pieces. It makes managing things much easier in my opinion.
Yours seems a lot faster than mine, any tips for a beginner?
Also since you probably have more experience than me regarding React, is it possible to have more than one react root node in a page? Say I want my panel of buttons to be rendered in a separate render function and a navbar as a separate React component, can I do that on a single page?
This was a relatively small project so it wasn’t a big issue but I really like keeping my HTML separate from JS and it would need some retraining to create pages entirely with React.
I don’t think you can have multiple React root nodes, I think you can only perform ReactDOM.render once, however you can just add more components to your root component. For instance you could create a <Header /> component and just add that tag in your root component, and then elsewhere define the <Header /> with your header HTML. This way components that serve different functions or views can be broken off into composable pieces.
I think it’s generally preferred to make things as composable as possible in React, I definitely agree with that idea. It really helps the organization of your logic and views. Hope that answers your question!
Thanks for the reply. I’ll definitely break down the components into different files. That’s a great idea, and would make everything a lot less cluttered. Also, I looked at your Dungeon Crawler game, it looks fantastic! I’m looking forward to doing that one.
Took me a while to speed up the FPS from 15 to 50, fixing the memory leaks, and restructure my code. Initially I code in React all the way and the code looks organized but the rendering was quite slow (around 15 fps) because my components were bulky and tie to lots of event handler in its property, and its also re-render the buttons and in every generation. I had tried many things but still cannot match the FPS of the FCC example (around 25 fps). So I take a look at the sample code and find that it uses lot of jQuery and pure JS.
So I slowly remove the event handlers from the React properties and replaced it with jQuery one by one to improve the FPS. I also restructure the code a lot until I reach 50-60 fps on my local machine, and I find that my code is 95% jQuery + pure JS, and only 5% ReactJS. The performance is great now but I don’t feel right when moving away from ReactJS. I hope someone could review my code and suggest improvement.
I found this one to be rather easy, although I did learn a few things from it. The most important thing is the difference between “shallow copies” and “deep copies”. A topic that I somehow had missed up to this point. Anyways, here is my link, and as always any feedback would be appreciated
Project Link - http://codepen.io/Josh5231/full/WGbdZA/
I’m with you. I spent ages tweaking my logic so that everything was written in a “React like” way only to get bad performance and the realization that the example was mostly written in jQuery. O well.
I didn’t look at your code very much but when I viewed your project it was overflowing and had a left/right scrollbar. Other than that your project looks amazing.
