meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:tech:wfrontend:environment:start [2024/05/21 14:59] – rubenhuygensixc2024:tech:wfrontend:environment:start [2024/05/27 21:25] (current) – rubenhuygens
Line 2: Line 2:
  
 1. **VSCode (Visual Studio Code)** 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](https://code.visualstudio.com/). It is available for Windows, macOS, and Linux.+   - **Download and install**: VSCode is a powerful, open-source code editor developed by Microsoft. You can download it from the [[https://code.visualstudio.com/|official VSCode website]]. It is available for Windows, macOS, and Linux.
    - **Essential Extensions**:     - **Essential Extensions**: 
      - **ESLint**: Helps in identifying and fixing problems in your JavaScript code. It enforces consistent coding style and can automatically fix many issues.      - **ESLint**: Helps in identifying and fixing problems in your JavaScript code. It enforces consistent coding style and can automatically fix many issues.
Line 9: Line 9:
      - **GitLens**: Enhances Git capabilities within VSCode. It provides insights into code authorship, code reviews, and repository history.      - **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.      - **Live Server**: Launches a local development server with live reload feature, enabling you to see changes in real-time.
-   - For more detailed guidance on using VSCode, refer to the [VSCode Documentation](https://code.visualstudio.com/docs).+   - For more detailed guidance on using VSCode, refer to the [[https://code.visualstudio.com/docs|VSCode Documentation]].
  
 2. **Node.js and npm** 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](https://nodejs.org/). +   - **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 [[https://nodejs.org/|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:+   - **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. 
  
-     ```bash 
      node -v      node -v
      npm -v      npm -v
-     ``` 
-     These commands will display the currently installed versions of Node.js and npm. 
  
 3. **Git** 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](https://git-scm.com/). +   - **Download and install**: Git is a version control system that allows you to track changes in your code. Download it from the [[https://git-scm.com/|Git website]]. 
-   - **Basic setup**: Configure your Git identity by running these commands in your terminal:+   - **Basic setup**: Sign up on the [[https://github.com|GitHub 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 
 +   - For more comprehensive information on using Git, refer to the [[https://git-scm.com/doc|Git Documentation]]
  
-     ```bash +4. **Material-UI**\\ 
-     git config --global user.name "Your Name" +**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. 
-     git config --global user.email "you@example.com" +   - 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.
-     ``` +
-     These commands set your global username and email, which will be used in your commits. +
-   - For more comprehensive information on using Git, refer to the [Git Documentation](https://git-scm.com/doc).+
  
-4. **Create React App** +     npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
-   - **Setting up a new React project**: Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.+
  
-     ```bash +   - 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 [[https://mui.com/material-ui/all-components/|Material-UI All Components page]] 
-     npx create-react-app my-hackathon-app +   - For installation instructions and other documentation, visit the [[https://mui.com/getting-started/installation/|Material-UI Documentation]]
-     cd my-hackathon-app +
-     npm start +
-     ``` +
-     The `npx create-react-app` command sets up a new React project in a directory named `my-hackathon-app`. The `cd my-hackathon-app` command navigates into your project directory, and `npm start` starts the development server, making your application available at `http://localhost:3000`. +
-   - For more information on getting started with Create React App, refer to the [Create React App Documentation](https://create-react-app.dev/docs/getting-started/). +
- +
-5. **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. +
- +
-     ```bash +
-     npm install @mui/material @emotion/react @emotion/styled @mui/icons-material +
-     ``` +
-     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. +
-   - 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](https://mui.com/material-ui/all-components/). +
-   - For installation instructions and other documentation, visit the [Material-UI Documentation](https://mui.com/getting-started/installation/).+
  
-By following these steps, you will have a powerful and efficient development environment set up, allowing you to build and manage modern web applications with ease.+By following these steps, you will have a powerful and efficient development environment set up. Good luck!