Steps to Create React Application and Install Modules
Step 1: Create a React app using the following command.
npx create-react-app react-mui-typescript --template typescript
Step 2: Now get into the project directory
cd react-mui-typescript
Step 3: Installing dependencies using the following command.
npm i @emotion/react @emotion/styled @material-ui/core @mui/icons-material @mui/material
Project Structure:
The updated dependencies in package.json file will look like.
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.14.16",
"@mui/material": "^5.14.17",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.61",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
}
Example 1: Here, in order to learn about the usage of MUI in React we will take an example of a text field and onChange event changing values in the page.
Javascript
// Filename - App.tsx import React from 'react' ; // Import the LoginForm component import LoginForm from './components/LoginForm' ; // Define a function to handle the // submission of the LoginForm function handleLogin( username: string, password: string ) { console.log(username, password); } // Define the App component function App() { return ( // Render a div that contains the // LoginForm component <div> { /* Render an H1 element with the text "Login Form" */ } <h1 style={{ textAlign: 'center' }}> Login Form </h1> { /* Render the LoginForm component */ } <LoginForm onSubmit={handleLogin} /> </div> ); } // Export the App component export default App; |
Javascript
// Filename - LoginForm.tsx import React, { useState } from 'react' ; import { makeStyles } from '@material-ui/core/styles' ; import TextField from '@material-ui/core/TextField' ; import Button from '@material-ui/core/Button' ; // Define CSS styles using the makeStyles // function provided by Material-UI const useStyles = makeStyles({ form: { display: 'flex' , flexDirection: 'column' , alignItems: 'center' , }, input: { marginBottom: '1rem' , }, button: { marginTop: '1rem' , }, }); // Define the type for the props passed // to the LoginForm component interface LoginFormProps { onSubmit: ( username: string, password: string ) => void; } // Define the LoginForm component using // the functional component syntax export default function LoginForm(props: LoginFormProps) { // Use the styles defined earlier const classes = useStyles(); // Define state variables for the // username and password input fields const [username, setUsername] = useState( '' ); const [password, setPassword] = useState( '' ); // Define a function to handle form submission const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { // Prevent the default form submission behavior event.preventDefault(); // Call the onSubmit prop props.onSubmit(username, password); }; // Render the login form using Material-UI components return ( <form className={classes.form} onSubmit={handleSubmit}> <TextField className={classes.input} label= "Username" variant= "outlined" value={username} // Update the value of the username state // variable when the input field changes onChange={(event) => setUsername(event.target.value)} /> <TextField className={classes.input} label= "Password" type= "password" variant= "outlined" value={password} // Update the value of the password state variable // when the input field changes onChange={(event) => setPassword(event.target.value)} /> <Button className={classes.button} variant= "contained" color= "primary" type= "submit" > Login </Button> </form> ); } |
Steps to run the application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on http://localhost:3000/
Example 2: This example implements ClickCounter App with TypeScript similar to the above project.
Javascript
// Filename - App.tsx import ClickCounter from './components/ClickCounter' ; function App() { return ( <ClickCounter /> ); } export default App; |
Javascript
// Filename - components/ClickCounter.tsx import React, { useState } from 'react' ; // Importing MUI components Button and Typography import Button from '@mui/material/Button' ; import Typography from '@mui/material/Typography' ; // Defining a functional component called // ClickCounter const ClickCounter: React.FC = () => { // Initializing the count state to 0 // using the useState hook const [count, setCount] = useState(0); // Defining a function that updates the count // state when button is clicked const handleButtonClick = () => { setCount(count + 1); }; // Return JSX elements that render the // click counter UI return ( <> <Typography variant= "h4" gutterBottom> Click Counter </Typography> <Typography variant= "body1" gutterBottom> You have clicked the button {count} times. </Typography> <Button variant= "contained" onClick={handleButtonClick}> Click me! </Button> </> ); }; // Exporting ClickCounter component export default ClickCounter; |
Steps to run the application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on http://localhost:3000/
React MUI TypeScript
React MUI TypeScript refers to using the MUI Module in React written in the Typescript. MUI provides UI components that are easy to use in React TypeScript.