ruanyf / react-demos

This is a collection of simple demos of React.js. These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library. Related Projects • Flux Demo • Webpack Demos • React Router Tutorial • CSS Modules Demos • React Testing Demo • A boilerplate for React-Babel-Webpack project How to use First, copy the repo into your disk. Then play with the source files under the repo's demo* directories. HTML Template Index • Render JSX • Use JavaScript in JSX • Use array in JSX • Define a component • this.props.children • PropTypes • Finding a DOM node • this.state • Form • Component Lifecycle • Ajax • Display value from a Promise • Server-side rendering --- Demo01: Render JSX demo / source The template syntax in React is called JSX. JSX allows you to use HTML tags in JavaScript code. is the method which translates JSX into HTML and renders it into the specified DOM node. To actually perform the transformation in the browser, you must use to indicate JSX code, and include , which is a browser version of Babel and can be found in the babel-core@6 npm release. Before v0.14, React used to translate , but this is now deprecated (more info). Demo02: Use JavaScript in JSX demo / source You can also use JavaScript within JSX. Angle brackets (<) symbolize the beginning of HTML syntax, while curly brackets ( ) represent the beginning of JavaScript syntax. Demo03: Use array in JSX demo / source If a JavaScript variable is an array, JSX will implicitly concat all members of the array. Demo04: Define a component demo / source creates a component class, which implements a render method to return a component instance of the class. Before v16.0, React used to create a component class, but this is now deprecated (more info). You can use to access the attributes of a component. Example: of is John. Please remember the first letter of the component's name must be capitalized, otherwise, React will throw an error. For instance, as a component's name is OK, but is not allowed. And a React component should only have one top child node. Demo05: this.props.children demo / source React uses to access a component's children nodes. Please be mindful that the value of has three possibilities. If the component has no child node, the value is ; If it has a single child node, the value will be an object; If it has multiple children nodes, the result is an array. Keep this in mind as you code. React gave us a utility for dealing with the opaque data structure of . You can use to iterate without worrying if its data type is or . Check official document for more methods offers. Demo06: PropTypes demo / source Components in React have many specific attributes which are called and can be of any type. Sometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components. React has a solution for this and it's called PropTypes. The above component has a prop of . PropTypes tells React that the title is required and its value should be a string. Now we give a number value. Here, the prop doesn't pass the validation, and the console will show you an error message: Visit official doc for more PropTypes options. P.S. If you want to give the props a default value, use . React.PropTypes has moved into a different package since React v15.5. (more info). Demo07: Finding a DOM node demo / source Sometimes you need to reference a DOM node in a component. React gives you the attribute to attach a DOM node to instance created by . Please be mindful that you could do that only after this component has been mounted into the DOM, otherwise you get . Demo08: this.state demo / source React thinks of component as state machines, and uses to hold component's state, to update and re-render the component. You could use component attributes to register event handlers, just like , , , etc. Official Document has all supported events. Demo09: Form demo / source According to React's design philosophy, describes the state of component and is mutated via user interactions, and describes the properties of component and is stable and immutable. Since that, the attribute of Form components, such as <input>, <textarea>, and <option>, is unaffected by any user input. If you wanted to access or update the value in response to user input, you could use the onChange event. More information on official document. Demo10: Component Lifecycle demo / source Components have three main parts of their lifecycle: Mounting(being inserted into the DOM), Updating(being re-rendered) and Unmounting(being removed from the DOM). React provides hooks into these lifecycle part. methods are called right before something happens, and methods which are called right after something happens. The following is a whole list of lifecycle methods. • **componentWillMount()**: Fired once, before initial rendering occurs. Good place to wire-up message listeners. doesn't work here. • **componentDidMount()**: Fired once, after initial rendering occurs. Can use . • **componentWillUpdate(object nextProps, object nextState)**: Fired after the component's updates are made to the DOM. Can use for updates. • **componentDidUpdate(object prevProps, object prevState)**: Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated. • **componentWillUnmount()**: Fired immediately before a component is unmounted from the DOM. Good place to remove message listeners or general clean up. • **componentWillReceiveProps(object nextProps)**: Fired when a component is receiving new props. You might want to depending on the props. • **shouldComponentUpdate(object nextProps, object nextState)**: Fired before rendering when new props or state are received. if you know an update…