手挽手带你学React:一档 React环境搭建,语法规则,基础使用

2019-02-13 admin

手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先去看看class相关内容吧,这里我也慢慢带大家一步一步学会React。

视频教程可移步我的个人博客:http://www.henrongyi.top

什么是React

React是Facebook的一群变态们开发的一个特别牛X的框架。它实际上是一个虚拟DOM,然后在这个DOM中,要用什么组件就能飞速加载进来,不要的时候,马上给删咯(实际上就是个前端框架,都是这么个意思,VUE,NG都是,只不过他们的数据流向不同而已,React区别就在于,单向数据流。),React 扮演着 MVC 结构中 V 的角色,后面我会用到基于FLUX架构的Redux让我们的整个项目变成MVC架构。总之,React也是hie牛X的。

React的好处都有啥

React是一款非常牛X的前端框架,它的衍生物React-Native可以让你开发接近原生体验的NativeApp,它适合的范围相当广泛,前端,后端,手机端,都有很好的兼容性。总而言之,hie牛X。

React基础入门

现在的开发中React项目实际上都是使用ES6语法来编写,并且,我们现在有很多成熟的脚手架可以使用(create-react-app,dva等),不过国际惯例,我们要从最基础的用法开始编写。我们采用ES6写法来进行教学,同时使用webpack工具,这里会用到很多相关配置,大家可以在这个过程中体验ES6的精妙。

开始HelloWord

配置基础webpack环境

这里大家可以不去深入理解,先跟着我一步一步配置出来

开始之前,大家可以去官网:https://reactjs.org/ 下载最新的React(当前版本v16.7.0) 中文地址:https://react.docschina.org/

由于我们不使用脚手架,所以我们需要先创建我们自己的webpack包,第一步

mkdir helloReact
cd helloReact

首先大家命令行输入

webpack v

如果正常出现版本号 并且是 3.6.0版本,那么我们就可以按照教程继续走下去了 如果没有的话 那么我们就需要命令行继续

cnpm i webpack@3.6.0 -S -g

到这里应该可以正常使用webpack了

接下来 我们命令行输入

npm init -y  // 这实际上是 初始化一个项目 并且全部默认 当然如果你想看看里面有啥的话 就把-y拿掉就好了
npm i  //这里是把webpack依赖安装到本包内部
npm i webpack-dev-server@2.11.1 --save-dev //安装本地运行服务器
npm i webpack-cli --save-dev //依赖脚手架

运行完成以后,我们会得到一个package.json文件 打开看看

{
  "dependencies": {
    "webpack": "^3.6.0"  //依赖包和版本
  },
  "name": "helloreact", //项目名
  "version": "1.0.0",  // 版本号
  "main": "index.js",  //入口文件
  "scripts": {  //npm run 加这里面的key就可以快速执行命令行
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",  // 作者
  "license": "ISC",
  "description": "" //简介
}

这里面实际上是我们项目的一些基础信息

我们需要自己配置webpack和babel 这里我们需要创建两个文件 这里面我们要设置入口文件,输出文件,babel,webpackServer等等,这里不做太详细的介绍 大家可以直接复制代码,后面可能会开专门的webpack视频课程。 小小的介绍一下这些都是干什么用的

babel-core 调用Babel的API进行转码
babel-loader
babel-preset-es2015 用于解析 ES6
babel-preset-react 用于解析 JSX
babel-preset-stage-0 用于解析 ES7 提案

命令行输入

npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-es2015 babel-preset-react babel-preset-stage-0

接下来我们在helloReact 文件夹中创建 webpack.config.js 文件

// webpack.config.js 直接复制即可 
const path = require("path");
module.exports = {
   /*入口*/
   entry: path.join(__dirname, 'src/index.js'),

   /*输出到dist文件夹,输出文件名字为bundle.js*/
   output: {
       path: path.join(__dirname, './dist'),
       filename: 'bundle.js'
   },
    /*src文件夹下面的以.js结尾的文件,要使用babel解析*/
    /*cacheDirectory是用来缓存编译结果,下次编译加速*/
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory=true'],
            include: path.join(__dirname, 'src')
        }]
    },
    plugins : [],
    devServer : {
        disableHostCheck: true,
        inline: true,
        port:9527,
        contentBase: path.join(__dirname, "/"),
    }
}

接下来我们在helloReact 文件夹中创建 .babelrc 文件

{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": []
  }

然后我们在package.json文件的script中添加

//package.json
{
  "dependencies": {
    "webpack": "^3.6.0"
  },
  "name": "helloreact",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^2.11.1"
  }
}

这些配置完了,我们就在helloReact mkdir src 并且在src中创建 index.js文件 在 根路径 helloReact下创建 index.html 因为这里我们要用到 react了 所以需要命令行安装一下 react

