In react, we compose complex UI's from isolated pieces of code called components Components takes in parameter's called props and returns front end code to be displayed via the render method.
The front end code returned to be displayed is a React object though. Each react object is a javascript object that I can store in a variable
The react components are used in the render functions and they look like html tags ex: root.render() -> this calls the game component
One way we can make our components interactive is by including a onClick function to a button we are rendering
Now that the component is interactive we can alter the state of component, but first we need to give the component state We do this by adding a constructor to the component and setting this.state
In our case we need to use the state from all the child squares to determine a winner of the game. we use super(props) in the constructor of the parent to get the state of the entire board.
We use slice to create a copy of the state array instead of modifying the existing array. This is an example of using immutability instead of mutability.
For example we implemented a "time travel" feature allowing us to undo moves. This is made much easier as the previous verisons of the game are still intact.
We can easily detect changes by comparing the current state to our previous states that we have saved
The main benefit of immutability is that it allows us to build pure components in React. Immutable data can easily determine if changes have been made so we know to re-render
function components only contain a rend method and do not have any state. They still can take props as input like our Square function
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.\
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!