learn react code example

Example 1: react js documentation

//With node and npm already installed for basic start

npx create-react-app my-app-name

// if you want to use npm 

npx create-react-app my-app-name --npm

//if you want to use typescript 

npx create-react-app my-app-name --template typescript

yarn start // app will be hosted on localhost:3000

/* start making changes at ./my-app-name/src/App.js
	React documentation: https://reactjs.org/docs/hello-world.html
*/

Example 2: what is react

This is a formatted version of Komadori's answer 
(https://tinyurl.com/Komadori)
React is a JavaScript library for building user interfaces. 
It is maintained by Facebook and a community of 
individual developers and companies. 
React can be used as a base in the development of single-page 
or mobile applications.

Example 3: React js tutorial

npx create-react-app my-app
cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

Example 4: react quick tutorial

ReactDOM.render(  
    <Hello />,   
    document.getElementById("root")  
);

Example 5: create tic tac toe game in react using jsx files

useEffect(()=>{
        //checking winner row and col
        for (let i = 0; i <= 2; i++){
            const idx = (i % 3) * 3 // -> 0,3,6
            //check row
            if ( (table[idx] + table[idx+1] + table[idx+2] )=== 9 || (table[idx] + table[idx+1] + table[idx+2] ) === 15){
                setWinner([idx,idx+1,idx+2])
                gameOver()
            }
            //check col
            if ((table[i] + table[i+3] + table[i+6] )=== 9 || (table[i] + table[i+3] + table[i+6] ) === 15){
                setWinner([i,i+3,i+6])
                gameOver()
            }
        }
        //checking winner diagonal
        if ((table[0] + table[4] + table[8] ) === 15 || (table[0] + table[4] + table[8] ) === 9 ){
            setWinner([0, 4, 8])
            gameOver()
        }
        if ((table[2] + table[4] + table[6] ) === 9 || (table[2] + table[4] + table[6] ) ===15){
            setWinner([2, 4, 6])
            gameOver()
        }
        // check if table completed
        if (table.indexOf(0) === -1){
            gameOver()
        }
    }, [table])