Review of yesterday
When there is more feedback from yesterday, I will add the reviews and solutions.
TODAY
Finally, we can start learning React.
I considered today's content, whether JS high-order function/ functional programming or React. Finally, I decided to arrange function topics during the learning of components.
Today's task is good news for me because I don't have to write too many words: Create a React APP: tic-tac-toe
Study Goal:
- Based on the knowledge of JS class, step further to know React component.
- Based on the knowledge of JS function, learn the latest React component syntax.
1.
First, learn the legacy Tic-tac-toe tutorial written by the React component, and try to understand the concept of components. This is simple because you have learnt components in Svelte. Trying to find out the difference in how components are implemented (with how they are implemented in Svelte).
Using this online sandbox (https://codepen.io/githubdudu/pen/gbOgbpV) with the tutorial https://legacy.reactjs.org/tutorial/tutorial.html#overview.
There is another similar template you can use it as starter: https://codepen.io/D_Toth/pen/bGpNeYr?editors=0010.
I found two completed code repos for your reference:
https://codesandbox.io/p/sandbox/github/ravisingh8115/Tic-Tac-Toe-Game/tree/main/?file=%2Fsrc%2Fcomponents%2FSquare.js
https://codesandbox.io/p/sandbox/8yeoo?file=%2Fsrc%2FBoard.js
You may notice that the code are using JS class syntax. Now you can observe and learn how React has been created and built on the JS class feature.
2.
Learn the latest Tic-tac-toe tutorial that is written by function syntax.
This time you have to follow the tutorial and install a React APP on your device first: https://react.dev/learn/creating-a-react-app.
npx create-next-app@latest
Then follow this tutorial to build a same Tic-tac-toe app. https://react.dev/learn/tutorial-tic-tac-toe
3.
Close all the tutorials and try to build a tic-tac-toe app from scratch without the aid of AI. You may use the official documentation of React or documentation provided by W3CSchool. https://www.w3schools.com/react/default.asp . Official document is for 19.0 version while the W3CSchool one is for 18.0 Version.
Good luck! and enjoy!
Review of yesterday
When there is more feedback from yesterday, I will add the reviews and solutions.
TODAY
Finally, we can start learning React.
I considered today's content, whether JS high-order function/ functional programming or React. Finally, I decided to arrange function topics during the learning of components.
Today's task is good news for me because I don't have to write too many words: Create a React APP: tic-tac-toe
Study Goal:
1.
First, learn the legacy Tic-tac-toe tutorial written by the React component, and try to understand the concept of components. This is simple because you have learnt components in Svelte. Trying to find out the difference in how components are implemented (with how they are implemented in Svelte).
Using this online sandbox (https://codepen.io/githubdudu/pen/gbOgbpV) with the tutorial https://legacy.reactjs.org/tutorial/tutorial.html#overview.
There is another similar template you can use it as starter: https://codepen.io/D_Toth/pen/bGpNeYr?editors=0010.
I found two completed code repos for your reference:
https://codesandbox.io/p/sandbox/github/ravisingh8115/Tic-Tac-Toe-Game/tree/main/?file=%2Fsrc%2Fcomponents%2FSquare.js
https://codesandbox.io/p/sandbox/8yeoo?file=%2Fsrc%2FBoard.js
You may notice that the code are using JS class syntax. Now you can observe and learn how React has been created and built on the JS class feature.
2.
Learn the latest Tic-tac-toe tutorial that is written by function syntax.
This time you have to follow the tutorial and install a React APP on your device first: https://react.dev/learn/creating-a-react-app.
Then follow this tutorial to build a same Tic-tac-toe app. https://react.dev/learn/tutorial-tic-tac-toe
3.
Close all the tutorials and try to build a tic-tac-toe app from scratch without the aid of AI. You may use the official documentation of React or documentation provided by W3CSchool. https://www.w3schools.com/react/default.asp . Official document is for 19.0 version while the W3CSchool one is for 18.0 Version.
Good luck! and enjoy!