React学习（一、项目搭建及JSX初识）

爱拍照的程序猿

已于 2023-01-29 15:32:52 修改

阅读量366

点赞数 2

分类专栏：前端文章标签： react.js 学习 javascript

于 2023-01-29 15:32:31 首次发布

本文链接：https://blog.csdn.net/weixin_68879157/article/details/128788711

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前言

因为最近即将接手一个react的项目，所以想着在下班时间了解学习下react框架的使用。
那么最近我会把react学习的知识点逐一做个梳理，也请大家看看理解是否准确，希望与各位一起进步。

二、初识React

1、什么是React

首先，什么是react呢？它同vue一样，也是一个用于构建用户界面的js框架，这里将react的官方文档放入https://react.docschina.org/docs/state-and-lifecycle.html（可参照学习）。

2、如何创建一个React项目

那么，既然是一个框架，现阶段大部分项目都是使用脚手架去搭建的，而并非当作一个库去引入使用。而react脚手架创建项目则有两种方式：

（1）直接在本地临时安装一个脚手架；

npx create-react-app my-app // 注意：my-app为项目名称
npx是npm v5.2版本新添加的命令，无需额外下载

（2）全局安装脚手架，并执行脚手架创建项目的命令。

1、npm i -g create-react-app
2、create-react-app my-app // my-app为项目名称

创建成功后，可通过切入项目根目录执行npm start来启动项目，启动成功后可看到一个旋转的React的logo界面。

3、React的基本使用

// 1.导入react和react-dom两个包
import React from "react"; // 创建
import ReactDOM from 'react-dom' //渲染内容时使用
// 2.创建React元素
// 第一个参数：表示要创建的标签名称
// 第二个参数：表示自身的属性，如果没有，写null，有就传入一个对象
// 第三个参数：表示元素的子节点
const h1= React.createElement('h1', {
  title:'我是标题'
},'hello react')
// 3.渲染React元素
// 第一个参数表示你要渲染谁,第二个表示挂载到哪里(如下图所示可在html页面中找到id为root的标签)
ReactDOM.render(h1,document.querySelector('#root'))
注意：在react中添加样式需要使用className属性，而不是class

如上述代码所示，如此便可以创建一个react元素，但是这样的写法未免过于繁琐，不利于查阅，接下来的JSX就可以解决这一问题。

4、JSX的简单了解

（1）JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码,这就是声明式的写法；

import ReactDOM from 'react-dom'
// 使用JSX创建
const h1 = <h1>Hello React</h1>
ReactDOM.render(h1,document.querySelector('#root'))

（2）JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法（就如同babel可以将es6箭头函数的语法解析为普通函数）；

（3）JSX必须要有一个根节点，如果没有根节点，可以使用`<></>`（幽灵节点）或者`<React.Fragment></React.Fragment>`；

const h1 = (
  <>
    <div>Hello World</div>
    <div>Hello JSX</div>
  </>
);

（4）通过{}来使用js中的数据；

function Hello(params) {
  return <h1>Hello，{params.name}</h1>
}
function App() {
  return (<>
    <Hello name="React"></Hello>
    <Hello name="JSX"></Hello>
    <Hello name="函数式组件"></Hello>
    <Hello name="类组件"></Hello>
  </>)
}
ReactDOM.render(<App />,document.querySelector('#root'))

（5）JSX本身也是一个js表达式。

5、函数式组件

使用JS的函数或者箭头函数创建的组件
（1）函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签；
（2）函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
（3）示例：

function Hello(params) {
  return <h1>Hello，函数式组件</h1>
}
ReactDOM.render(<Hello />, document.querySelector('#root'))

6、类组件

使用 ES6 的 class 创建的组件，叫做类（class）组件
（1）类名称也必须以大写字母开头；
（2）类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性；
（3）类组件必须提供 render 方法；
（4）render 方法必须有返回值，表示该组件的 UI 结构
（5）示例：

import React from "react";
// 注意：因为下面类组件需要使用，所以需引入React，如不想，可按需导入Component
import ReactDOM from "react-dom";
class Welcome extends React.Component {
  render() {
    return <h1>Hello,类组件</h1>
  }
}
ReactDOM.render(<Welcome />, document.querySelector('#root'))