react.js初体验及函数组件、类组件

1.React介绍

1.React起源与发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决

定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源

了。

2.React与传统MVC的关系

轻量级的视图层库！

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开

发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块

就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

3.React的特性

1.高效

2.性能好

3.单向数据流
4.组件化

4.虚拟DOM

2.cra（create-react-app）

近期 create-react-app更新了

他里面对node的版本有要求了 node的版本不能低于14了

注意:win7系统node的版本不能大于12 (需要更新系统)

安装

1.全局安装create-react-app

npm install -g create-react-app

查看版本 create-react-app –version

2.cd到指定文件夹下

3.创建项目

create-react-app 项目名         your-app 注意命名方式

注意：如果不想全局安装可以使用npx来进行项目的安装

npx create-react-app myapp 也可以实现相同的效果

这需要等待一段时间，这个过程实际上会安装三个东西

react: react的顶级库

react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用

react-dom

react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功

Success! Created your-app at /dir/your-app 
Inside that directory, you can run several commands:
npm start 
Starts the development server. 
npm run build
Bundles the app into static files for production.
npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing:

cd your-app 
npm start

Happy hacking!

4.cd到你创建的项目下

5.npm start 启动项目

文件结构

生成项目的目录结构如下：

├── README.md 使用方法的文档

├── node_modules 所有的依赖安装的目录

├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。

├── package.json

├── public 静态公共目录

└── src 开发用的源代码目录

常见问题

npm安装失败

1.切换为npm镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org 

2.使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内

​ yarn就是和npm一样 都是一个包管理工具

​ yarn是由 facebook推出的一个包管理工具

​ yarn安装：npm install -g yarn

yarn和npm 的对照表

功能	npm	yarn
初始化	npm init	yarn init
安装依赖	npm install	yarn install或者 yarn
新增依赖	npm install –save xxx	yarn add xxx
全局安装	npm install -g xxx	yarn global add xxx
同时下载多个	npm install –save xx1 xx2	yarn add xx1 xx2
删除依赖	npm uninstall –save xxx	yarn remove xxx

如果觉得yarn默认下载很慢 那么我们可以把yarn切换成淘宝镜像地址

yarn config set registry https://registry.npm.taobao.org/

3.如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行 npm

install命令

4.再不能解决就删除node_modules及package-lock.json的同时清除npm缓存 npm cache

clean –force 之后再执行 npm install 命令

3.编写第一个react应用程序

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create

react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在

里面重新创建一个index.js. 写入以下代码:

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有 一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React 
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中 引入的，而不是从 react 引入。 
import ReactDOM from 'react-dom' 
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的 元素上 
ReactDOM.render( 
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语 法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。 
	<h1>欢迎进入React的世界</h1>, 
// 渲染到哪里 
	document.getElementById('root')
)

4.JSX与组件

jsx== javascript and xml 他是一个新的语法扩展 在react中使用jsx的语法来进行页面内容的描述

在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码

更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。

jsx 当遇见< 当html解析遇见{}当js解析

原理是什么呢？

要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?

看下面的DOM结构

<div class='app' id='appRoot'>
    <h1 class='title'>欢迎进入React的世界</h1>
    <p>React.js 是一个帮助你构建页面 UI 的库 xixi大帅哥 </p>
</div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：

{
        tag: 'div',
        attrs: {//标签的属性表示
            className: 'app',
            id: 'appRoot'
        },
        children: [//子dom
            {
                tag: 'h1',//节点
                attrs:{ className: 'title' },//属性
                children:
                    ['欢迎进入React的世界']//文本节点	
            },
            {
                tag:'p',
                attrs: null,
                children:
                    ['React.js 是一个构建页面 UI 的库']
            }
        ]
    }

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代

码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX

结构转换成 JavaScript 的对象结构。

下面就是jsx的语法：

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
	<div className='app' id='appRoot'>
		 <h1 className='title'>欢迎进入React的世界</h1> 
		 <p>React.js 是一个构建页面 UI 的库 </p> 
	</div>,
	document.getElementById('root')
)

编译之后将得到这样的代码:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
		React.createElement("div", {
            className: 'app', id: 'appRoot'
        },
        React.createElement( "h1", 
        { className: 'title' }, "欢迎进入React的世界" 
        ),
        React.createElement( "p", 
        null, "React.js 是一个构建页面 UI 的库" 
        ),
	document.getElementById('root')
)

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、

