Envelope Github

Upgrade Your Career by Becoming a React Programmer (White Paper)

The following is a transcript of a white paper I wrote on becoming a React programmer. The original paper can be found here.

Introduction

React programming is one of the most lucrative careers in computer technologies as of March 2020. It currently boasts high starting and average salaries and hourly pay, plus rising employment prospects. It’s possible to get on this career path even with no prior knowledge of computer science or any form of coding.

Even for experienced web developers, there are benefits to learning React beyond a higher-paying job. React allows for clean, reusable code to build dynamic, high-performing websites. These benefits also apply to employers, who can see benefits from switching to React in their development workflows.

This paper will present the React.js library and React Native framework for JavaScript and the benefits of using it to create user interfaces for websites and web apps. It will then cover the career prospects for React programmers, and finally a guide on getting started with it.

React Primer

React is a technology developed by Facebook for building website user interfaces. It was released in 2013 as an open source project and is now developed by Facebook in collaboration with other hobbyist coders and companies like Airbnb, Uber and Wix.

React is written in JavaScript (specifically ECMAScript 6 and 7), the standard programming language for the web, used to power everything from Google Maps to Facebook to YouTube. Practically every website uses JavaScript in some capacity. React makes it easier to build apps that run right inside the web browser or on a mobile device.

React has a lot of benefits, but there are important things to know before deciding to switch to it. For beginners, understanding these concepts will also help before diving in to learn more.

React.JS vs React Native

There are two versions of React: React.js and React Native. The two technologies are similar, with a similar syntax and benefits, and are sometimes used interchangeably. However, React.js and React Native are intended to be implemented differently in projects.

React.js is a JavaScript library. It’s a collection of reusable code that coders can easily integrate into an existing project to make their lives easier, accomplishing difficult tasks much quicker than writing their own solution from scratch. It’s a modular approach, designed to be used with or without other libraries or frameworks as required.

By comparison, React Native is a JavaScript framework. It is everything the development team needs to create an app fully within React. It’s intended to be used whole and without the need for other libraries – though other libraries can be used for implementing additional functionality to the project. The Babel preprocessor is required to enable use of the JSX syntax in writing React Native code, and is included by default in React Native projects created via the official npm installer.

However, the largest benefit to React Native is that code written for it can run across desktop and mobile devices with minimal compatibility issues. React Native handles the conversion to different devices under the hood, making it a cost-effective solution for developing mobile apps.

There are differences both big and small between the two versions of React. This paper assumes developers will be using React Native, but many concepts apply to both. One such concept is components, which serve as the foundation of the React development workflow.

React Components

React was developed by Facebook to display dynamic content on the web page without the need to refresh the browser or require input from the user to trigger an update. Facebook’s activity feed is a well-known example, which updates in real-time to display the most recent content. Websites like Airbnb also use React to build their user interfaces.

React components are written to be reusable. A Facebook post, for example, can be reused countless times with different content. Every component is created as an instance of a master component, a sort of blueprint that describes the structure of the component, like where content goes and what sort of functionality every instance of that component has. The benefit is that if Facebook wants to change the look of posts or change their functionality – such as removing the like button – they only need to make changes to the master component. These changes will be applied to all posts rendered on the posts. And because Facebook posts are filled with data dynamically – meaning they’re generated at the time of viewing and don’t have content put in the component by hand – the change even applies retroactively.

Image result for react nested componentsFor experienced object-oriented programmers, components are like objects. In fact, components in React can be created as ECMAScript 6 classes. Like objects, components can be “physical” objects on the web page (a post, a card, a button), but they can also represent a process like a transaction, or a set of data.

Components in React can be nested inside of each other. As an example, imagine a Kanban Board. The entire board is a component, which allows it to be reused, but each column list is also a component, because the Kanban Board has more than one. The list then contains multiple cards, which are components, and each card has multiple list items, which are themselves components too. The purpose is to maintain consistency across identical UI elements.

