react简介

1 React简介

1.1 react发展历史:

react是facebook开发的,(vue-尤雨溪。angular-谷歌-收购的)facebook在构建instagram网站的时候遇见两个问题:

  1. 数据绑定的时候,大量操作真实dom,性能成本太高,比较浪费
  2. 网站的数据流向太混乱,不好控制

于是facebook起初调研过市场上已存的mvc框架,比如angularjs,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源,国内2016年才开始首先在杭州使用。

1.2 react 特点:

  • 声明式设计 −React采用声明范式,可以轻松描述应用(自动dom操作)

  • 高效 −React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互

  • 灵活 −React可以与已知的库或框架很好地配合,比如(jquery库)

  • JSX − JSX 是 JavaScript 语法的扩展

  • 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中

  • 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单

React Fiber 是 16.+ 版本

1.3 React的优点

  • React速度很快:它并不直接对DOM进行操作,引入了一个叫做虚拟DOM的概念,安插在javascript逻辑和实际的DOM之间,性能好。最大限度减少DOM交互。

  • 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

  • 一切都是component:代码更加模块化,重用代码更容易,可维护性高。这样当某个或某些组件出现问题是,可以方便地进行隔离。每个组件都可以进行独立的开发和测试,并且它们可以引入其它组件。这等同于提高了代码的可维护性。

  • 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。减少了重复代码,这也是它为什么比传统数据绑定更简单。

  • 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

  • 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

1.4 React 的缺陷

  • React 只是一个视图库,而不是一个完整的框架。

  • 对于 Web 开发初学者来说,有一个学习曲线。

  • 将 React 集成到传统的 MVC 框架中需要一些额外的配置。

  • 代码复杂性随着内联模板和 JSX 的增加而增加。

  • 如果有太多的小组件可能增加项目的庞大和复杂。

1.5 vue的优点

  • 性能高效

  • 双向数据绑定

  • 学习难度低,上手简单。

2 React环境搭建

2.1 引入.js文件(不方便)

2.2 通过脚手架工具来编程

官方:Creat-react-app

1.安装node.js(推荐使用LTS版本)

2.安装cnpm 淘宝镜像: https://npm.taobao.org/

​ 命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

2.node命令行行执行以下命令

img

create-react-app my-app
cd my-app
npm start

   
   
  • 1
  • 2
  • 3

安装完成

img

img

3 React工程目录简介

工程目录如下:

img

node_modules文件夹

  • 里面存放的是我们所建项目放所依赖的第三方的包

public文件夹

  • favicon.ico

图标文件,网页标题左上角的小图标

img

  • index.html

项目首页的HTML模板

  • manifest.json

manifest.json 是配合PWA 使用的文件。

src 文件夹

  • index.js(all in js)

整个程序的入口文件,也就是整个项目从index.js 里面开始逐行执行

  • ServiceWorker

为用户在本地创建一个service worker 来缓存资源到本地,提升应用的访问速度

  • App.test.js

自动化的测试文件

yarn.lock

  • 项目文件依赖安装包的版本号

README.md

  • 项目的说明文件 --可以改为自己目录的说明

package.json

  • 每个脚手架工具里面都有一个package.json文件,表示脚手架工具其实是一个node包工具,有一些项目介绍,依赖的包等

gitgnore

  • 如果用git管理代码的话,有些文件不想传到git仓库的话,可以把这些文件定义到这里。

4 React中的组件

标题->标题组件搜索->搜索组件->input组件和button组件img前端组件化优势:维护方便另一种方式:调用render方法,可以将react元素渲染到真实的dom中。index.js

4.1APP组件

App.js
import React from 'react';

//函数无状态组件
function App() {
return (
<div>
Helllo world
</div>
);
}

export default App;
import React ,{ Component }from ‘react’;
/*
import { Component } from ‘react’;
//等价于
import React from ‘react’
const Component = React.Component
*/

//ES6类方法 组件
class App extends Component {
render() {
return (
<div>
Helllo world
</div>
);
}
}

export default App;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

4.2 Render方法

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<React.StrictMode>
<App /> //JSX 语法
</React.StrictMode>,
document.getElementById(‘root’)
);
//将我们APP中的节点,挂载到id=root的节点下面

serviceWorker.unregister();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

img

注:使用JSX语法 需要引入 import React from 'react';

5 JSX语法

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:

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

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

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

在上节认识了组件,原来我们在html中写标签,但是在React中,我们直接将标签写在了.js文件中,就是说在React中,书写html标签这种方法,称之为JSX语法。此外,我们除了可以使用html定义的标签,我们也可以使用自己定义的标签,如下面定义的APP标签。

【注】JSX中组件开头,必须以大写字母开头。

因此我们可以区分:

  • 大写字母开头为自定义的组件
  • 小写字母为html标签

例子:

App.js
import React ,{ Component }from 'react';

//ES6类方法 组件
class App extends React.Component {
render() {
return (
<div>
Helllo world
</div>
);
}
}

export default App;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
);

serviceWorker.unregister();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

注:下面大部分的代码从todolist摘取(第三章)

5.1表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<div>
<h1>{ 1+1 }</h1>
</div>,
document.getElementById(‘root’)
);

serviceWorker.unregister();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

img

5.2 格式

render 返回的元素,必须包含在一个大的元素之中

//错误写法
render () {
	return (
	<div>第一个</div>
	<div>第二个</div>
	)
}

//正确写法
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

可以引入Fragment占位符代替

import React, { Component, Fragment } from 'react';  //主要要引入该元素

