认识React以及React的安装与基本使用

最新推荐文章于 2023-03-15 19:50:34 发布

LT刘他

最新推荐文章于 2023-03-15 19:50:34 发布

阅读量634

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_52901751/article/details/128284731

版权

首先，认识一下React

参考官网：入门教程: 认识 React – React (docschina.org)

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 背景

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。
这是一个用于构建用户界面的 JavaScript 库，只相当于 MVC 中的 V（视图层）。

React 特点：

单向数据流
组件化
虚拟 DOM
Learn Once, Write Anywhere（React、NextJS、React-Native、React-VR、ReactXP、Remax、Gatsby）

React 原理：

可以参考两篇博客：(75条消息) react框架设计原理及生命周期_其实还很远的博客-CSDN博客_react框架原理 (75条消息) react工作原理_浅夏晴空的博客-CSDN博客_reat原理

React 安装：

首先，确保安装了nodejs环境

可以使用node -v 查看Node版本

npx create-react-app my-app
cd my-app 切换到my-app目录下
npm start

启动成功后，会自动弹出一个React页面

安装成功后，根目录下会生成如下文件

目录结构：
my-app:
/node_modules: 依赖的模块包的安装目录
/public: 首页等不需要打包的静态资源的存放位置
/src: 项目的开发源码
App.css App组件的样式表文件
App.js App组件，这里是根组件
index.css 全局的样式表文件
index.js 项目的入口文件

React 基本使用

在App.js中（注释都很做了很详细的解释）

import React, { Fragment } from "react";
export default class App extends React.Component {
  constructor(props) {
    super(props); //必须要有super函数，才可以继承父类里面的属性方法
    //要在当前组件内使用的数据，通过state来初始化
    //组件里面要用的响应式变量，都应该在State里面声明
    this.state = {
      msg: "Hello React",
      count: 0,
      title: "我的第一个React",
      list: [1,2,3,4,5],
      userInfo: {id:1,name:"刘他"},
    };
  }
  // render()作为渲染函数，是必须的
  // 为什么有两次render输出，因为在严格模式下，专门为了检查代码的错误，而做2次render的执行。
  // 在生产环境下，只执行一次
  render() {
    //使用jsx语法来创建组建的内容
    console.log("render...");
    // return this.state.msg;
    return (
      // 注意必须有一个根元素
      // 如果你希望结构里面，不显示这个根元素，则可以使用<Fragment></Fragment>或者<></>来替代根元素
      // <Fragment></Fragment>的简写：<></>,简写不用导入组件名
      // <Fragment>
      //   <div>
      //     {/* 文本插值 */}
      //     <h1>{this.state.title}</h1>
      //   </div>
      //   <div>
      //     <p>{this.state.msg}</p>
      //   </div>
      // </Fragment>
      // 下面的写法结构中会显示根元素
      // <div class="box">
      //   <div>
      //     {/* 文本插值 */}
      //     <h1>{this.state.title}</h1>
      //   </div>
      //   <div>
      //     <p>{this.state.msg}</p>
      //   </div>
      // </div>

      <>

      <div>
        <h1>{this.state.title}</h1>
      </div>
      <div>
        {this.state.msg}
      </div>
      <div>
        登录状态：{this.state.isLogin ? '欢迎光临' : '来宾你好。'}
      </div>
      <div>
        list: {this.state.list.join(",")}
        {/* 数组会自动展开,用','分隔*/}
        <br />
        userInfo:{this.state.userInfo.name}
        {/* 对象类型不能作为子元素（not valid as a React child）,
        只能时渲染对象的属性
        */}
      </div>

    </>
    );
  }
}

在这里解释一下JSX以及其语法

JSX 概念

React 可以允许我们在 JS 中插入 HTML 代码，它被称为 JSX，是一个 JavaScript 的语法扩展。
JSX是javascript的语法扩展。它就像一个拥有javascript全部功能的模板语言。它生成React元素，这些元素将在DOM中呈现。React建议在组件使用JSX。在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。