Chapter 4

React

React is a JavaScript library for building user interfaces.

React makes user interfaces very easy to build because it cut things into pieces, which are called components.

Why should you use React?

• Fast, scalable, and simple
• JSX: dynamic markup
• Reusable UI components with state
• Change data, without reloading the page

Learning requirements

Before learning React, you should be comfortable with:

• HTML
• CSS
• Javascript (basic Javascript, array methods, promises & asynchronous programming)
• Fetch API & making HTTP Requests

Dev Environment

• Node
• Chrome Browser
• Text editor: Visual Code Studio
• React Developer Tool

Extra libraries

• react-icons: Include popular icons in your React projects. We can use ContextProvider to specify the props of the icons.
• react-markdown: Markdown component for React using remark.
• react-share: Social media share buttons and share counts for React.
• react-toastify: Add notifications to your app with ease.
• json-server: Create mock API with your own data.
• react-chartjs-2: Create different types of charts
• react-table: Build lightweight, fast and extendable tables
• react-modal: Create a modal
• tippyjs-react: Add tooltip
• react-countup: Create animations that display numerical data
• react-idle-timer: Add idle timer
• react-credit-cards: Beautiful credit cards for your payment forms
• react-datepicker: Add date picker
• react-color: Pick color
• mdx-deck: Create presentation deck
• react-player: A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Vimeo, etc.
• react-spinners: A collection of loading spinners