React和JSX基础

摘要：脚手架工具：选用React官方推荐的脚手架工具create-react-app，安装npm install create-react-app -g。项目初始化步骤：

脚手架工具

选用React官方推荐的脚手架工具create-react-app

安装npm install create-react-app -g

项目初始化步骤

1、在github上创建一个项目仓库：首页 > new

2、将github上创建的仓库clone到本地：git clone git@github.com:startjcu/react-demo.git

3、使用脚手架工具初始化项目：create-react-app react-demo

4、进入项目，进行初始化提交：cd react-demo/、git add .、git commit -m 'react initial'

5、将本地代码推送到远程仓库：git push

项目结构

public > index.html 主页

src > index.js 程序入口

registerServiceWorker，用来实现PWA，Progressive Web App渐进式网页应用，初次访问后，断网也能访问

public > minifest.json用来定义实现了PWA的网页当作App使用时的展示样式等内容

React中的组件

组件：页面上的一部分，将一个大的网页拆分成很多小的部分，前端组件化

import React, { Component } from 'react'
//JSX语法，必须使用React才能实现编译
class App extends Component {
    render() {
        return <div>hello world</div>
    }
}

export default App

将组件挂载到DOM节点下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

JSX语法基础

JavaScript + XML

直接在JS文件中写H5标签；可用标签写自定义组件，必须以大写字母开头。

在JSX中写JS代码，用{}包裹，在页面中实现逻辑操作；写注释：{/**/}。

标签属性与JS关键字冲突处理：用className代替class，用htmlFor代替for。
dangerouslySetInnerHTML={{__html:item}}属性用于将输入的html标签进行转义。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3386