提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.react环境搭建

2.react项目结构

3.JSX语法

4.注释

5.样式

6.列表渲染

7.定义单个组件

8.react Props

（8.1）多属性传值

9.react State

1.react环境搭建

（1）npm install -g create-react-app  下载环境

（2）create-react-app my-app 创建项目,应用名称不要有大写字母

（3）cd my-app          进入项目目录

（4）npm run start                           启动项目

2.react项目结构

（1）node_modules：这里面包含了react项目中会用到的一些组件。

（2）public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面。

（3）src：里面包含了使用的js文件，css文件，img文件等等，打开src文件夹，不要管什么app.js，你就看到index.js即可，系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

（4）修改：让目录结构更易懂:改动一下src里面的内容和结构。src文件夹下原来的所有东西，除了index.js之外，都可以删掉。

3.JSX语法

（1）JSX全称： JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。

（2）JSX作用：用来创建react虚拟DOM(元素)对象
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素
let App=<div>666</div>
root.render(App);
let App=<div>666</div> 保存的是一个标签，这种语法就算是JSX语法

注意1: 它不是字符串, 也不是HTML/XML标签

注意2: 它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它

（3）JSX优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

它是类型安全的，在编译过程中就能发现错误。

使用 JSX 编写模板更加简单快速。

JSX简单示例应用：

JSX语法规则：

（1）遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素function App(){return <div>666</div>
}
root.render(<App/>);//给元素内部渲染组件模板
（2）遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{ }包含
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));//关联页面根元素function App(){let a="hello react"return <div>666,{a}</div>
}
root.render(<App/>);//给元素内部渲染组件模板

4.注释

注释需要写在花括号中，需要注意的是：

在标签内部的注释需要花括号=={/*注释功能*/}

在标签外的的注释不能使用花括号

5.样式

React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。

import React from "react";
class App extends React.Component{render(){let colorBox={color:"green",fontSize:"20px",fontWeight:"bold"}let change=()=>{console.log("输出打印的值change");}return (<div><div style={colorBox}>样式设置</div><button onClick={change}>change</button></div>)}}
export default App;

6.列表渲染

通过数组的map函数

示例如下：

import React,{Component} from "react";
export default class App extends Component{render(){let arr=["hello1","hello2","hello3","word"]let arr2=arr.map(el=>{return (<div>{el}</div>)})return (<div><div>{arr2}</div></div>)}
}

7.定义单个组件

注册的组件名必须大写，小写会报错！

（1）先在app.jsx文件里面写入定义单个组件的路径：

（2）在定义的子组件Box2里面去写入格式1（类定义）：方法1
import React,{Component} from "react";
export default class Box2 extends Component{render(){return (<div><h1>box1子组件</h1></div>)}
}
（3）在定义的子组件Box2里面去写入格式2（函数定义）：方法2
import React,{Component} from "react";
export default function Box2(){return (<div><h2>box2</h2></div>)
}

8.react Props

React 的一大特点是单向数据流。React 中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象。

在主页上的代码：

import React,{Component} from "react";
import Box2 from "./Box2.jsx"
import Box3 from "./Box3.jsx"
export default class App extends Component{render(){return (<div><Box2></Box2><Box3 name="box3上的数据"></Box3></div>)}
}

在Box3里面的代码（接收数据）：

import React,{Component} from "react";
export default class Box3 extends Component{render(){return (<div><h2>box3--{this.props.name}</h2></div>)}
}

（8.1）多属性传值

（1）定义一个this.props对象，在对象中声明多个键值对，用于表示组件的属性

（2）在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。

9.react State

React在ES6的实现中，规定state在constructor中实现

正确定义State的方式如下：

（1）在constructor中实现state

（2）在constructor中通过bind绑定事件函数（事件函数是用来改变状态）

（3）在事件函数内部使用setState函数更改状态

（4）在组件中的render函数中使用该状态

（5）在组件上需要设置监听事件，去触发事件函数的执行

state示例应用如下：

state当点击的时候，不仅打印的值会改变，页面也会发生变化。
import React,{Component} from "react";
export default class Box2 extends Component{constructor(arg){super(arg)this.state={msg:"app组件里面的state属性"}this.change2=()=>{// 方法2this.setState({msg:"修改了state属性的数据"})// 方法1// this.state.msg="change了state属性的data"// this.setState(this.state)}}render(){return (<div><p>{this.state.msg}</p><button onClick={this.change2}>change3</button></div>)}
}
在计时器和原生dom函数中是state是同步函数，其他情况全部是异步函数

react--1.react环境搭建、JSX语法、注释、样式、列表渲染、定义单个组件、eact Props、react State相关推荐

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化实际项目中,往 ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
React的概述脚手架的搭建JSX语法组件
什么是React React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来特点声明式你只需要描述UI看起来是什么样式,就跟写HTML一样 ...
React学习（1）——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件状态.事件与动态渲 ...
React全家桶环境搭建过程
环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D t ...
React（2）认识JSX语法格式
文章目录前言一.JSX语法的基本用法 1.使用变量定义JSX元素 2.使用变量定义嵌套的JSX元素 3.在JSX元素中使用变量 4.在JSX元素中调用函数二.JSX元素的语法规定三.在JSX格 ...
[深入React] 1. 开发环境搭建
React环境其实很简单(不兼容ie8): <!DOCTYPE html> <html> <head><title>React</title> ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...

react--1.react环境搭建、JSX语法、注释、样式、列表渲染、定义单个组件、eact Props、react State

文章目录

1.react环境搭建

2.react项目结构

3.JSX语法

4.注释

5.样式

6.列表渲染

7.定义单个组件

8.react Props

（8.1）多属性传值

9.react State

react--1.react环境搭建、JSX语法、注释、样式、列表渲染、定义单个组件、eact Props、react State相关推荐

最新文章

热门文章