How To Code in React.js

41.9k views

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.

  • 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.
  • 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.
  • 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.
  • 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.
  • 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.