前言：为了迎合币圈另一种口味，介绍下币圈编程前端语言：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的介绍。当然官方说法是，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。
下面是我的目录结构 核心文件为 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当下 玩币族申明：玩币族作为开放的资讯翻译/分享平台，所提供的所有资讯仅代表作者个人观点，与玩币族平台立场无关，且不构成任何投资理财建议。文章版权归原作者所有。 |
币圈学编程 & React helloWorld 手稿介绍篇（一）
2020-12-03 www当下 来源：区块链网络
- 上一篇：美国国会提议监管稳定币
- 下一篇：前特朗普顾问表示，比特币不透明并且会失败
LOADING...
相关阅读：
- 天天看着灰度持仓炒币，你懂灰度吗？为什么灰度这么能买？每天增持2020-12-03
- 币圈允南：三角形区间快速整理频繁插针比特币会不会上20000刀2020-12-03
- 亮哥论币：12/3晚间ETH行情分析与操作策略2020-12-03
- 实战解析币圈：12-3以太坊晚间行情分析及操作策略2020-12-03
- 2015年刚认识比特币的时候智商捉急头大如斗？2020行情如何？2020-12-03