The following is a transcript of a white paper I wrote on becoming a React programmer. The original paper can be found here.
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.
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 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.
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 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.
For 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.
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.
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.
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.
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.
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.
Node, npm and Git
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 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
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.
This white paper is based on research from the following sources:
- 3 Steps to Learn React Native in 2019: https://medium.com/swlh/3-steps-to-learn-react-native-in-2019-5cdb3d1e1c84
- 8 tech companies discuss the advantages of using React JS: https://builtin.com/software-engineering-perspectives/react-js-benefits
- 2019 Stats on Top JS Frameworks: React, Angular & Vue: https://www.tecla.io/blog/2019-stats-on-top-js-frameworks-react-angular-and-vue/
- Benefits of ReactJS: Top 10 Reasons to Choose It: https://customerthink.com/benefits-of-reactjs-top-10-reasons-to-choose-it/
- Freelanced: The Rise Of The Contract Workforce: https://www.npr.org/2018/01/22/578825135/rise-of-the-contract-workers-work-is-different-now
- How to become a React developer in 5 months: https://www.freecodecamp.org/news/how-to-become-a-react-developer-in-5-months/
- React (official site): https://reactjs.org/
- React Developer Hiring Guide 2019: Salaries, Freelance Rates, etc.: https://arc.dev/blog/reactjs-hiring-guide-7p7mpngq0o
- Road map to becoming a React Native developer in 2018 (for beginners): https://medium.com/@wdevon99/road-map-to-becoming-a-react-native-developer-in-2018-for-beginners-cc26af18c71
- State of the React Job Market: 2019–09–02: https://medium.com/@Charles_Stover/state-of-the-react-job-market-2019-09-02-d81e6d9cf8e
- What are the business benefits of a React.js framework?: https://firstname.lastname@example.org/what-are-the-business-benefits-of-a-react-js-framework-61a2ab26ef90
- What are the main differences between ReactJS and React-Native?: https://medium.com/@alexmngn/from-reactjs-to-react-native-what-are-the-main-differences-between-both-d6e8e88ebf24
- Code Academy: https://www.codecademy.com/
- Khan Academy: https://www.khanacademy.org/
- Learn to Code HTML & CSS: https://learn.shayhowe.com/
- W3 Schools: https://www.w3schools.com/
- Mozilla Developer Network: https://developer.mozilla.org/
- Coursera: https://www.coursera.org/
- Udemy: https://www.udemy.com/
- LinkedIn Learning: https://www.linkedin.com/learning/
- GitHub: https://try.github.io/