As mentioned, React components can be dynamically populated with content. A Facebook post, for example, will use the content – such as text or photos – that are assigned to it. When the component is rendered on the screen, React can fetch the associated content from a database and display it in the post. Data can be stored in a relational database, JSON file or even a plain text file. React imposes no restrictions on how data is stored, so long as it the developer knows how to access it in JavaScript. This ability to insert data on the fly is one of the most useful features of React, along with a feature called state.

Props and State

Props and state are two different things when it comes to React, but both are central to creating dynamic UI elements.

Props are data. Data is being used here as a catch-all for anything being dynamically included in a react component. That could be the featured image of a blog post, the text comment of a forum post, or the order number for a transaction. Data can be anything, but it is important that the data developers are using with React components is stored a manner that is logical in the context of the component.

For instance, data relating to a specific Facebook post should be grouped together: the image, the text and the unique ID are associated with each other but can be separated from that of other posts. Associating the data with a unique ID, or some other way to associate a component that particular set of data, is vital to writing clean, optimized React code. In short, always use clean data.

Variable data in React is defined as a component Prop, short for property, when the master component is written. If the component has a variable image, the image source can be written as a Prop, which can be passed when an instance of the component is instantiated. Props can be anything: numbers, text, or any kind of programming construct that the component is written to accept.

State defines the condition of the component and allows the component to change its form and function based on the condition – or state – of the program. For example, a website header may have a State for whether the user is logged in or out of the website. Depending on the State, the header may display either a log-in or log-out button as appropriate. The concept of State can be expanded to any use-case where a component may change if certain conditions are met.

Most importantly, Props and State are not static when instantiated. They can be changed later. An image slider can change the image displayed, or a user can log-in and out of a service without refreshing the page, and the website content will change. This ability to modify the content of the page without refreshing is a major benefit of the JavaScript language, and React takes it a step further to easily create dynamic user interfaces.

JSX

React components can be written in a variety of ways, but the most common and efficient method is using the JSX syntax. JSX is an XML-like syntax that lets developers code and style React code similar to the way they’d write HTML. Unlike alternate web coding syntaxes like SASS and LESS for CSS, JSX will be automatically converted to vanilla JavaScript at runtime using an interpreter called Babel.

React components can be written in JSX by creating a JavaScript class (for ECMAScript 6 and above) or function (for ECMAScript 5 and below) for the component. Inside the class/function, developers can write JSX to define the content and structure of the component, including Props and State. JSX also has a new syntax for writing component methods and conditionals within components. This makes for more readable code, that that keeps all the code for components together.

Writing components in this way, with functionality, structure and styling together, seems to contradict the standard “separation of concerns” model in web development, but is done to allow collaboration on a website between multiple individuals who may not know how other components are written internally. This reduces conflict in style definitions and on external dependencies.

Image result for jsx
The main benefit of JSX is that it simplifies writing large-scale React-driven or React Native applications. But websites like Facebook are not the only ones that benefit from JSX. Even websites or web apps that only use a small amount of React code benefit from the readability and accessibility of the JSX syntax.

Learning React

Programming with React is a complex fusion of new and existing concepts as summarized above, and learning it takes time and effort. But not only hobbyist coders are learning React. There are many ways to become a React programmer it’s possible even for a complete beginner. The following resources are a step-by-step guideline to becoming a React programmer. The guide is organized for complete beginners, but experienced coders can start anywhere along the path.

HTML/CSS

React is a framework to assist in creating UI components for websites and web apps, but to understand what React does and how it is written, React programmers also need to know HTML and CSS.

HTML is a markup language used to define the structure and content of a web page. Well-written, semantic HTML is easy for both machines and people to read. React components are also written in an HTML-like syntax, which makes knowing HTML important. React programmers may also be called upon to write HTML as part of their duties, and then augment those web pages with React.

