5分钟入门react教程(提供源码)_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