Tutorial by Examples | RIP Tutorial

Basic Component

Given the following HTML file: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>...

React • Components

Nesting Components

A lot of the power of ReactJS is its ability to allow nesting of components. Take the following two components: var React = require('react'); var createReactClass = require('create-react-class'); var CommentList = reactCreateClass({ render: function() { return ( <div className...

React • Components

Creating Components

This is an extension of Basic Example: Basic Structure import React, { Component } from 'react'; import { render } from 'react-dom'; class FirstComponent extends Component { render() { return ( <div> Hello, {this.props.name}! I am a FirstCompon...

React • Components

setState pitfalls

You should use caution when using setState in an asynchronous context. For example, you might try to call setState in the callback of a get request: class MyClass extends React.Component { constructor() { super(); this.state = { user: {} }; } ...

React • Components

Props

Props are a way to pass information into a React component, they can have any type including functions - sometimes referred to as callbacks. In JSX props are passed with the attribute syntax <MyComponent userID={123} /> Inside the definition for MyComponent userID will now be accessible f...

React • Components

Component states - Dynamic user-interface

Suppose we want to have the following behaviour - We have a heading (say h3 element) and on clicking it, we want it to become an input box so that we can modify heading name. React makes this highly simple and intuitive using component states and if else statements. (Code explanation below) // I ha...

React • Components

Variations of Stateless Functional Components

const languages = [ 'JavaScript', 'Python', 'Java', 'Elm', 'TypeScript', 'C#', 'F#' ] // one liner const Language = ({language}) => <li>{language}</li> Language.propTypes = { message: React.PropTypes.string.isRequired } /** * If there are more ...

React • Components