CSS is another core web language used to define the layout and appearance of a web page – distinct from the HTML, which only defines what the content is and its semantic relationship to other content. Again, React programmers may be expected to style entire web pages, or at least need to know how to style the components they create in React.

There are many online resources for learning HTML5 and CSS3, the latest standards for the languages. Free resources include Code Academy, Khan Academy and Shay Howe’s online basic and advanced tutorials for HTML and CSS. Documentation and examples are also available at W3 Schools and the Mozilla Developer Network. Special attention should be paid to CSS selectors and the CSS grid and flexbox layout engines, which allow for responsive web design that works on desktop and mobile. Udemy, LinkedIn Learning and Code Academy all have paid content on these topics.

JavaScript

React is a library and framework for JavaScript, so it’s important to know JavaScript and the fundamental concepts of React programming, such as variables, conditionals, functions and objects.

JavaScript is the third core web language alongside HTML and CSS, and augments them by dynamically modifying the content, structure and style of a web page. It also allows for interactivity and even robust applications, such as Google Maps. Understanding how to manipulate web pages, include libraries and troubleshoot code are all foundational skills for learning React.

Free resources for learning JavaScript include The Modern JavaScript Tutorial, Eloquent JavaScript and Khan Academy.  Documentation is also available from W3 Schools and Mozilla Developer Network. Pay special attention to concepts like objects, DOM manipulation and working with data. These skills can be further learned through paid content on Coursera, Udemy and LinkedIn Learning.

Node, npm and Git

Git is a tool for code version control and collaboration and npm is a tool for downloading and managing code dependencies for Node.js. Node.js is a program used in React development that allows JavaScript code to run on the server side rather than on the client side, keeping sensitive code and information behind the scenes and out of the hands of users. All told, the three programs are necessary for React programmers to learn as they form integral parts of the developer workflow.

GitHub has free online tutorials on how to use it and Git. Node tutorials can be found on W3 Schools, along with tutorials on using npm.

React

React programming builds upon knowledge of the previous topics, such as coding websites, object-oriented programming and managing code.

Beginners should start by following the free tutorials on the official React website and W3 Schools. These resources will cover the basics of React components and ES6 features that apply to React programming, like classes and arrow functions. Udemy, LinkedIn Learning and Code Academy also have paid courses for developers to learn React Native, to develop native mobile and desktop apps.

React Programmer Job Market

Since 2013, the demand for React developers has grown to exceed demand for AngularJS and Vue.js, two popular JavaScript frameworks that saw popularity in the years before React. Due to Facebook’s involvement in the project and helpful features like JSX, React is seeing major interest from employers, who see the technology as a cost-effective means to develop cross-platform applications.

Demand for React programmers in the United States is most lucrative in the states of New York and Missouri, where average salaries reach up to $150,000, compared to the national average of $120,000. Although entry-level positions start at only $52,050, experienced programmers make up to $200,000. Note that general economic trends show a shift away from salaried pay to contract work due to fewer labor protections afforded to freelancers. The hourly pay for freelancers is therefore higher (average $70/hour).

Employers looking for React programmers asked for a median of 3 years of experience in web development, provided the applicant could show a strong understanding of React. Additionally, a third of those employers required a degree in computer science, with nearly half of those companies allowing for real-world experience in place of a degree.

Employers also look for applicants with skills besides React programming, such as working with databases and other back-end skills, as well as soft skills like good communication and the ability to work in a team.

Getting a Job

Learning React is only the first step to becoming a professional React developer. The next step is to apply that knowledge to getting a job.  Prospective employers are interested in applicants with key soft skills like communication, teamwork and adaptability. Secondary skills like database management, network coding and PHP are similarly useful. Most importantly, prospective programmers should create a variety of samples to display their coding and creative thinking skills.

Being a professional programmer is as much about being able to envision solutions to real-world problems as it is about understanding how to write code.

References

This white paper is based on research from the following sources:

Copyright 2021 © Digital Spaces Inc, All Rights Reserved