Building a dApp UI from scratch with just HTML, CSS, and JavaScript can quickly become complex and difficult to manage. Front-end frameworks like React, Vue.js, and Angular provide structure, reusable components, and efficient ways to handle user interactions. This leads to cleaner, more maintainable, and scalable code. React is the recommended choice for this course due to its popularity, extensive documentation, and vast ecosystem of libraries and tools specifically designed for dApp development.

We'll use React for this lesson. You'll need Node.js and npm (Node Package Manager) or yarn installed on your system.

1. Create a React App: Open your terminal and run the following command to create a new React app:

   bash npx create-react-app my-dapp-ui cd my-dapp-ui

2. Start the Development Server: Navigate into your project directory and start the development server:

   bash npm start

   This will open your app in your web browser (usually at http://localhost:3000).

3. Project Structure: Familiarize yourself with the basic project structure: src/ (where your code will live), public/ (for static assets), package.json (lists project dependencies).

Let's create a simple UI component that displays a button. This button will trigger a function in your smart contract (in a later lesson, we will make it interact with your smart contract).

1. Edit src/App.js: Open the src/App.js file in your code editor. Replace the default code with the following:

   ```javascript
   import React, { useState } from 'react';

   function App() {
   const [buttonText, setButtonText] = useState('Click Me');

   const handleClick = () => {
   setButtonText('Clicked!');
   // In a real dApp, you would call a smart contract function here.
   console.log('Button clicked!');
   };

   return (
   

   
   

   My dApp

   
   {buttonText}
   
   
   );
   }

   export default App;
   ```

2. Explanation:

   • import React, { useState } from 'react';: Imports the React library and the useState hook, which allows us to manage the state of our component.
   • const [buttonText, setButtonText] = useState('Click Me');: Creates a state variable buttonText and a function setButtonText to update its value. Initially, buttonText is set to 'Click Me'.
   • handleClick = () => { ... }: Defines a function that will be executed when the button is clicked.
   • setButtonText('Clicked!');: Updates the buttonText state to 'Clicked!'.
   • <button onClick={handleClick}>{buttonText}</button>: Renders a button. onClick calls the handleClick function when the button is clicked. The button's text displays the value of the buttonText state.

3. Save and View: Save the App.js file. The browser should automatically refresh and display the button. Clicking the button will change the text from 'Click Me' to 'Clicked!' in your UI. This shows how React updates the UI based on state changes.

4. Styling: You can add simple styling by adding CSS to src/App.css.

In a future lesson, you'll learn to integrate your React UI with your smart contract. This will typically involve:

1. Importing necessary libraries: You'll need libraries like ethers.js or web3.js to interact with the Ethereum blockchain.
2. Connecting to a provider: You'll connect to an Ethereum provider (e.g., MetaMask, Infura) to access your smart contract.
3. Creating a contract instance: You'll use the contract's ABI (Application Binary Interface) and address to create an instance of your smart contract within your React app.
4. Calling smart contract functions: You'll then call the functions of your smart contract from your React components. This may involve passing data to the contract and handling transaction confirmations.