How To Code in React.

js | DigitalOcean

By Joe MorganDeveloper and author at DigitalOcean.

// Tutorial Series //

How To Code in React.js

Introduction

React is a popular JavaScript framework for creating front-end applications, such as user interfaces
that allow users to interact with programs. Originally created by Facebook, it has gained popularity by
allowing developers to create fast applications using an intuitive programming paradigm that ties
JavaScript with an HTML-like syntax known as JSX.

In this series, you will build out examples of React projects to gain an understanding of this
framework, giving you the knowledge you need to pursue front-end web development or start out on
your way to full stack development.

Summary View

detailed View

// Tutorial //

Starting a new JavaScript project with React used to be a complicated process. But now, Create React
App includes all the JavaScript packages you need to run a React project, including code transpiling,
basic linting, testing, and build systems. In this tutorial, you’ll use Create React App to start a React
application. You’ll also run a build to create a minified version of your app, use a server with hot
reloading to give you instant feedback, and explore the React file structure.

// Tutorial //

JSX is an abstraction that allows you to write HTML-like syntax in your JavaScript code and will
enable you to build React components that look like standard HTML markup. Since you are also
writing JavaScript, you’ll be able to take advantage of JavaScript functions and methods, including
array mapping and short-circuit evaluation for conditionals. In this tutorial, you’ll build a working
application that uses a variety of JSX features to display elements that have a built-in click listener.

// Tutorial //

Custom components are independent pieces of functionality that you can reuse in your code, and are
the building blocks of all applications built on the React framework. Often, they can be simple
JavaScript functions and classes, but you use them as if they were customized HTML elements.
Buttons, menus, and any other front-end page content can all be created as components. In this
tutorial, you’ll build your own custom component, and use this distinction to organize your project’s
file structure.

// Tutorial //

Props are arguments that you provide to a JSX element in a React application. They look like
standard HTML props, but they aren’t predefined and can have many different JavaScript data types,
including numbers, strings, functions, arrays, and even other React components. In this tutorial,
you’ll create custom components by passing props to your component. After adding props, you will
use PropTypes to define the type of data you expect a component to receive.

// Tutorial //

In this tutorial, you’ll create wrapper components with props using the React JavaScript library.
Wrapper components are components that provide a default structure to display the child
components. This pattern is useful for creating user interface (UI) elements that are used repeatedly
throughout a design, like modals, template pages, and information tiles. You’ll use the rest and spread
operators to collect unused props to pass down to nested components.

// Tutorial //

In this tutorial, you’ll learn three different ways to style React components: plain Cascading Style
Sheets (CSS), inline styles with JavaScript-style objects, and JSS, a library for creating CSS with
JavaScript. To illustrate these methods, you’ll build an example Alert component that will either show
a success style or an error style depending on the prop. You will then refactor it using each of the
styling options to see the similarities and differences between each.

// Tutorial //

In React, state refers to a structure that keeps track of how data changes over time in your
application. Managing state is a crucial skill in React because it allows you to make interactive web
applications. In this tutorial, you’ll run through an example of managing state on class-based
components. This tutorial will first show you how to set state using a static value and then how to set
a state as the current state, using a product page component as an example.

// Tutorial //

React Hooks are a broad set of tools in the React front-end JavaScript library that run custom
functions when a component’s props change. Since this method of state management doesn’t require
you to use classes, developers can use Hooks to write shorter, more readable code that is easy to share
and maintain. Throughout this tutorial, you’ll learn how to set state using the useState and
useReducer Hooks, using a product page component with a shopping cart as an example.

// Tutorial //

In this tutorial, you’ll share state across multiple components using React context. React context is an
interface for sharing information with other components without explicitly passing the data as props.
This means that you can share information between a parent component and a deeply nested child
component, or store site-wide data in a single place and access them anywhere in the application. To
illustrate this, this tutorial will create a website where users can build custom salads.

// Tutorial //