cnpm install --save react react-dom

html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="bundle.js"></script>
</html>

js 文件如下


import React from 'react';  //es6 引入react
import ReactDom from 'react-dom'; //es6 引入reactReacrDom

ReactDom.render(  //ReactDom渲染<div>hello React</div> 这个html标签 到 id='app'这个标签下
    <div>Hello React!</div>, document.getElementById('app'));

一切都写完了 我们运行服务 npm run server 来看一眼

如果你看到屏幕显示出 Hello React! 那么恭喜你 环境配置完了 咱们可以开始学习 React 了

如果你配置了半天还没配置成功

到我的github下载代码吧。。。https://github.com/piexlmax/h…

React的Hello World

我们看到上面的代码


import React from 'react';  //es6 引入react
import ReactDom from 'react-dom'; //es6 引入reactReacrDom

ReactDom.render(  //ReactDom渲染<div>hello React</div> 这个html标签 到 id='app'这个标签下
    <div>Hello React!</div>, document.getElementById('app'));

这是一个简单的渲染 是不是根本看不到 React的组件化模式呢?

所以这里 我们需要写一个根部组件,以后的组件都放跟组件里面,这个JS就理所当然成了一个入口文件了

这里 我们在 src下面创建一个app.js文件

app.js

import React, {Component} from 'react';
// 这里我们引入 react 和 react的Component 
// 创建 Hello 这个class(class属于ES6内容) 然后继承 Component 我们就成功地创建了一个 react组件

export default class App extends Component {
    render() {
        return (
            <div>
                Hello,World!
            </div>
        )
    }
}

index.js 我们需要改写为这样

import React from 'react';
import ReactDom from 'react-dom';

import App from './app.js'  //引入我们的根组件App
ReactDom.render( //把App 渲染到 id=app的dom中
    <App/>, document.getElementById('app'));

到这里 我们已经实现了一个真正意义上的Hello World了!

传说中的jsx

开始玩React了,那就必须要用到jsx语法,什么是jsx呢?

JSX是一种JavaScript的语法扩展。JSX与模板语言相似,但它具有JavaScript的全部功能。JSX会被编译为React.createElement()方法调用,将返回名为“React elements”的普通JavaScript对象。

上面代码里我们看到 我们的html实际上是在js中的render函数中书写的,是一个React扩展,允许我们编写看起来像 HTML的JavaScript 。

切记 自定义组件一定要大写字母开头 return加括号 并且左括号要和return在同一行 只能return一个标签,其余内容都要在这个标签内部

export default class App extends Component {
    render() {
        return (
            <div>
                Hello,World!
            </div>
        )
    }
}

像是这样一段代码,实际上我们真正使用的时候,已经经过了一次编译,编译过后它长这样。

export default class App extends React.Component {
  render() {
    return (
      React.createElement(
        'div',
        'Hello,World!'
      )
    );
  }
}

下面的这一段代码是不是就不容易理解了?这实际上是js可以帮我们去书写dom的代码。 在React中JSX你可以理解为我们可以在js中写HTML代码了 更通俗一点


export default class App extends Component {
    // 方法 生命周期 state 等
    render() {
        return (
        //    HTML模板
        )
    }
}

React的基本使用方法

state

我们之前学过VUE,VUE中每个组件的数据存在自己的data中,那么在React中,数据存在哪里呢?没错状态state中。 由于我们这里用的是ES6的class 所以 我们子类constructor中必须先调用super才能引用this。 所以我们这里应该这么写state

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    render() {
        return (
            <div>
                {this.state.hello}
            </div>
        )
    }
}

这里我们可以看出,我们想要在render中使用js 就需要用一个{} 这里面的内容同样可以书写简单的js表达式。

rander函数中使用state和JS表达式

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    render() {
        return (
            <div>
                <ul>
                    <li>展示state中的数据:{this.state.hello}</li>
                    <li>三元,短路等,这里用三元示例{this.state.hello?"存在hello":"不存在hello"}</li>
                    <li>简单计算{1+1}</li>
                    <li>JS表达式{Math.floor(Math.random()*10)}</li>
                </ul>
            </div>
        )
    }
}

方法的声明以及修改state

声名方法我们有两种模式,一种是直接书写 方法名(参数){代码段}模式,这样的模式在调用的时候需要手动bind(this) 还有一种就是使用es6的箭头函数,让其this指向自身

