NEAR University launches React Pathway!

Education
,
1

NEAR University is excited to launch our first educational track for React developers! You might be wondering if you even can be a web3 developer without learning a new language, and the answer is emphatically yes. Whether you are already an expert in React or simply curious about it, if you can spare a little time, you’re ready to learn and BUIDL on NEAR with React!

You might already know by now that NEAR is carbon-neutral, but how NEAR does it is worth mentioning. By utilizing a proof-of-stake protocol with advanced sharding (the only blockchain to do so), NEAR can be infinitely scalable. And in spite of NEAR’s simplicity, it is an extremely durable system, providing guaranteed uptime, secure transfers, and finality in seconds. NEAR is the ideal platform to build on and the NEAR University React pathway aims to show you precisely how, as simply as possible.

What makes this launch exciting is that even without prior web3 experience, you’ll be writing decentralized applications in no time. You don’t even need to learn to write smart contracts! NEAR University will teach you how to interact with smart contract functions using React.

Even if you’re new to React, if you know some JavaScript you’re ready to roll.

Using the provided create-react-app template and hooks, developing your dApp’s frontend is easy. You can just npm install near-api-js and use it to call smart contract functions in your React app in a couple of lines of code. This library allows you to sign in your users with their NEAR wallet and to interact with the NEAR blockchain.

To give you a quick sense of what you’ll learn on this track, try running npx create-react-app my-near-app --template near-js in your terminal. What you’ll get is an app framework with the required tools installed and with examples of how to sign users in, call smart contracts, and read state from the NEAR blockchain.

import React, { useEffect, useState } from 'react';
import { connect, WalletConnection } from 'near-api-js';
import { getConfig } from './config';
export default function App() {
  const [wallet, setWallet] = useState(null);
  useEffect(() => {
    connect(getConfig()).then((near) => setWallet(new WalletConnection(near)));
  }, []);
  const handleLogin = () => {
    wallet.requestSignIn({
      contractId: 'wrap.testnet',
      methodNames: [],
    });
  };
  return (
    <div>
      <button onClick={() => handleLogin()}>Login with NEAR</button>
    </div>
  );
}

Did you think you could do this much with such little code? Whether this excites or confuses you, check out our documentation! It’s easy to read, and you’ll learn about the building blocks of NEAR and the technical and architectural implementations of dApps. We encourage you to learn more and hope you’ll join us on this learning journey.

We want to hear your feedback if you’re a React developer, please join the conversation in the NEAR University Discord Server and chat with the NEAR Foundation’s Education Team!

Visit Build Web3 dApps on NEAR with React | NEAR University to learn more and get started :rocket:

4 Likes