diff --git a/Basics/config.yml b/Basics/config.yml index 7aa27cf03..920776de4 100644 --- a/Basics/config.yml +++ b/Basics/config.yml @@ -6,6 +6,8 @@ level: 1 tags: - Remix steps: + - name: Introduction to Remix IDE + path: remix_intro - name: Intro to the Interface path: interface_introduction - name: Intro to Workspaces diff --git a/Basics/interface_introduction/README.md b/Basics/interface_introduction/README.md index ae4e50365..413a7fdba 100644 --- a/Basics/interface_introduction/README.md +++ b/Basics/interface_introduction/README.md @@ -1,15 +1,12 @@ -## Remix is composed of four panels. +![Remix layout](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/remix-layout.png) -![Remix layout](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/a-layout1c.png "Remix layout") +Each component of the Remix IDE performs specific functions: -- Most plugins appear in the **Side Panel**. -- Editing code happens in tabs in the **Main Panel**. -- The results of transactions and other actions are visible in the **Terminal**. -- Switching between plugins happens in the **Icons Panel**. -- To make a panel larger, drag its border. +- Most plugins appear in the **Side Panel**. +- The **Top Bar** allows you to switch between workspaces, login with GitHub, set your themes, and access system settings. +- You can edit code in tabs on the **Main Panel**. +- You can view the results of transactions and other actions performed on the IDE in the **Terminal**. +- You can switch between plugins on the **Icon Panel**. +- The **Status Bar** provides info about your current branch, alerts, and tips. -Try clicking the **Solidity Compiler** icon ![](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/solidity-icon.png) in the **Icons Panel**. Then click the **Deploy & Run** icon ![](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/deploy-run.png). Then come back to **LearnEth** by clicking this icon ![](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/learneth.png). - -In the **Main Panel** of Remix, make sure you see the **Home** tab. The **Home** tab has lots of useful links. To navigate there, either click the **Home** tab in the **Main Panel** or click the Remix icon ![Remix icon](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/remix-logo.png "Remix icon") on the top of the icon panel. - -- See all the plugins in the **Plugin Manager**. Click this icon ![plugin manager](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/plugin1.png "Plugin Manager icon") in the lower left corner Remix. \ No newline at end of file +**TIP: You can make a panel larger (or smaller) by dragging its border.** diff --git a/Basics/interface_introduction/images/remix-layout.png b/Basics/interface_introduction/images/remix-layout.png new file mode 100644 index 000000000..ec6acb989 Binary files /dev/null and b/Basics/interface_introduction/images/remix-layout.png differ diff --git a/Basics/remix_intro/README.md b/Basics/remix_intro/README.md new file mode 100644 index 000000000..bf354d730 --- /dev/null +++ b/Basics/remix_intro/README.md @@ -0,0 +1,36 @@ +Remix IDE is a browser-based (also includes a desktop variant) development environment for building, testing, and shipping smart contracts. It’s designed to remove setup friction, make feedback loops tight, and help you reason about what’s really happening on-chain. + +This page explains what Remix is for, how it’s structured, and the mental model to bring to it. + +## Why Remix? + +Writing smart contracts without Remix often starts with setup work that distracts from the code. First, you have to setup a local development environment by installing Node.js so JavaScript-based tools and CLIs can run, adding a Solidity compiler that matches your code so builds are deterministic.You also have to choose a framework like Hardhat or Foundry for compilation, testing, scripting, and deployments. + +You might also include plugins like Ethers/Web3 for calls, coverage and gas reporters for quality, and linters or formatters for consistency. All this is before you write a single line of contract code. + +Remix compresses this process in your browser and all you need to do is open a URL (remix.ethereum.org), write Solidity (or Vyper via plugin), compile, deploy to a network, and interact with your contracts, all in one place. + +## How Remix is Structured + +Think of Remix as three layers: + +### Workspace & Files + +Your code lives in a workspace: folders and files you can create, import, or connect to external sources. Remix stores data in the browser (IndexedDB) or via integrations; you can export at any time. + +### Plugins + +Everything in Remix is a plugin, even “core” modules, so you can enable/disable to fit your flow. Some examples of core plugins include: + +- **File Explorer**: Allows you to navigate and manage files in Remix. +- **Compiler**: Turns Solidity/Vyper into bytecode and ABI. + +- **Deploy & Run**: Sends transactions, deploys contracts, and lets you call functions. + +- **Debugger**: Steps through transactions with stack, memory, and storage views. + +- **Static Analysis & Linting**: Catches common pitfalls before you ship. + +### Network & Accounts + +Remix can talk to a local VM (in-browser EVM for fast iteration), testnets, or mainnets via a provider. Accounts can be generated by Remix’s in-memory VM or injected from wallet extensions. You choose the environment each time you deploy or run a call. diff --git a/Basics/workspaces/README.md b/Basics/workspaces/README.md index ddb6993b5..97a47d283 100644 --- a/Basics/workspaces/README.md +++ b/Basics/workspaces/README.md @@ -8,15 +8,15 @@ The **default_workspace** has three Solidity (.sol) files in the contracts folde ![](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/interface_introduction/images/select-box.png) -But Workspaces are not only for templates. When cloning a repo into Remix, the files will be put into a Workspace. +But Workspaces are not only for templates. When cloning a repo into Remix, the files will be put into a Workspace. Let's create a new Workspace -1. At the top of the File Explorer, click the hamburger icon (the 3 horizontal lines). Read through the commands and tools in this menu. +1. At the top of the File Explorer, click the hamburger icon (the 3 horizontal lines). Read through the commands and tools in this menu. 2. Select **+ Create** (the first choice). -3. In the modal the comes up, choose one of the templates. +3. In the modal the comes up, choose one of the templates. ![hamburger](https://raw.githubusercontent.com/ethereum/remix-workshops/master/Basics/workspaces/images/popup.png) diff --git a/README.md b/README.md index 3e6a4e2e1..1434c1a6f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # This is a repo of tutorials for the Remix's LearnEth Plugin - ### To use these tutorials: - **1. Open Remix** https://remix.ethereum.org @@ -14,22 +12,23 @@ https://remix.ethereum.org **4. You may need to sign into Github especially during an in-person workshop** -Github will block too many requests from the same location, unless you are signed into Github and have input your token. Generally, this is only an issue during in person workshops, when there can be many requests from the same location. +Github will block too many requests from the same location, unless you are signed into Github and have input your token. Generally, this is only an issue during in person workshops, when there can be many requests from the same location. To input your Github token: - In one browser window - go to https://remix.ethereum.org and go to the settings tab - - In another browser window go to: - - https://github.com/settings/tokens - + - In another browser window go to: + + https://github.com/settings/tokens + and create a new token and save it in Remix in the you just opened on the settings tab. --- + ### Write your own tutorials for LEARNETH: + See this site for instructions: https://remix-learneth-plugin.readthedocs.io/en/latest/index.html#creating-tutorials --- -