Tutorial by Examples

Installation or Setup

ReactJS is a JavaScript library contained in a single file react-<version>.js that can be included in any HTML page. People also commonly install the React DOM library react-dom-<version>.js along with the main React file: Basic Inclusion <!DOCTYPE html> <html> <...

Hello World Component

A React component can be defined as an ES6 class that extends the base React.Component class. In its minimal form, a component must define a render method that specifies how the component renders to the DOM. The render method returns React nodes, which can be defined using JSX syntax as HTML-like ta...

Hello World

Without JSX Here's a basic example that uses React's main API to create a React element and the React DOM API to render the React element in the browser. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> ...

What is ReactJS?

ReactJS is an open-source, component based front end library responsible only for the view layer of the application. It is maintained by Facebook. ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM. The virtual DOM works fast owning to the fact that it only changes individ...

Hello World with Stateless Functions

Stateless components are getting their philosophy from functional programming. Which implies that: A function returns all time the same thing exactly on what is given to it. For example: const statelessSum = (a, b) => a + b; let a = 0; const statefulSum = () => a++; As you can see fro...

Create React App

create-react-app is a React app boilerplate generator created by Facebook. It provides a development environment configured for ease-of-use with minimal setup, including: ES6 and JSX transpilation Dev server with hot module reloading Code linting CSS auto-prefixing Build script with JS, CSS ...

Absolute Basics of Creating Reusable Components

Components and Props As React concerns itself only with an application's view, the bulk of development in React will be the creation of components. A component represents a portion of the view of your application. "Props" are simply the attributes used on a JSX node (e.g. <SomeComponen...

Page 1 of 1

logo rip
SUPPORT & PARTNERS
STAY CONNECTED

Get monthly updates about new articles, cheatsheets, and tricks.