React初学者指南：从入门到基础语法-优快云博客

本文链接：https://blog.youkuaiyun.com/gqw666/article/details/105336532

本文是React开发的入门教程，涵盖了React的基本概念、开发环境搭建（包括官方脚手架、第三方脚手架和手动配置webpack）、JSX语法、最简单的React小程序示例，以及基础语法如ReactDOM.render()、map遍历、组件化、this.props.children、PropTypes、Virtual DOM、this.state和组件生命周期等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是React

React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面

	angularJs	reactJs	vueJs	angularTs
控制器	√	-	-	弱化
过滤器	√	-	√	√
指令	√	-	√	√
模板语法	√	-	√	√
服务	√	-	-	√
组件	-	√	√
jsx	-	√	加入	-

二、开发环境的搭建

官方脚手架

安装 create-react-app

yarn global add create-react-app | npm install create-react-app	-g

创建 react项目

create-react-app 目录 | npx create-react-app 目录 | npm init react-app 目录
yarn eject   解构出所有的配置文件 可选
yarn start |  npm start 			开发
yarn build |  npm run build	 打包

//调试 需要安装给chrome浏览器一个插件 react-dev-tools

环境解析

react: 核心包，解析组件演示
react-dom: 编译 -> 浏览器演示
react-scrpts: react的项目环境配置
manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
对Internet Explorer 9,10和11的支持需要polyfill。

环境配置

npm run eject | yarn eject
报git错误时: 
	git add . -> git commit -m 'init' -> yarn eject
	报缺少babel 包: 安装一下
  
//修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

//去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则

资源限制

本地资源导入(import) 不可以导入src之外的包
相对指向src，绝对路径指向了 public目录
前景图片, 相对和绝对路径都指向了 public目录

第三方脚手架

yeomen/dva/umi

webpack手动搭建

JSX

jsx是一个 JavaScript 的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsx

var b= <strong>强壮</strong>

语法要求

标签要闭合
元素必须要有一个顶层元素
变量首字母大写代表组件，小写对应是js数据类型
属性，小驼峰命名 <xx tabIndex="2">

三、最简单的React小程序

我学任何语言的时候第一个程序都是一个Hello,World!。现在就让我们来利用React来写一个最简单的Hello,World!
直接上代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello world!</title>
   <script src = "../../build/react.js"></script>
   <script src = "../../build/react-dom.js"></script>
   <script src = "../../build/browser.min.js"></script>
</head>
<body>
   <div id = "example"></div>
   <script type="text/babel">
      ReactDOM.render(
            <h1>Hello,World!</h1>,
            document.getElementById('example')
      );
   </script>
</body>
</html>

然后用浏览器打开就可以了（这里假设你已经会使用IntellJ IDEA，如果不会就先使用Sublime Text），然后在浏览器里面就可以看到你特别熟悉的Hello,World！了。

这里需要注意：首先，/h1>后面是此外，以前我们可能使用的是type是text/javascript，现在我们使用的text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。
JSX的基本语法规则：遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析。
在ReactDOM.render里面写了两行，他们的作用就是将h1标题插入example节点。
你也可以直接新建一个js文件，然后将body里script里面的代码直接放到里面，我们可以命名为helloworld.js，然后在head里面导入即可。我比较倾向于这种做法，因为至少html文件不会看着太大，而且方便引入管理。如果其他html也需要改代码块，直接引入即可。

四、基础语法介绍

1、ReactDOM.render( )**

ReactDOM.render是React最基本的语法，用于将模板转换成HTML语言，并插入指定的DOM节点。

ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')
);

运行结果如下：
Hello,World!

2、map（遍历）

将数组中的元素遍历赋值

var animals = ['dog','cat','pig'];
ReactDOM.render(
    <div>
        {
            animals.map(function(animal) {
              return <h1>{animal}</h1>
            })
        }
    </div>,
    document.getElementById('example')
);

3、组件化

因为React使用的是JSX，所以它允许将代码封装成组件（component），然后像普通的HTML标签一样插入。

React.createClass方法就是用于生成一个组件类，比如：
var ZGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <ZGButton name = 'Button1'/>,
    document.getElementById('example')
);

运行结果如下:
ZGButton1
上面的ZGButton就是一个组件类，模板插入，会自动生成一个该组件的实例。
所有组件类都必须有自己的render方法，用于输出组件。
现在代码这样写：

var zGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <zGButton name="Button2">Button</zGButton>,
    document.getElementById('example')
);

也就是将组件类的第一个字符小写，然后在引用的时候发现现在是双标签了（代码自动填充的时候出现），而且name失效。因此我们在开发组件的时候一定要将第一个首字符大写，否则将不会达到你想要的效果。

