Builders Wanted: React Functions was published today as part of the Builders Wanted: a junior web devs roadmap to the open web. The Medium version (with outlinks) is here: https://medium.com/@dawnkelly09/builders-wanted-react-functions-d18a3255ceea Text here for on-chain goodness! Builders Wanted: React Functions A junior web dev’s roadmap to the open web — part 1 Dawn Kelly Dawn Kelly 3 min read · Just now Ready to build? Build DAO wants you! This is the first post of Builders Wanted, a learning series to help junior web developers sharpen their skills in the JavaScript and React concepts needed to build component widgets for the open web. You can still sign up to get email updates when new materials for this series drop. Recap The first step I took to prepare for React is to watch this video where As a Programmer shares ten JavaScript concepts they consider prerequisites to building with React. A less than ten-minute video isn’t going to have a ton of depth but it serves to help us decide what to focus on in the seemingly endless JavaScript universe. Functions We know functions allow us to reuse pieces of code to do a single task without having to rewrite the same lines over and over. If you need to refresh on JavaScript function syntax, a trip to the MDN should have what you need. Regular vs Arrow Functions You will see two kinds of JS functions as you read other builders’ code: regular and arrow functions. There are a few key differences, but most of them won’t matter to us at this point. Arrow functions were introduced in ES6 and are meant to create shorter, simple, easier-to-read functions. Developer Advocate Dillion Megida gives an excellent, in-depth analysis of the differences here. If you have a specific case where you need to use a this binding, create a constructor, or hoist a function, then you need a regular function. If you don’t know what that last sentence means, stick with the arrow functions: your code will look more up-to-date and will be easier to read if you ask someone for help. Class-based and Functional base components You may have seen React components fall into two categories: class-based and functional base components. This is a holdover from before React 16 and comes down to class-based components being stateful and functional base components being stateless. State is like a snapshot of the current data and variables in an application; for example, checking whether or not a user is logged in to decide what to display in the browser. As of React 16, functional base components use React hooks to do jobs that previously were limited to class-based components. That’s a long-winded way of telling you to just worry about functional base components, which are also called functional React components. These components can be created with either regular or arrow functions but, you should expect to see mainly arrow functions in newer code bases. The primary purpose of the functional component is to render the view and data to the browser. We’ll use a return functional react component to handle this for our various widgets (similar to the one below): return ( <Wrapper> <Widget src="mob.near/widget/ProfileLarge" props={{ accountId, profile, link: true, fast, showEditButton: !props.profile, }} /> <Widget src="mob.near/widget/ProfileTabs" props={{ accountId, profile }} /> </Wrapper> ) Don’t worry about the Wrapper and Widget components in the above example. We’ll go over all of this once we get to creating our own widgets. That’s it for functions! In my next post, I’ll cover objects and we’ll work to make sense of “props” (properties) and how they pass data between our components. In the meantime, I encourage you to practice writing some JavaScript. I’m working through the JavaScript Algorithms and Data Structures certification over at freeCodeCamp as I develop this series. A lot of folks also find exercises like those at CodeWars helpful to build repetition and solidify their learnings. If you decide to go that route, time box yourself to 5–10 minutes of really trying to work through the problem and then go look up solutions if you need to. If you feel brave enough to experiment a bit, you can use the online code editor at Near Social to play around with examples of the components we’re working our way up to building. You can use the Search at the top to see what others have built and shared with the community. Start to take a look at their code and how they use functions within the components. Lastly, start thinking about what you would like to build with blockchain technology if you didn’t have to learn Rust or Solidity first — because that’s our destination! #build