You are currently viewing React Project Tutorial – Game of Life

React Project Tutorial – Game of Life



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

This Post Has 33 Comments

  1. Kyle Serrecchia

    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?

  2. Apple

    why add Buttons affected layout of Grid? don't really understand.
    the grid layout still has problem when the window size changed.

  3. Sashank Aryal

    15:12 feel like unnecessary use of map. Simpler solution would be:

    gridFull = Array(this.rows).fill(Array(this.cols).fill(false))

  4. Sashank Aryal

    @24:15 You could do:

    onClick = {() => this.props.selectBox(this.props.row, this.props.col)}

  5. gmcfadden100

    Thanks this is great. Question why do the "Generations" continue to run when the cells stop populating?

  6. M G

    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.

  7. BALAJI pastapure

    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

  8. Terry D'Silva

    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!

  9. a8lg6p

    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.

  10. Chris Carr

    Very weird. My code is exactly the same but Grid is not showing up in the browser.

  11. ShoSho

    Why is width = cols multiplied by 14?

  12. Yikuno

    when you reach at 29:50 . just go back and change the onClick to OnMouseOver to just paint on the canvas. Kids Game ๐Ÿ™‚

  13. Asuha

    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.

  14. 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 ๐Ÿ™‚

  15. outis g

    This is really amazing lecture I've ever taken ! Thank you a lot and your insight !

  16. TemperMode

    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
    });

    }

  17. Cool Sam

    Can anyone explain how you would use map instead of a nested for loop?

  18. Alex Chereshnev

    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.

  19. Jordan Winslow

    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.

  20. D

    Steve Jobs?

  21. Rho Shard

    That `play` method at 37:00 is the ugliest piece of code I've seen this month. Impossible to maintain.

  22. Adrian Todd Ross

    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(), []);

  23. Adrian Todd Ross

    Stuck at 34:57… where does this.intervalId come from? I broke everthing out into separate components and react can't find it

  24. Dhiraj Saharia

    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

  25. Stefi Rosca

    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.

  26. Matthew Vaccaro

    The whole method used to make the game work is pasted in and not explained at all ๐Ÿ™

  27. Tobin Christi

    0:33 We got everything we needed with ๐•„๐• ๐•“๐••๐•ฆ๐••๐•– .๐•”๐• ๐•ž

  28. Aurore Ronning

    "0:23"After wasting time on different sites, a friend of mine recommended ๐“œ๐“ธ๐“ซ๐“ญ๐“พ๐“ญ๐“ฎ .๐“ฌ๐“ธ๐“ถ and it worked perfectly for me

Leave a Reply