4、this.props.children

this.props对象的属性和组件的属性一一对应，但是有个children除外，它表示的是组件的所有子节点：

var Students = React.createClass({
    render:function() {
        return (
            <ol>
                {
                    React.Children.map(this.props.children,function(child) {
                        return <li>{child}</li>
                    })
                }
            </ol>
        );
    }
});
ReactDOM.render(
    <Students>
        <span>zhangsan</span>
        <span>lisi</span>
    </Students>,
    document.getElementById('example')
);

此时输出的结果为：
1.zhangsan
2.lisi

5、PropTypes

组件就类似与我们OC开发或者Java开发中的类，类可以进行属性添加，组件也可以。
组件的属性可以接受任意值，字符串、对象、函数都行。这里面有一个propTypes，可以用来限定提供的属性是否满足要求：

var Student = React.createClass({
    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});
var myNameStr = "React";
ReactDOM.render(
    <Student myName = {myNameStr} />,
    document.getElementById('example')
);

这里面的propTypes里面的是对属性的限制，比如这里必须是string类型，值是必须的。我们还可以去设置默认属性值：

var Student = React.createClass({
    getDefaultProps: function() {
        return {
            myName:"Default React"
        }
    },

    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});

这里面的getDefaultProps就类似与我们在开发iOS或者Java的时候对声明属性的时候进行赋初始化值。

6、Virtual DOM

组件并不是真实的DOM节点，而是存在于内存中的一种数据结构，叫做虚拟DOM，只有插入文档的时候才会变成真实的DOM。根据React的设计，当重新渲染组件的时候，会通多diff寻找到变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上并不是渲染整个DOM数，这个Virtual DOM是一个纯粹的JS数据结构，性能比原生DOM快很多。这里面我们可以用通过ref属性来获取真实的DOM属性：

var MyComponment = React.createClass({
    render:function(){
        return (
          <div>
              <input type = "text" ref = "myTextInput"/>
              <input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
          </div>
        );
    },
    handleClick:function() {
        // alert(this.refs.myTextInput);
        this.refs.myTextInput.focus();
    }
});
ReactDOM.render(
    <MyComponment/>,
    document.getElementById('example')
);

这里需要注意的是，因为我们使用的是真实的DOM对象，所以一定要确保DOM插入文档之后才能够使用。

7、this.state

我们可以通过this.state来拿到组件的状态：

var LinkButton = React.createClass({
    getInitialState:function () {
      return {linked:false};
    },
    handleClick:function() {
        this.setState({linked:!this.state.linked});
    },
    render:function() {
        var text = this.state.linked? 'linked':'not linked';
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle
            </p>
        );
    }
});
ReactDOM.render(
    <LinkButton/>,
    document.getElementById('example')
);

这里面我设置了一个linked的状态（是否连接）,这里通过this.state拿到当前状态，通过this.setState来设置状态。

8、表单

表单填写是用户和组件的互动：

var Form = React.createClass({
    getInitialState:function() {
        return {value:'Hello'};
       
    },
    handleChange:function(event) {
        this.setState({value:event.target.value});
    },
    render:function() {
        var value = this.state.value;
        return (
            <div>
                <input type="text" value = {value} onChange={this.handleChange}/>
                <p>{value}</p>
            </div>

        );
    }
});
ReactDOM.render(
    <Form/>,
    document.getElementById('example')
);

9、Component Lifecycle

组件有三个主要的生命周期：
Mounting:组件插入到DOM
Updating:组件被重新渲染，如果DOM需要更新
Unmounting:从DOM中删除组件
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did在进入状态之后调用

var MyButton = React.createClass({

    componentDidMount:function() {
        alert("已经装载");
    },
    componentWillMount:function() {
        alert("将要装载");
    },
    componentWillUpdate:function() {
        alert("将要更新");
    },
    componentDidUpdate:function() {
        alert("已经更新");
    },
    componentWillUnmount:function() {
        alert("将要移除");
    },
    render:function(){
        return (
            <button>MyButton</button>
        );
    },
});
var LoadButton = React.createClass({
    loadMyButton:function() {
      ReactDOM.render(
          <MyButton/>,
          document.getElementById('myBTN')
      );
    },
    removeMyButton:function() {
        var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));
        console.log(result);
    },
    render:function() {
        return (
            <div>
                <button onClick={this.removeMyButton}>卸载MyButton</button>
                <button onClick={this.loadMyButton}>装载MyButton</button>
                <div id="myBTN">这里是mybuttonquyu</div>
            </div>


        );
    }
});
ReactDOM.render(
    <LoadButton/>,
    document.getElementById('example')
);