LOADING...
LOADING...
LOADING...
当前位置: 玩币族首页 > 行情分析 > 币圈学编程 & React helloWorld 手稿介绍篇(一)

币圈学编程 & React helloWorld 手稿介绍篇(一)

2020-12-03 www当下 来源:区块链网络

前言:为了迎合币圈另一种口味,介绍下币圈编程前端语言:React ,有兴趣的可以看看。学会了,你就可以自己去搭建一套前端体系的Swap页面。文章适合后端想学前端开发的同学、或者有一定基础的前端同学。以后的这样的课程一周更新一课,我会把React系列基本介绍清楚。因为这是突发奇想最想写的一些东西,下面写的是我的第一版手稿。

序言:想了很久对于知识归集之前一直没有太多的习惯,最近突发奇想是该把自己的一些知识整理出来,让更多人看看也算是一种思想的碰撞。我个人经历,毕业后干了2年javaWeb的工作,后面机缘巧合重心转移到前端开发。刚接触前端的业界比较通用就是JQuery、Ext、YUI等开发。

在经历过漫长的演变、最初还使用过命令行进行前端代码的压缩 yuicompressor,当然这个时期后面慢慢就被一些自动化的工具给取代了,例如后面出现很多自动化打包脚本工具Grunt、Gulp等等。

当然一些工具下载还是非常的流行还是在一些场景下使用着,例如Gulp如今的迭代已经是非常轻量级的构建了。当然目前最为普遍的应用工具为Webpack,如今的Webpack已经出到5.9的版本了。在经历0.几到1.0 、2.0、3.0、4.0 每次大的迭代都是webpack突飞猛进的一个飞跃。

在前端整个体系发展,我都是一直陪伴的走过来的。

下面我要说的是React整个体系发展以及React如何使用的。

React是什么 ?

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

上面这段来自菜鸟教程对React的介绍。当然官方说法是,React是申明式、组件化、一处学习,随处编写。

貌似看起来还是有点费劲。

但是下面这段介绍的可能更加的简洁跟书面化理解。

1.声明式设计?React采用声明范式,可以轻松描述应用。2.高效?React通过对DOM的模拟,最大限度地减少与DOM的交互。3.灵活?React可以与已知的库或框架很好地配合。4.JSX? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。5.组件? 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。6.单向响应的数据流? React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

首先我们还是进入React Hello World!

第一步你确保安装 npm | yarn 操作起来大同小异。个人推荐Yarn。

npm会遍历所有的项目依赖关系,然后再决定如何生成扁平的node_modules目录结构。npm必须为所有使用到的模块构建一个完整的依赖关系树,这是一个耗时的操作,是npm安装速度慢的一个很重要的原因。

yarn 速度快,yarn无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式。这个功能在2012年的npm项目中就被提出来过,但一直没有实现。yarn还提供了一些其他改进,例如,它允许合并项目中使用到的所有的包的许可证。

例如业界还有pnpm LINK

下面是我的目录结构

核心文件为 src/index.html src/index.js webpack.config.js , 这是helloWorld实例。

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>React App</title> </head> <body> <div id="root">Hello World</div> </body> </html>

index.js

import React from 'react'; import ReactDOM from 'react-dom'; function Index() { return ( <div>hello,world</div> ) } ReactDOM.render(<Index/>, document.getElementById('root'));

webpack.config.js ( 可以忽略,这个需要对webpack需要一定了解,后面更新章节会介绍 )

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); var url = path.resolve('./'); let isEnvProduction = true; module.exports = { mode: 'development', entry: url + '/src/index.js', output: { path: url + "/dist", filename: '[name].[contenthash:8].js', }, module: { strictExportPresence: true, rules: [ { parser: { requireEnsure: false } }, { test: /\.(js|mjs|jsx|ts|tsx)$/, enforce: 'pre', use: [{ options: { // cache: true, formatter: require.resolve('react-dev-utils/eslintFormatter'), eslintPath: require.resolve('eslint'), resolvePluginsRelativeTo: __dirname }, loader: require.resolve('eslint-loader') }], include: path.resolve("src"), }, { oneOf: [{ test: /\.(js|mjs|jsx|ts|tsx)$/, loader: require.resolve('babel-loader'), options: { customize: require.resolve('babel-preset-react-app/webpack-overrides'), } }, ] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: __dirname + '/dist/index.html', template: path.resolve(__dirname, './src/index.html'), // chunks: ['entry'] }), ], devServer: { contentBase: path.resolve(__dirname, './dist'), compress: true, port: 3000, open: true, } };

大家可以访问 https://codesandbox.io/s/recursing-panini-bp62e 里面有详细的demo详情。

—-

编译者/作者:www当下

玩币族申明:玩币族作为开放的资讯翻译/分享平台,所提供的所有资讯仅代表作者个人观点,与玩币族平台立场无关,且不构成任何投资理财建议。文章版权归原作者所有。

LOADING...
LOADING...