修改state数据需要调用 this.setState()方法 内部接收一个对象 要修改哪个key 就在对象内部填写这个key,并且后面的值就是你要修改的内容,如果,key在state中不存在,则会在state中增加这个key

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    bye(){
        this.setState({
            hello:"bye world"
        })
    }
    byebye=()=>{
        this.setState({
            helloo:"bye world"
        })
    }
    render() {
        return (
            <div>
                <ul>
                    <li>非箭头函数:{this.state.hello}</li>
                    <li>箭头函数:{this.state.helloo}</li>
                </ul>
                <button onClick={this.bye.bind(this)}>无箭头</button>  
                {/* 这里使用bind来绑定this 如果传参的话this.bye.bind(this,参数1,参数2) */} 
                <button onClick={()=>{this.byebye()}}>箭头函数</button>
                 {/* 这里是箭头函数的默认属性来搞定了this问题 如果传参的话()=>{this.byebye(参数1,参数2)*/}}
            </div>
        )
    }
}

这里需要注意,只有触发了state的变化,才会导致组件的重新渲染

循环语句,条件语句的使用

大家在vue中使用v-for 就能够完成循环生成组件这样的操作了,在react中我们应该怎么做呢?

循环语句 我们说过 jsx 里面是可以自由自在地使用js的 一般情况下我们使用map循环

在循环的时候,每一个return出来的标签都需要添加 key={键值} “键值”是创建元素数组时需要包含的特殊字符串属性。键值可以帮助React识别哪些元素被更改,添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
        }
    }

    render() {
        return (
            <div>
            {/* 我们说过 jsx 里面是可以自由自在地使用js的 这里我们来玩一个循环生成li */}
                <ul>
                   {this.state.arr.map((item,key)=>{
                       return(<li key={key}>{item.text}</li>)
                   })}
                </ul>
            </div>
        )
    }
}

判断语句 判断语句我们一般使用短路表达式 三元表达式来展示我们想要展示的内容,但是如果需要复杂的条件判断,那么我们最好是写一个自执行函数,然后再函数体内你就可以为所欲为了,记住一定要return你想要得到的dom标签。

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
        }
    }

    render() {
        return (
            <div>
            {/*简单的三元和短路实例*/}
            {this.state.arr.length==3?<div>我是三元判断的三个</div>:<div>我是三元判断的不是三个</div>}
            {this.state.arr.length==3&&<div>我是短路判断的三个</div>}
            {/* 我们说过 jsx 内部支持简单的表达式 如果我们使用 if条件句的话 会导致报错*/}
                {/*
                    if(this.state.arr.length==3){
                        return(<div>有三个</div>)
                    }
                */}
            {/* 我们说过 jsx 这已经是js代码段而不是简单语句了,我们简单判断可以使用三元或者短路表达式来进行,但是复杂一点的,我们可以使用如下方法*/}
            {(()=>{
                if(this.state.arr.length==3){
                    return(<div>数组有三个元素</div>)
                }else{
                    return(<div>数组有不是三个元素</div>)
                }
            })()}
            </div>
        )
    }
}

循环判断嵌套 有些时候我们需要根据特定条件去循环,然后渲染出筛选过后的数据,这时候就需要循环和判断嵌套使用了,其实也相当简单,我们的循环实际上是一个简单的js表达式,内部的function中可以随意书写js,记得return就好了

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
        }
    }

    render() {
        return (
            <div>
                {this.state.arr.map((item,key)=>{
                    if(key%2==0){
                        return(<div key={key}>我是可以余2的{item.text}</div>)
                    }else{
                        return(<div key={key}>我是不能余2的{item.text}</div>)
                    }
                })}
            </div>
        )
    }
}

获取DOM(Refs)

有些时候我们不得不去操作DOM,那这时候 我们需要用到 ref 属性

React支持一个可以附加到任何组件的特殊属性ref。ref属性可以是一个字符串或一个回调函数。当ref属性是一个回调函数时,函数接收底层DOM元素或类实例(取决于元素的类型)作为参数。这使你可以直接访问DOM元素或组件实例。

另外这里应该注意 不要过度使用 Refs。

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
        }
    }

    render() {
        return (
            <div>
                {this.state.arr.map((item,key)=>{
                    if(key%2==0){
                        return(<div ref="link" key={key}>我是可以余2的{item.text}</div>)
                        {/* 这样我们可以通过 this.refs.link 获取到这个dom 并且操作dom了 */}
                    }else{
                        return(<div key={key}>我是不能余2的{item.text}</div>)
                    }
                })}
            </div>
        )
    }
}

总结

到这里我们已经学会了React的基本组件内部的操作了,React相对于Vue来说更加灵活,但是唯一的缺点是数据流是单向的,必须通过setState来修改,对于处理表单来说会有些麻烦,不过有些UI框架,插件帮我们处理了这些大麻烦。写写玩玩吧React还是比较简单的。

原文链接:https://segmentfault.com/a/1190000018139343

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53688.html

文章标题:手挽手带你学React:一档 React环境搭建,语法规则,基础使用

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Facebook发布React Native!
React.js Conf 2015会议上,Facebook发布了React Native。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React中,把一切东西都看成组件,而且所有组件...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
回到顶部