react入门

Posted 2020-11-02 雷小喵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react入门相关的知识，希望对你有一定的参考价值。

什么是react?

　　react是用于构建用户界面的javascript库

　　react主要用于构建ui，很多人认为react是mvc框架中的v

react的使用

　　使用react需要引入三个库：react.min.js、react-dom.min.js和babel.min.js

　　react.min.js - react的核心库

　　react-dom.min.js - 提供与DOM相关的功能

　　babel.min.js - babel可以将es6代码转为es5代码，这样我们技能在目前不支持es6游览器上执行react代码。

　　下面是通过npm安装react

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
cnpm install [name] /

　　通过create-react-app快速构建react开发环境

　　　　create-react-app是来自于Facebook，通过该命令我们无需配置就能快速构建react开发环境。

　　　　create-react-app来自创建项目基于webpack

　　执行以下命令创建项目：

cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

　　执行以上命令后就可以用http://localhost:3000在游览器上打开一个网页，项目文件夹中也会自动创建一个my-app的文件出来。

react jsx

　　jsx即JavaScript xml,是js中的一种热语言，在编译的时候要先把jsx编译成js,再进行运行。

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

react组件

<body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello World！</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage />,
        document.getElementById(‘example‘)
      );
    </script>
  </body>

　　上面的代码封装了一个名为HelloMessage的组件

　　React.createClass 方法用于生成一组件

　　<HelloMessage /> 实例组件类并输出信息。

注意：原生 html 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

　　可以使用this.props向组建传递参数

<body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="R" />,
        document.getElementById(‘example‘)
      );
    </script>
  </body>

　　state和props的住要区别是props是不可改变的，而state是可以根据用户来改变的。

组件的生命周期

组件的生命周期分为三个状态

　　Mounting - 已插入真实的dom

　　Updating - 正在被重新渲染

　　Unmounting - 已移除真实的dom

以上是关于react入门的主要内容，如果未能解决你的问题，请参考以下文章

前端开发工具vscode如何快速生成代码片段

[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability(代码片段

react简介

导致资产预编译在heroku部署上失败的代码片段