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.
Prerequisites:
Material-UI is a React UI framework based on Google’s Material Design system that provides pre-built components and styling for building modern and intuitive web applications. It has a large and active community of contributors and a theme customization system for easy branding and design customization.
Modules required:
- react
- node
- @emotion/react
- @emotion/styled
- @material-ui/core
- @mui/icons-material
- @mui/material
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/