React.js is a JavaScript library for building user interfaces. It was developed by Facebook and is widely used in web development projects. React allows developers to build reusable UI components and manage the state of their applications using a declarative approach.
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.
In this article, we’ll explore how to use React MUI TypeScript to build great-looking and robust user interfaces.
Modules required:
- react
- node
- @emotion/react
- @emotion/styled
- @material-ui/core
- @mui/icons-material
- @mui/material
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.
Installing React App:
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 button-example
Installing Dependencies: Installing dependencies using the following command.
npm i @emotion/react @emotion/styled @material-ui/core @mui/icons-material @mui/material
Setting up the project:
Step 1: Changing directory to src
cd src
Step 2: Removing all files in src directory
rm *
Step 3: Creating App.tsx, index.tsx and LoginForm.tsx
touch App.tsx touch index.tsx mkdir components cd components touch LoginForm.tsx
Project Structure:
- ./src/App.tsx
Javascript
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; |
- ./src/LoginForm.tsx
Javascript
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> ); } |
- ./src/index.tsx
Javascript
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; // Creating a root element to attach // the application to const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); // Strict mode enabled root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
Output:
Example 2: Now, we repeat the above steps in order to create react app to implement ClickCounter App with TypeScript similar to the above project.
Setting up the project: Creating App.tsx, index.tsx.
touch App.tsx && touch index.tsx
Creating components directory and ClickCounter.tsx inside the directory.
mkdir components cd components touch ClickCounter.tsx
Project Structure:
- ./src/App.tsx
Javascript
import ClickCounter from './components/ClickCounter'; function App() { return ( <ClickCounter /> ); } export default App; |
- ./src/index.tsx
Javascript
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; // Creating a root element to attach // the application to const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); // Strict mode enabled root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
- ./src/components/ClickCounter.tsx
Javascript
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; |
Output:
