1. VSCode (Visual Studio Code)
Download and install: VSCode is a powerful, open-source code editor developed by Microsoft. You can download it from the
official VSCode website. It is available for Windows, macOS, and Linux.
Essential Extensions:
ESLint: Helps in identifying and fixing problems in your JavaScript code. It enforces consistent coding style and can automatically fix many issues.
Prettier: A code formatter that ensures your code adheres to a consistent style, making it more readable and maintainable.
Material-UI Snippets: Provides snippets for commonly used Material-UI components, speeding up the development process.
GitLens: Enhances Git capabilities within VSCode. It provides insights into code authorship, code reviews, and repository history.
Live Server: Launches a local development server with live reload feature, enabling you to see changes in real-time.
-
2. Node.js and npm
Download and install: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, while npm is the default package manager for Node.js. Download the latest version from the
Node.js website.
Check installation: After installation, you can verify if Node.js and npm are installed correctly by running the following commands in your terminal. These commands will display the currently installed versions of Node.js and npm.
node -v
npm -v
3. Git
Download and install: Git is a version control system that allows you to track changes in your code. Download it from the
Git website.
-
Create a new repository
Give it a name and description
Add a README file
Click create
Invite your teammates under Settings > Collaborators
We recommend using GitHub desktop to manage your files locally
-
4. Material-UI
Install Material-UI: Material-UI is a popular React UI framework that implements Google's Material Design. It provides pre-built components that can help you build beautiful, responsive user interfaces quickly.
This command installs the core Material-UI library, along with Emotion, which is a library for writing
CSS styles with JavaScript, and Material-UI Icons for using Material Design icons in your project.
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
Material-UI offers a wide range of components such as buttons, grids, and dialogs. You can browse the available components and their usage on the
Material-UI All Components page
-
By following these steps, you will have a powerful and efficient development environment set up. Good luck!