class TodoList extends Component {
render() {
return (
<Fragment>
<div><input/><button>提交</button></div>
<ul>
<li>学英语</li>
<li>learn English</li>
</ul>
</Fragment>
)
}
}

export default TodoList;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

5.3 JSX中的注释

使用{/注释/} 在vscode中 使用快捷键 CTRL + / 来进行快速注释

alt + shitf + A 群体注释

render() {
      return (
      <Fragment>
        <div>
          {/* 这是一个注释 */}
          <input 
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li 
                      key={ index } 
                      onClick={this.hanleItemDelete.bind(this, index)}
                      >
                      { item }
                      </li>  // 用index做key值不好
            })
          }
        </ul>
      </Fragment>
    )
  }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

5.4 引入样式

我们创建一个style.css

.input {
    border: 1px solid red; //我们在给input框增加一个样式
}

 
 
  • 1
  • 2
  • 3

注意引用的时候:为了防止class当成类,在JSX中,class的属性,使用 className。

如下className=‘input’

render() {
      return (
      <Fragment>
        <div>
          {/* 这是一个注释 */}
          <input
            className='input'   //使用class
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li 
                      key={ index } 
                      onClick={this.hanleItemDelete.bind(this, index)}
                      >
                      { item }
                      </li>  // 用index做key值不好
            })
          }
        </ul>
      </Fragment>
    )

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

5.5 input中输出的样式不进行转义

如果我们不进行设置,它会自动转义

img

当我们想要设置显示为样式的时候,我们要在li标签中增加一条属性

dangerouslySetInnerHTML = {{__html: item}}

这样就不会进行转义了

img

<ul>
      {
      this.state.list.map((item, index) => {
        return <li 
        key={ index } 
        onClick={this.hanleItemDelete.bind(this, index)}
    		dangerouslySetInnerHTML = {{__html: item}}
      >
        </li>  // 用index做key值不好
    })
   }
</ul>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

5.6 label标签

在lable标签中,使用for进行一个扩大选择范围。

在React中,为了防止与for循环的关键字 for重合,使用 htmlFor=“insertArea”

<label htmlFor="insertArea">输入内容:</label>
<input
    id="insertArea"
    className='input'   //使用class
    value={this.state.inputValue}
    onChange={this.handleInputChange.bind(this)}  //在这里加this
/> 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: React电影项目实战是一个使用React框架和其他相关技术开发电影相关网站或应用程序的实践项目。在这个项目中,我们可以通过React的组件化开发方式和虚拟DOM的特性来构建动态的用户界面。 首先,我们需要设置React的开发环境。我们可以使用React脚手架工具来快速搭建一个基本的React应用程序,然后在此基础上进行开发。在这个项目中,我们还可以使用其他辅助工具和库,如Redux用于管理应用程序的状态、React Router用于实现页面路由、Axios用于发送HTTP请求等。 接下来,我们可以开始开发网站或应用程序的各个模块和功能。一个常见的功能是显示电影列表。我们可以使用Axios从后端API获取电影数据,并使用React组件来展示这些电影的标题、海报和描述等信息。我们还可以添加筛选、排序和搜索功能,以便用户可以根据自己的需求查找电影。 另一个常见的功能是电影详情页面。当用户点击某个电影时,我们可以展示该电影的详细信息,如演员阵容、上映日期和剧情简介。我们可以使用React Router实现页面之间的切换,并根据电影的ID从后端API获取相应的详细信息。 除了这些基本功能,我们还可以添加其他的功能和模块,如用户注册和登录、电影评分和评论、收藏和推荐功能等,以增加网站或应用程序的交互和用户体验。 在开发过程中,我们需要注意React的组件化开发原则和最佳实践。将页面拆分成多个可复用的组件,以提高代码的可维护性和可测试性。同时,在组件中使用React的生命周期方法和钩子函数来处理组件的状态和行为。 总而言之,React电影项目实战是一个实践React框架和其他相关技术的机会,通过开发电影相关的网站或应用程序,我们可以学习和应用React的各种特性和功能,提高自己的开发能力。 ### 回答2: React电影项目实战是指使用React框架来开发一个实际的电影网站或者电影相关的应用。这个项目可以包括电影列表展示、电影详情页面、搜索功能、用户评论和评分等功能。 在开始React电影项目实战之前,我们首先需要准备好开发环境,包括安装Node.js和创建React应用。然后,我们可以使用一些第三方库来辅助开发,如React Router用于实现页面路由、Axios用于发送HTTP请求、Redux用于状态管理等。 在项目中,我们可以使用电影相关的API来获取电影数据,比如通过豆瓣API获取电影列表、详情和评论等信息。在电影列表页面,我们可以使用React组件来展示电影海报、标题等信息,同时提供搜索功能给用户。当用户点击某个电影时,可以跳转到电影详情页面,展示电影的详细信息,并提供用户评论和评分的功能。 为了提升用户体验,我们可以使用React的组件化特性,将不同的功能拆分成多个小组件,然后将它们组合起来构建整个应用。同时,还可以使用React的虚拟DOM机制来优化性能,只对有变化的部分进行更新,提升应用的响应速度。 在完成项目开发后,我们可以使用一些工具和技术来打包和部署我们的React电影项目,比如使用Webpack来打包代码,并将项目部署到服务器上。 总之,React电影项目实战是一个很好的练习React开发技能和项目开发经验的机会。通过这个实战项目,我们可以学习如何使用React构建一个复杂的应用,掌握React的基本概念和开发流程,同时也可以提升自己的前端开发能力。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值