# react-demos **Repository Path**: shinezz/react-demos ## Basic Information - **Project Name**: react-demos - **Description**: a collection of simple demos of React.js - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-03-18 - **Last Updated**: 2023-07-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 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 Demos - [Webpack Demos](https://github.com/ruanyf/webpack-demos) - [Flux Demo 01](https://github.com/ruanyf/flux-for-stupid-people-demo) - [Flux Demo 02](https://github.com/ruanyf/flux-todomvc-demo) - [A boilerplate for React-Babel-Webpack project](https://github.com/ruanyf/react-babel-webpack-boilerplate) ## How to use First copy the repo into your disk. ```bash $ git clone git@github.com:ruanyf/react-demos.git ``` Then play with the source files under the repo's demo* directories. ## HTML Template ```html

``` ## Index 1. [Render JSX](#demo01-render-jsx-source) 1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx-source) 1. [Use array in JSX](#demo03-use-array-in-jsx-source) 1. [Define a component](#demo04-define-a-component-source) 1. [this.props.children](#demo05-thispropschildren-source) 1. [PropTypes](#demo06-proptypes-source) 1. [Finding a DOM node](#demo07-finding-a-dom-node-source) 1. [this.state](#demo08-thisstate-source) 1. [Form](#demo09-form-source) 1. [Component Lifecycle](#demo10-component-lifecycle-source) 1. [Ajax](#demo11-ajax-source) 1. [Display value from a Promise](#demo12-display-value-from-a-promise-source) 1. [Server-side rendering](#demo13-server-side-rendering-source) --- ## Demo01: Render JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html)) The template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `ReactDOM.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node. ```js ReactDOM.render(

Hello, world!

, document.getElementById('example') ); ``` Attention, you have to use `

``` ## Useful links - [React's official site](http://facebook.github.io/react) - [React's official examples](https://github.com/facebook/react/tree/master/examples) - [React (Virtual) DOM Terminology](http://facebook.github.io/react/docs/glossary.html), by Sebastian Markbåge - [The React Quick Start Guide](http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html), by Jack Callister - [Learning React.js: Getting Started and Concepts](https://scotch.io/tutorials/learning-react-getting-started-and-concepts), by Ken Wheeler - [Getting started with React](http://ryanclark.me/getting-started-with-react/), by Ryan Clark - [React JS Tutorial and Guide to the Gotchas](https://zapier.com/engineering/react-js-tutorial-guide-gotchas/), by Justin Deal - [React Primer](https://github.com/BinaryMuse/react-primer), by Binary Muse - [jQuery versus React.js thinking](http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html), by zigomir ## License BSD licensed