• Post category:StudyBullet-10
  • Reading time:14 mins read


Build a React frontend for AssemblyScript smart contract

What you will learn

Introduction to HTML

JavaScript programming introduction

React development introduction

Connect a React Dapp with NEAR contract

Interact with NEAR contract in dapp

Show AssemblyScript contract contents in React

Build a React frontend for AssemblyScript smart contract

Build dapp React components

Render all data from AssemblyScript contract in dapp

Connect to AssemblyScript add function in React component

Expand smart contract for complex data

Update React dapp with AssemblyScript data model

Enable purchase from AssemblyScript contract in React

Test purchase with NEAR smart contract

Expand model with more properties

Description

What is the NEAR blockchain?

  • built to be simple, secure and scalable.
  • Low cost. High speed. Effortless scale.
  • <0.01USD Transaction Cost
  • 18M+ Active Accounts
  • 400K Daily Transactions
  • ~2.4s Time to Finality
  • Contracts, DAOs, dapps, funding
  • Layer 1 blockchain

    not dependent on other chains.

uses a unique scaling mechanism

  • Nightshade sharding
  • Scales infinitely
  • resists short-term usage spikes

Proof of stake

  • More efficient than Bitcoin and Ethereum

web-based wallet

  • no need for users to install programs or browser extensions
  • makes it especially easy to onboard new users (e.g. through named accounts)

Certified carbon neutral

  • consumes in a year the same energy bitcoin consumes in 3 minutes

Interoperable with Ethereum

  • using Rainbow Bridge

Your Instructor

Alexandra Kropova is a software developer with extensive experience in full-stack web development, app development and game development. She has helped produce courses for Mammoth Interactive since 2016, including the Coding Interview series in Java, JavaScript, C++, C#, Python and Swift.


Get Instant Notification of New Courses on our Telegram channel.


Mammoth Interactive is a leading online course provider in everything from learning to code to becoming a YouTube star. Mammoth Interactive courses have been featured on Harvard’s edX, Business Insider and more.

Over 11 years, Mammoth Interactive has built a global student community with 1.1 million courses sold. Mammoth Interactive has released over 250 courses and 2,500 hours of video content.

Founder and CEO John Bura has been programming since 1997 and teaching since 2002. John has created top-selling applications for iOS, Xbox and more. John also runs SaaS company Devonian Apps, building efficiency-minded software for technology workers like you.

Join 1.3+ million students in high-quality courses featured at Harvard

  • Lifetime access that never expires
  • Project-based curriculum to superboost your portfolio
  • Graduation certificate for every course
  • Absolute beginner-friendly
  • 90% off today
  • Use any computer
  • Satisfaction guarantee
  • Get all source code
  • Popular bundle by Mammoth students
  • Perfected over years of training

Reviews from the Mammoth Community

“This is AMAZING I just learned how to code without breaking a sweat, this is really easy and fun!” -Shalonda Lewis

“This course so far is by far amazing! The instructor is very encouraging and up beat.” -Moiz Saqib

“It was informative and definitely covered the basics. Easy to understand and to follow.” -Colin Mooney

English
language

Content

00 Project preview

01 Project preview – Build a marketplace dapp on NEAR blockchain
Source Files

01 (Prerequisite) Blockchain and Smart Contracts Overview

00 Blockchain Introduction
02 What is a Smart Contract
03 What is the NEAR blockchain
Source Files

06b (Prerequisite) Command Line Fundamentals

Why All Developers Need To Know The Command Line
What Are Linux And Unix Terminals
Install Linux Command Line On Windows

06b-2 (Prerequisite) Command Line Fundamentals

01 Build Your First Command In The Command Line
02 Navigate Directories In The Command Line
03 Build And Edit A New File In The Command Line
04 Move Files In The Command Line

06c (Prerequisite) Install Node and npm

What Is Node JS
Install Node And NPM On Mac Or Windows
How to Install Node and NPM on Windows
Source Files

06d (Prerequisite) Install yarn

01 What is yarn
02 Install yarn on Mac
03 Install yarn on Windows
Source Files

06e (Prerequisite) Install project tools

01 Install NEAR CLI and AssemblyScript build tools
Source Files

09a2 (Prerequisite) Introduction to HTML

01. Course Requirements
02. What is JSBin
03. Setting up the HTML Document
04. Header Tags and Paragraphs Tags
05. Styles
06. Bold underLine and Italic Tags
07. Adding in a Link
08. Adding in a Image
09. Adding a Link to an Image
10. Lists
11. Tables
12. Different Kinds of Input
13. Adding in a Submit Button

09a3 (Prerequisite) Introduction to JavaScript

01. Variables
02. JavaScript
03. Numbers
04. Booleans
05. If Statements
06. Arrays
07. For Loops
08. While Loops
09. Objects
10. Functions
11. Foreach
12. Map Functions
13. Using Objects As Dictionary
14. Switch Statements
15. Destructuring
16. Spread Operator
17. String Templates
18. Error Handling
19. Let And Const Keywords
20. Do-while
21. Sets
22. Maps
23. Stacks
24. Queues
25. For Loop
26. Recursive Functions
27. Loop Labeling
28. 2d Arrays
29. Settimeout
30. Sentimental
31. Functions With Optional Parameters-1
32. Basic Regular Expression
33. Handle Keypress Events
34. Priority Queue
35. Add delete Object Property
36. Example With Sets Part 1
36. Example With Sets Part 2
37. Concat
38. Flat And Flatmap

09a4 (Prerequisite) Introduction to React

00 Why You Should Learn React
01 React Introduction
02 Set up a Container
03 Generate a List
04 Add Items to the List
05 Clear Input Field
06 Remove a Task
Source Files

10 Connect a React Dapp with NEAR contract

00 What is web3JS
01 Set up React dapp for NEAR
02 Define configuration for NEAR in React
04 Connect to NEAR wallet and contract in React
05 Test connection to wallet and contract
Source Files

11 Interact with NEAR contract in dapp

01 Handle sign in and sign out of wallet
02 Call NEAR functions in dapp
Source Files

12 Show AssemblyScript contract contents in React

01 Build user interface to establish the wallet connection
02 Show state values from AssemblyScript contract in React
Source Files

13 Build a React frontend for AssemblyScript smart contract

01 Connect to contract before rendering dapp
02 Build a Course component
Source Files

14 Render all data from AssemblyScript contract in dapp

01 Get all entries in AssemblyScript smart contract map
02 Get all entries from AssemblyScript in React
03 Render an AssemblyScript map in React DOM
04 Build a Courses component to render all entries
Source Files

15 Connect to AssemblyScript add function in React component

01 Build React component to add entry to AssemblyScript map
02 Connect to add entry function in React component
Source Files

16 Expand smart contract for complex data

01 Build model to represent course
02 Update smart contract to use complex data model
03 Update AssemblyScript smart contract on NEAR
Source Files

17 Update React dapp with AssemblyScript data model

01 Update Courses component with complex data model
02 Update adding course with complex data model
Source Files

18 Enable purchase from AssemblyScript contract in React

01 Build AssemblyScript method for purchase
02 Build NEAR customer account to test purchase
03 Get more test NEAR token from faucet
04 Fund testnet wallet with NEAR CLI
Source Files

19 Test purchase with NEAR smart contract

01 Test purchase with NEAR smart contract
02 Use a React component for each object
03 Enable NEAR purchase in React dapp
04 Send NEAR with purchase in React dapp
Source Files

20 Expand model with more properties

01 Format each course in a Bootstrap card
02 Add image to model in AssemblyScript smart contract
03 Display image from AssemblyScript smart contract in React dapp
Source Files