This full project tutorial shows how to create Conway’s Game of Life using React.
You don’t have to know a lot already but it may be helpful to check out one of these videos first to get an overview of React:
https://youtu.be/1rIP81hjs2U (45 min)
https://youtu.be/QqLkkBKVDyM (15 min)
โญ Code โญ
๐ป Github repo: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/gameoflife
๐ป Direct link to JavaScript file: https://github.com/beaucarnes/fcc-project-tutorials/blob/master/gameoflife/src/index.js
๐ป Code for just play method (gist): https://gist.github.com/beaucarnes/1c22fc5e10b15a1f2bf338bf7d09b1b9
โญ Tutorial Outline โญ
โจ Part 1: Basic Setup (2:03)
โจ Part 2: Begin Main Component & CSS (6:56)
โจ Part 3: Create Grid Component (10:21)
โจ Part 4: Create Box Component (21:55)
โจ Part 5: Begin Method Creation (27:02)
โจ Part 6: Play Method & Game Logic (35:09) [see link for gist above]
โจ Part 7: Buttons w/ React-Bootstrap (39:08)
โจ Part 8: Finish Buttons & Main Component (39:08)
๐ Special thanks to these people who helped review the code: Sean Smith, Marius Espejo, & Danny Huang.
๐ฆ Beau Carnes on Twitter: https://twitter.com/carnesbeau
—
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on technology: https://medium.freecodecamp.com
And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
I have tried building this along with you and even copied and pasted the play function code and more from the repo and yet, though it appears to work right, if I actually inspect how a seed plays out, I am consistently getting some different results than what I should. A glider does not work for instance, nor a blinker or anything else as it should, implying my play function is wrong, but since it is now your code exactly, I know it isn't. I have spent literally over 20 hours checking every line of code, trying different things, and cannot figure out why it doesn't work or where anything relevant to that functioning is different than yours, simply copying in your code whenever I can, and I consistently get it working the same wrong way every single time. Any ideas for why this could be happening?
why add Buttons affected layout of Grid? don't really understand.
the grid layout still has problem when the window size changed.
15:12 feel like unnecessary use of map. Simpler solution would be:
gridFull = Array(this.rows).fill(Array(this.cols).fill(false))
@24:15 You could do:
onClick = {() => this.props.selectBox(this.props.row, this.props.col)}
Thanks this is great. Question why do the "Generations" continue to run when the cells stop populating?
works ok however very slow on my machine! would be interested in seeing a video on how to optimize this. would also be interested in seeing how to implement a version where the bounding box of the grid flows from one side to the opposite side once it reaches the edge.
hi I have one react redux application in which php files are present for api calls so i am not able to run it on
localhost but it works fine on web server any help will be appreciate
Thanks
What a great tutorial! We all should be grateful that Beau did such a great job, and built the app step by step. I learned a lot from this video. Having the source code on github allowed me to check my mistakes. Thanks again!
Why not use CodePen?
So in case it helps anyone else, to get the DropdownButton to work, I had to use Bootstrap 3, even though the instructions in the react-bootstrap documentation tell you to use the CDN that gets the latest Bootstrap, which currently is 4.
Very weird. My code is exactly the same but Grid is not showing up in the browser.
Why is width = cols multiplied by 14?
when you reach at 29:50 . just go back and change the onClick to OnMouseOver to just paint on the canvas. Kids Game ๐
Hey guys, I did this project last weekend and I wanted to ask if someone knows how it would be able to implement a 2. type of cells (for example red ones) which would live in the same game as the normal/green ones but they would have other Game of Life rules than the normal ones.
Great video, the only small thing is that I'd use stateless functional components for most of these as recommended by FB but this works fine too ๐
This is really amazing lecture I've ever taken ! Thank you a lot and your insight !
REACT + MOBX tutorial please
Here is the play() method code from 36:12 :
play = () => {
let g = this.state.gridFull;
let g2 = arrayClone(this.state.gridFull);
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
let count = 0;
if (i > 0) if (g[i – 1][j]) count++;
if (i > 0 && j > 0) if (g[i – 1][j – 1]) count++;
if (i > 0 && j < this.cols – 1) if (g[i – 1][j + 1]) count++;
if (j < this.cols – 1) if (g[i][j + 1]) count++;
if (j > 0) if (g[i][j – 1]) count++;
if (i < this.rows – 1) if (g[i + 1][j]) count++;
if (i < this.rows – 1 && j > 0) if (g[i + 1][j – 1]) count++;
if (i < this.rows – 1 && j < this.cols – 1) if (g[i + 1][j + 1]) count++;
if (g[i][j] && (count < 2 || count > 3)) g2[i][j] = false;
if (!g[i][j] && count === 3) g2[i][j] = true;
}
}
this.setState({
gridFull: g2,
generation: this.state.generation + 1
});
}
Can anyone explain how you would use map instead of a nested for loop?
Did somebody manage to refactor this for speed? I don't think that's possible, as long as every generation requires full blown state update, therefore component update, therefore re-render, therefore width*height number of DOM elements redrawn.
I can see the game being done with OK performance in JS through canvas, but it's not a job for React, but rather graphics oriented library like p5.
Thanks as usual for these tremendous free educational resources. You truly are setting the bar for what the future of education looks like, and it is a bright future filled with students who aren't debt slaves.
Thanks so much.
Steve Jobs?
That `play` method at 37:00 is the ugliest piece of code I've seen this month. Impossible to maintain.
If you're using hooks instead of class methods for running the seed function, don't forget to include an empty array as the 2nd argument or you'll have an infinite loop! Example: useEffect(() => seed(), []);
Stuck at 34:57… where does this.intervalId come from? I broke everthing out into separate components and react can't find it
RIP John Conway 1937-2020
I did exactly as said up to creating the selectBox method, but some of my boxes are not showing in the last row. I checked the CSS also. Please Help
Beau Selecta ! ! !
Great tutorial.
It would have been better to have the play function explained and written down slowly. I Will not continue this tutorial as it would feel more of a copy and paste..wish it was more beginner focused.
The whole method used to make the game work is pasted in and not explained at all ๐
0:33 We got everything we needed with ๐๐ ๐๐๐ฆ๐๐ .๐๐ ๐
"0:23"After wasting time on different sites, a friend of mine recommended ๐๐ธ๐ซ๐ญ๐พ๐ญ๐ฎ .๐ฌ๐ธ๐ถ and it worked perfectly for me
36:11 imaging having to support this, meh