提供1个例子，带领初学者快速了解react基础开发，开始入门

名词解析：

React: 是一个用于构建用户界面的 JavaScript 库JSX: React 中建议使用jsx语法，jsx最终会被转为普通 JavaScript 函数TypeScript: 是JavaScript 的一个类型超集，TypeScript 可以在构建时发现 bug 和错误，这样程序运行时就可以避免此类错误，.ts 是默认的文件扩展名，而 .tsx 是一个用于包含 JSX 代码的特殊扩展名Node.js: 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

创建一个react app 项目

GitHub地址:

体验地址：

一. 安装nodejs

nodejs 是开发JavaScript 程序的运行环境，必须先安装

Node.js下载地址：

二. 创建react 项目

安装好nodejs后，在nodejs环境创建一个react 项目

执行命令：

npx create-react-app demo-react

npx npm 5.2+ 的package 运行工具

执行完提示：

执行完提示：

  yarn start    Starts the development server.  yarn build    Bundles the app into static files for production.​  yarn test    Starts the test runner.​  yarn eject    Removes this tool and copies build dependencies, configuration files    and scripts into the app directory. If you do this, you can’t go back!​We suggest that you begin by typing:​  cd demo-react  yarn start

目录结构如下：

|-- README.md|-- node_modules|-- package.json|-- public|-- src`-- yarn.lock

执行 yarn build 会在 build 文件夹内生成你应用的优化版本.

执行命令会自动生成 README.md 文件，了解更多信息可参考该文件

三.第一个react程序

import PropTypes from 'prop-types';import React, { useState } from 'react';import ReactDOM, { render } from 'react-dom'/*构建一个函数组件（注意组件类只能包含一个顶层标签）1.  如何创建一个函数组件2.  如何使用 useState 创建一个变量3.  如何传递参数给组件*/const HelloMessage = props =>  {    /*    1. props 包含组件传递的参数，props.name 获取到使用组件 <HelloMessage name='小帅哥' /> 的name    2. 使用 State Hook        声明 count 变量        申明 setCount 用于改变变量值     */    const [count, setCount] = useState(0);    /*     固定写法，返回一个html串     setCount(count + 1) 更新count的值,自动重新渲染组件     */    return (<div>        <h1>你好，{props.name}!   </h1>        <h2>你点了我: {count}次 </h2>        <button onClick={() => setCount(count + 1)}>            点击        </button>    </div>);} ;// 声明 name 参数类型是 string 类型HelloMessage.propTypes = {    name: PropTypes.string};//创建div 挂载到bodyconst appTarget = document.createElement('div');document.body.appendChild(appTarget);//  挂载组件到到div//  name='小帅哥' 传递参数给组件ReactDOM.render(<HelloMessage name='小帅哥' />, appTarget);

项目根目录执行：yarn start

访问：