5分钟入门react教程(提供源码)

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

名词解析：

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

创建一个react app 项目

GitHub地址: https://github.com/itainf/demo-react

体验地址：http://wojson.com/demo/demo-react/hello.html

一. 安装nodejs

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

Node.js下载地址：https://nodejs.org/zh-cn/download/

二. 创建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 挂载到body
const appTarget = document.createElement('div');
document.body.appendChild(appTarget);

//  挂载组件到到div
//  name='小帅哥' 传递参数给组件
ReactDOM.render(<HelloMessage name='小帅哥' />, appTarget);

项目根目录执行：yarn start

访问：http://127.0.0.1:8601/hello.html