还有子元素等, 语法为

React.createElement( type, [props], [...children] )

组件

扩展

模块与模块化

模块：用来封装可以重复使用的js代码块

模块化：整个项目都是使用模块的方式来完成的

组件与组件化

组件： 用来封装重复使用的ui代码块

组件化：整个项目都是使用组件的方式来完成的

组件的概念

组件就是把ui部分拆分成一个个独立的并且可以重复使用的部件 在吧这些部件拼装在一起 形成一个页面

组件的分类

函数组件/无状态组件/工厂组件

1.函数组件的首字母必须大写首字母必须大写首字母必须大写首字母必须大写首字母必须大写首字母必须大写

2.函数中必须有一个return return 一段jsx

// 我是函数组件的例子
import React from 'react'
import ReactDOM from 'react-dom'


// 函数组件
let Fun=()=>{
    return (
        <div>
            <h1>我是一个函数组件</h1>
        </div>
    )
}

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

类组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承，

ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建

1.在类中必须必须必须有一个render的方法 其中必须要有一个return 一段jsx

2.这个类要继承React.Component

import React from 'react'
import ReactDOM from 'react-dom'


// 类组件
class Demob extends React.Component {
    render() {// 就是渲染的意思  执行这个render他就会执行jsx
        return (
            <div>
                我是类组件
            </div>
        )
    }
}

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

jsx使用数据

jsx 当遇见< 当html解析遇见{}当js解析

组件中怎么使用变量呢？

函数组件

使用变量

import React from 'react'

export default function Fcbdemo() {

    let text="你好我是函数组件的变量"
  return (
    <div>Fcbdemo------{text}</div>
  )
}

{}是当js解析

import React from 'react'

export default function Fcbdemo() {
    let text="你好我是函数组件的变量"
    let i=9;
    let k=5;
    let bool=false;
    function fun(){
        return "我是函数"
    }
  return (
    <div>
        Fcbdemo------{text}---{i+k}--{bool?"你好":"你坏"}--{fun()}  
    </div>
  )
}

类组件

import React, { Component } from 'react'



export default class classdemo extends Component {
  render() {
      let text="我是类组件的变量"
    return (
      <div>classdemo--{text}</div>
    )
  }
}

属性插变量

使用单大括号来进行属性查变量的设置

// 创建函数组件
let Fcdemo = () => {
    let text="点我去百度";
    let ahref="http://www.baidu.com"
    return (
        <div>
            <a href={ahref}>{text}</a>
        </div>

    )
}

export default Fcdemo

组件的样式

行内样式

行内样式需要写入一个样式对象

注意语法 第一个{}是jsx的语法 第二个{}是对象的语法

函数组件

// 我是函数组件的例子
import React from 'react'
import ReactDOM from 'react-dom'

let text = "你好"
// 函数组件
let Fun = () => {
	return (
		<div>
			{/* 如果样式是多个单词 那么必须使用小驼峰命名把  把-去掉 后面的单词大写 */}
			<h1 style={{ color: 'red', backgroundColor: 'yellow' }}>设置行内样式</h1>
		</div>
	)
}

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

类组件

import React from 'react'
import ReactDOM from 'react-dom'

let text = "你好"
// 类组件
class Demob extends React.Component {
	render() {// 就是渲染的意思  执行这个render他就会执行jsx
		return (
			<div>
				{/* 如果样式是多个单词 那么必须使用小驼峰命名把  把-去掉 后面的单词大写 */}
				<h1 style={{ color: 'red', backgroundColor: 'yellow' }}>设置行内样式--{text}</h1>
			</div>
		)
	}
}

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

类样式–className

React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体

其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是， class 需要写成 className （因为毕竟是在写类js代码，而 class 是js关键字）

<p className="hello">Hello world</p>

css需要单独的新建一个文件 写入你的css内容

必须要把你写的css和你要使用样式的组件关联起来

使用 import “css的路径”

import React, { Component } from 'react'
// 引用样式
import "./classdemo.css"

export default class classdemo extends Component {
  render() {
      let text="我是类组件的变量"
    return (
      <div>
          classdemo--{text}
          
          <h2 className='xiaoming'>我是类样式</h2>
     </div>
    )
  }
}

扩展使用scss

下载 npm install –save sass-loader@10 node-sass@6

直接编写scss文件 然后在需要使用的组件内 使用 import “你的样式文件路径即可”