React学习(一、项目搭建及JSX初识)

  • Post author:
  • Post category:其他



目录


一、前言


二、初识React


1、什么是React


2、如何创建一个React项目


3、React的基本使用


4、JSX的简单了解


5、函数式组件


6、类组件


三、总结


一、前言

因为最近即将接手一个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'))

三、总结

好了,此次总结的内容大概就是这些,后续也会在学习React框架过程中继续总结的知识点,梳理完成后进行不定期发布,如有不当之处,欢迎各位大佬交流指正。



版权声明:本文为weixin_68879157原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。