The React Developer Tools browser extension gives you an interface for exploring the React
component tree of your JavaScript app, along with the current props, state, and context for individual
components. It can also show you which components are re-rendering and can generate graphs to
show how long individual components take to render. In this tutorial, you will install React Developer
Tools on the Google Chrome, then use it to analyze the performance of a sample app that analyzes
text.

// Tutorial //
In JavaScript apps using the React front-end library, you can use event handlers to update state data,
trigger prop changes, or prevent default browser actions. To do this, React uses a SyntheticEvent
wrapper instead of the native Event interface. In this tutorial, you’ll build several sample components
that handle user events. You’ll learn how to add event handlers to components, pull information from
the SyntheticEvent, and add and remove Window event listeners.

// Tutorial //

Since most React applications are single page applications (SPAs), web forms usually do not submit
the information directly from the form to a server. Instead, they capture the form information on the
client-side and send or display it using additional JavaScript code. In this tutorial, you’ll build forms
using React Hooks and state objects. By the end of this tutorial, you’ll be able to make a variety of
forms using text inputs, checkboxes, select lists, and more.

// Tutorial //

In JavaScript development with the React library, asynchronous programming presents unique
problems. When you use React functional components for example, asynchronous functions can
create infinite loops. In this tutorial, you’ll find out how to avoid asynchronous programming bugs,
load data with the useEffect React Hook, and split your code for on-demand lazy loading using React
lazy and Suspense.

// Tutorial //

In this tutorial, you’ll use the useEffect and useState React Hooks to fetch and display information in
a sample application, using JSON server as a local API for testing purposes. You’ll load information
when a component first mounts and save customer inputs with an API. You’ll also refresh data when a
user makes a change and learn how to ignore API requests when a component unmounts.

// Tutorial //

Redux is a popular data store for JavaScript and React applications. In this tutorial, you’ll use store,
actions, reducers, and the useSelector Hook to build a bird watching test application. You’ll then pull
data into your components and dispatch new changes to update the data.

// Tutorial //

In React, routers help create and navigate between the different URLs that make up your web
application. React Router is designed with intuitive components to let you build a declarative routing
system for your application. In this tutorial, you’ll install and configure React Router, build a set of
routes, and connect to them using the <Link> component. You’ll also use React Hooks to access data
and other routing information and create nested routes.

// Tutorial //

In your React application, you can use authentication to manage which users have access to which
pages. In this tutorial, you’ll create a React application using a token-based authentication system.
You’ll create a mock API that will return a user token, build a login page that will fetch the token, and
check for authentication without rerouting a user. As you build the application, you’ll explore
different methods for storing tokens, including using localStorage and sessionStorage.

// Tutorial //

In React applications, performance problems often originate from component re-rendering. Because
of this, learning how to prevent unneeded re-renders can help to optimize the performance of your
React app. In this tutorial, you’ll look at how different actions can trigger re-renders and how you can
use Hooks and memoization to minimize expensive data calculations. By the end of this tutorial,
you’ll be familiar with many performance enhancing Hooks, such as the useMemo and useCallback
Hook.

// Tutorial //

In this tutorial, you’ll deploy a React application from your local machine to an Ubuntu 20.04 server
running Nginx. You’ll build an application using Create React App, use an Nginx config file to
determine where to deploy files, and securely copy the build directory and its contents to the server.
By the end of this tutorial, you’ll be able to build and deploy a React application.

// Tutorial //

DigitalOcean’s App Platform is a Platform as a Service (PaaS) product that lets you configure and
deploy applications from a source repository. This can be a quick and efficient way to deploy your
React applications, and if you are using React to build a site with no backend, you can use App
Platform’s free tier. In this tutorial, you will create a React app with Create React App, push it to
GitHub, then deploy it to App Platform for a quick continuous deployment option.

// Book //

This book is an introduction to React that works from the foundations upward. Each chapter takes
you a little deeper into the React ecosystem, building on your previous knowledge. Along the way,
you’ll learn how to maintain internal state, pass information between parts of an application, and
explore different options for styling your application.

Check out all our Tutorial Series

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge
in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and
scale your project or business, and subscribe to topics of interest.

Sign up now