React Hooks Project Tutorial – Game of Life

June 28, 2020



Learn how to build Conway’s Game of Life using React hooks in this project tutorial.

Code:

—-
Checkout my side projects:

If you’re into cooking:

If you like World of Warcraft:

—-
Join the Discord:

—-
Patreon:

—-
Follow Me Online Here:

Twitch:
Medium:
GitHub:
Facebook:
LinkedIn:
Instagram:
Twitter:

Nguồn: https://mutuseo.com/

Xem thêm bài viết khác: https://mutuseo.com/game/

All Comments

  • How are you this good? What's your secret? I'm supposed to be doing this for school and it's making my brain melt.

    Arin Ramer June 28, 2020 6:38 am Reply
  • I gotta say, this is the best comment section ever. So many helpful ideas and thoughtful comments.

    Carlos de Santiago June 28, 2020 6:38 am Reply
  • that was actually pretty cool

    Ebizzill June 28, 2020 6:38 am Reply
  • Nice video, its alive! Would like to see project with React and AI if thats a thing

    Paul Bleakley June 28, 2020 6:38 am Reply
  • Did you know Conway died cause of COVID-19 last month?

    Morteza Tourani June 28, 2020 6:38 am Reply
  • Awesome! Great video!

    Fyfoh's Lab June 28, 2020 6:38 am Reply
  • Thanks for the tutorial, I learned a lot. I used Dan Ambramov's useInterval hook instead of useCallback and deep cloned the array to remove the immer dependency. https://iguacel.github.io/iguacel/#/exp/15. Code: https://github.com/iguacel/iguacel/blob/master/src/exp/Exp15.js

    Jose A. Álvarez Iguacel June 28, 2020 6:38 am Reply
  • great content bro thank you
    btw, how old are you?

    Khotam Bakhromov June 28, 2020 6:38 am Reply
  • onClick={() => {
    const newGrid = produce(grid, gridCopy => {
    gridCopy[i][j] = grid[i][j] ? 0 : 1;
    });

    I don't understand what's going on here.
    Can you explain this block ?

    0 & 1, and checking if the gridcopy cell is equal to the grid cell?

    BRANDON ROBERTS June 28, 2020 6:38 am Reply
  • Hi guys, advice me telgram chanell about react

    Олег Санников June 28, 2020 6:38 am Reply
  • Would this be considered beginner intermediate or expert

    Wade Coplen June 28, 2020 6:38 am Reply
  • When i update my grid state so often, it gets very laggy with the map of the grid in the return, what am i doing wrong ?

    CraigMine June 28, 2020 6:38 am Reply
  • gonna try this since the freecodecamp one just… doesnt work

    Adrian Ross June 28, 2020 6:38 am Reply
  • Unfamiliar with useCallback, but instead of using useRef, could you have passed in the running state variable into the list of dependencies in the useCallback hook?

    Albert Lovejoy June 28, 2020 6:38 am Reply
  • Smart and pretty face. Ugh

    Lester Jan A June 28, 2020 6:38 am Reply
  • why didnt you just map through grid instead of using produce ?

    Abedelhak Ajbouni June 28, 2020 6:38 am Reply
  • Really cool. This helped me better understand hooks

    Vyctor661 June 28, 2020 6:38 am Reply
  • Great Video. Thanks

    dericbytes June 28, 2020 6:38 am Reply
  • 💗💗💗💗💗❤❤❤💔💔💔💔💔💔💕💕💕💕😁😔😔💙💙😔😔😔

    GEoRgeTte BEuLaH June 28, 2020 6:38 am Reply
  • First, really love the channel, and your command of material/programming…but, what does useCallback() add cause it seems??? to run the same without it.

    greenie62 June 28, 2020 6:38 am Reply
  • Why dont you use your dependency arrays very much? No need for so many refs.

    // update function with running changes
    useCallback(() => { … }, [running])

    // run simulation when button changes
    useEffect(() => running && runSimulation(), [running])

    secret agent x-9 June 28, 2020 6:38 am Reply
  • man………………. REALLY??? I did this a year ago in Matlab and my code was sooooo shitty compared to yours. Anyways, this is so fun! I'm going to try it out on my own!

    wafleez0r June 28, 2020 6:38 am Reply
  • the "j" problem is because you do not see the light and map Caps lock to esc…..

    seocamo June 28, 2020 6:38 am Reply
  • Can't you just copy your grid array into new array and mutate it without using immer library? Thanks for your work, awesome videos.

    Кирилл Горин June 28, 2020 6:38 am Reply
  • Hi ben! Awesome tutorial, would you mind if i request for a AR Tutorial with react native? Maybe AR using ViroMedia ?

    John Geliberte June 28, 2020 6:38 am Reply
  • Thanks for the help with useRef !!!! its baller time

    Peter M. Souza Jr. June 28, 2020 6:38 am Reply
  • Awesome tutorial as always Ben, really enjoyed it! If you wanted to adapt it to a 'wrap-around' world where the edges consider the other side neighbours (otherwise the edges never change) then you can do it really neatly using modulus like this:
    const countNeighbors = (grid: any, x: number, y: number) => {
    return operations.reduce((acc, [i, j]) => {
    const row = (x + i + numRows) % numRows;
    const col = (y + j + numCols) % numCols;
    acc += grid[row][col];
    return acc;
    }, 0);
    };

    Daniel Barclay June 28, 2020 6:38 am Reply
  • Thanks for a fun video. Just had a minor nit: I much prefer using `x`, `y` over `i`, `k` for navigating grids as they offer more meaning while still being terse.

    Ben Daniel June 28, 2020 6:38 am Reply
  • Check it out, I added a color evolution to track the life of cells, also working on sliders for UI http://petermsouzajr.com/gamelife

    Peter M. Souza Jr. June 28, 2020 6:38 am Reply

Leave a Reply

Your email address will not be published. Required fields are marked *