React 基础知识

Unsplash

在正式讲解 React 之前,我们需要对 WebPack 部分做一个简单的介绍,而 WebPack 0 基础的同学,可以先参考 WebPack 模块化打包工具(上)WebPack 模块化打包工具(下) 这两篇文章的讲解,再进行 React 的学习

1. WebPack

目录结构

app 文件夹主要存放着我们项目的代码,static 文件夹存放静态资源文件,util 文件夹存放工具函数,index.jsx 为 React 的入口文件,index.tmpl.html 为模板文件,app.js 是我们项目的业务代码, vendor.js 为第三方依赖包,webpack.config.js 为开发时的配置文件,webpack.production.config.js 为发布时的配置文件

在开发过程中,我们可以不用考虑系统的性能,更多考虑的是如何增加开发效率,所以我们会把所有的代码,统一打包为 bundle.js 文件,但若是将项目上线,我们就需要考虑系统的加载速度、缓存等等因素,所以我们会把业务代码和第三方依赖包的代码分开打包,分别对应 app.jsvendor.js 文件,这样做的好处是,当我们进行项目的更新时,只需要更新 app.js 文件即可

因为我是在 Mac OS 环境下进行开发的,所以使用 Windows 进行开发的同学需要修改 package.json 文件里的 scripts 配置项,在 NODE_ENV 前加上 set,在 webpack-dev-serverwebpack --config 前加上 &&,如下所示

"scripts": {
    "start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
    "build": "rm -rf ./build && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors"
},

另外,如果运行 npm run build 出现报错,那就手动创建一个 build 文件夹

我们接下来讲解一下这两个命令作用,代码中 NODE_ENV=dev 代表当前是开发环境下,这里的 dev 可被 JS 代码中的process.env.NODE_ENV 得到并做一些其他处理,而 NODE_ENV=production 则标识的是开发环境

// webpack.production.config.js
new webpack.DefinePlugin({ 
    __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')) 
})

npm start 默认使用 webpack.config.js 作为配置文件,而 npm run build 强制使用 webpack.production.config.js 作为配置文件

关于其他地方的描述,看代码注释即可,然后我们运行 npm start 命令就可以 Hello World 了

运行结果

2. Hello 组件

// index.jsx
import React from 'react'
import { render } from 'react-dom'

// 定义组件
class Hello extends React.Component {
    render() {
        // return 里面写jsx语法
        return (
            <p>Hello World</p>
        )
    }
}

// 渲染组件到页面
render(
    <Hello/>,
    document.getElementById('root')
)

上面是我们上一小结所讲解的例子,下面来详细讲解每一行代码的含义,import React from 'react' 这段代码的含义,是引用了 node_modules 文件夹里的 react 依赖包,而 import { render } from 'react-dom' 又较上一行代码多了一个大括号,在这里 render() 是一个函数,需要使用大括号括起来,大括号里面还可以写 JS 的变量和三元表达式,若是遇到两个大括号 {{ hello }},则第一层大括号定义了这是一个 JS 变量,第二层大括号则是这个 JS 变量中的对象

class Hello extends React.Component {
    render(){
        var s = {
            color: '#fff',
            fontSize: '20px'
        }
        return (
            <div>
                <p style={s}>Nian糕</p>
            </div>
        )
    }
}

React.Component 是我们所引用的 react 包里所定义的一个方法,大家可以通过阅读 react 包里的源码进行了解,随后我们通过 render() 进行组件的渲染,第一个 render() 是向外渲染一个段落,而第二个 render() 则是将 Hello 组件渲染到页面上

3. jsx 语法

React 里面写模板要使用到 jsx 语法,这是它的几个特点:① jsx 中不能一次性返回零散的多个节点,需要使用一个父节点包裹;② 用 {/* */} 的注释形式;③ 使用 className 代替 class,样式名采用驼峰式写法;④ 函数执行事件时,this 指组件本身

class Hello extends React.Component {
    render(){
        return ( 
            <div>
                {/* 注释 */}
                <p className="n1">Nian糕_1</p>
                <p style={{color:'#ccc',fontSize:'20px'}}>Nian糕_2</p>
                <p>Nian糕_3</p> 
            </div> 
        )
    }
}

运行结果

render(){
    return (
        <p onClick={this.clickText.bind(this)}>Nian糕</p>
    )
}
clickText(e) {
    e.preventDefault();
    console.log(this);
}

运行结果

循环,在 jsx 中使用循环,一般会用到 Array.prototype.map,arr.map 是包裹在 {} 中的,这里需要返回多个 <li>,给每个 <li> 赋值 key={index} 有助于 React 的渲染优化,jsx 中的 {} 可放一个可执行的 JS 程序或者变量

render() {
    const arr = ['Nian糕_1', 'Nian糕_2', 'Nian糕_3']
    return (
        <div>
            <ul>
                {arr.map((item, index) => {
                    return <li key={index}>this is {item}</li>
                })}
            </ul>
        </div>
    )
}

运行结果

判断,jsx 中使用判断一般会用到三元表达式(表达式也是放在 {} 中的)

render(){
    return (
        <div>
            {
                true
                ? <p>Nian糕_true</p>
                :<p>Nian糕_false</p>
            }
        </div>
    )
}

运行结果

本篇的内容到这里就全部结束了,源码我已经发到了 GitHub React_01 上了,有需要的同学可自行下载

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

Go语言实践_实现一(客户端)对一(服务器端)聊天室

1,首先启动服务器端,使用listen_socket函数监听IP地址上的客户端连接;

15130
来自专栏jouypub

优化Vue项目的文件大小

在使用Vue搭建项目时,经常由于引入的库太多,导致打包后的文件体积非常大,特别是vendor.js。这就造成页面第一次打开很慢,如果在浏览器中调试页面(打开控制...

38230
来自专栏前端儿

表单多文件上传样式美化 && 支持选中文件后删除相关项

本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化。。),同时支持选择文件后自定义删除相关的文件,最后再上传

38510
来自专栏老马寒门IT

07Vue.js快速入门-Vue路由详解

对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用...

40850
来自专栏阮一峰的网络日志

Fish shell 入门教程

命令行是程序员的必备技能。图形界面虽然好看,解决问题还是要靠命令行。 命令行由 Shell 提供。各种命令通过 Shell,传递给操作系统的内核。学习命令行就是...

29680
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

65980
来自专栏林冠宏的技术文章

关于在用curl函数post网页数据时,遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法

curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id...

22070
来自专栏Java帮帮-微信公众号-技术文章全总结

错误集锦2.jsp页面syntax error,insert“}”to complete block

补:错误集锦1-HttpServlet was not found on the Java Build Path。 我们在用Eclipse进行Java web开...

39440
来自专栏Java技术分享圈

杨老师课堂之Excel VBA 程序开发第七讲之自动筛选

方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1BW1T78d1zpeZq7yFbLOosg 密码: nf97

15520
来自专栏java沉淀

Maven、Webx、Velocity学习总结

19230

扫码关注云+社区

领取腾讯云代金券