前端
文章平均质量分 59
香辣素毛肚
这个作者很懒,什么都没留下…
展开
-
React 环境搭建(Windows)
1.安装nodehttps://nodejs.org/en/downloadcmd下输入node --version2.创建react项目选择某个目录,执行npx create-react-app test01执行速度太慢了,因此得先设置nmp源npm config set registry http://registry.npm.taobao.org/3.启动项目cd test01执行npm start...原创 2021-07-28 19:10:49 · 263 阅读 · 0 评论 -
Webpack-3
一.Treeshaking帮助我们消除引用但未被使用的模块首先创建一个math.js文件 function square(x) { return x * x;} function cube(x) { return x * x * x;}export {square,cube};index.js文件导入math.js中的cube方法,并且调用import {cube} from './math.js';console.log(cube(5));打包后浏原创 2020-07-05 19:59:01 · 1646 阅读 · 0 评论 -
Webpack-2
一 .打包静态资源(图片,样式,图标等)1.安装npm install --save-dev file-loader2.webpack.config.js配置:module.exports = { module: { rules: [{ test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { name: "[name].[ext]", outputPath:原创 2020-06-13 08:20:59 · 438 阅读 · 0 评论 -
Webpack-1
看视频学习的例子,浏览器不能识别import语句,所以要使用Webpack。我之前用Edge浏览器实现过的:index.html:<!DOCTYPE html><html><head> <title></title></head><body><script type="module"> import {Page} from './Page.js'; let page=new Page(原创 2020-06-10 16:13:54 · 165 阅读 · 0 评论 -
React-Native 导航-3
上一节讲到name="Home"可以指定页面的标题。现在还有一种方式:screenOptions好像是可以统一样式先看下一个Context我们用props传递数据,只能一层一层传输,用Context可以替换这种方法,有点全局变量的意思import * as React from 'react';import { Button, View,Text} from 'react-native';import { NavigationContainer } from '@react-nav原创 2020-06-10 10:51:04 · 173 阅读 · 0 评论 -
React-Native 导航-2
先看一个最简单的例子import * as React from 'react';import { Button, View } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';function HomeScreen({ navigation }) {原创 2020-06-08 23:31:43 · 385 阅读 · 0 评论 -
React-Native 导航-1
找了很多资料,看了头大,去GitHub上搜到了两个不错的文档https://wix.github.io/react-native-navigation/docs/before-you-start/#!https://reactnavigation.org/docs/getting-started前置内容:react native 环境搭建1.在本地文件夹内执行react-native init ReactNativeNavigationinit后面的名字可以自己取,执行完毕的效果就原创 2020-06-08 17:22:14 · 229 阅读 · 0 评论 -
React Native 官方教程中的示例教程:电影列表
示例教程:电影列表其中有两点值得注意的地方我们知道用setState修改数据会导致页面重新刷新,但是假如setState存放的是引用数据类型( 比如数组),按我们C语言的知识,往数组添加元素并不会改变数组首元素的指针,也就是引用不变,这时页面会刷新吗?我们测试一下import React, { Component} from 'react';import { View, Text,} from 'react-native';export default class .原创 2020-06-06 14:31:23 · 233 阅读 · 0 评论 -
CSS flex布局
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .container{ width: 500px; height: 600px; } .container>div{ width: 100px; height: 100px; } .container>div:nth-chi.原创 2020-06-03 14:16:24 · 344 阅读 · 0 评论 -
react native 环境搭建出现的bug
输入react-native run-android,报错后error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses". Run CLI with --verbose flag for more details.Error: Command faile原创 2020-05-30 18:51:40 · 1586 阅读 · 2 评论 -
CSS3-伪类选择器
1.伪类选择器:1.1静态伪类选择器:link 选择一个未访问的超链接:visited 选择一个已访问的超链接例子:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> a:link{color: red} ...原创 2020-05-29 21:55:11 · 169 阅读 · 0 评论 -
XMLHttpRequest尝试
<!DOCTYPE html><html><head> <title> </title> <meta charset="utf-8"></head><body><script type="text/javascript">var xhr=new XMLHttpRequest();var url="http://t8.baidu.com/it/u=1484500186,150.原创 2020-05-27 15:29:17 · 171 阅读 · 0 评论 -
前端一些知识点整理
执行环境和作用域执行环境每一个函数都是一个执行环境,函数A里面定义的函数B,则A就是B的父环境,B可以访问A中定义的变量,A不能访问B内的变量。最外层的执行环境,对于浏览器而言,就是window,也就是全局执行环境。作用域当代码在一个环境中执行,会创建变量对象的作用域链。访问该变量,从作用域链最前端开始找。一直到最外层的全局执行环境。延长作用域在作用域链最前端临时增加变量对象,代码执行完毕后移除。更改作用域用call()或者apply()函数...原创 2020-05-27 09:52:26 · 123 阅读 · 0 评论 -
React Router 如何使用history跳转
react 路由原创 2020-05-20 12:49:32 · 14480 阅读 · 4 评论 -
React几种传递参数的方法
1.父组件向子组件传参回调函数也是参数的一种,也可以传给子组件,达到子组件控制父组件的目的import React from 'react';import ReactDOM from 'react-dom';function Son(props) { return <div>父组件的名称是{props.name}</div>}function Father(props) { return ( <Son name="Father"/> );原创 2020-05-13 17:59:09 · 9471 阅读 · 0 评论 -
React 如何动态加载本地图片
react的标签是<img>,导入本地图片,可以用import加载import React from 'react';import testImgUrl from "../../images/1.png";class App extends React.Component { constructor(props) { super(props); } render() { return ( &原创 2020-05-12 00:57:55 · 8508 阅读 · 3 评论 -
如何发布react app
1.在react "my-app"目录下执行npm run build在"my-app"路径下产生"build"文件夹2.打开终端,将产生的build文件复制到在服务器root目录下。3.终端安装nodeyum install nodejs出现:Is this ok [y/d/N]:输入y4终端输入 npm -v查看node是否安装成功5.安...原创 2020-05-07 21:36:19 · 302 阅读 · 0 评论 -
探究小程序的RPX PX
Iphone6的物理分辨率是750*1334,逻辑分辨率是375*667。网上找了一张750*1334的图,如何才能在小程序中完整显示原创 2020-05-03 17:58:26 · 300 阅读 · 0 评论 -
React-11-构建应用
1.分离组件2.创建静态版本import React from 'react';import ReactDOM from 'react-dom';class SearchBar extends React.Component { constructor(props) { super(props); } render() { return (<...原创 2020-04-28 19:33:23 · 170 阅读 · 0 评论 -
TypeScript-6-泛型
泛型函数看示例好像是规定了传入参数和传出参数一致function getName<T>(name:T):T {return name;}console.log(getName(123));那传入数组,返回number,能否这样写:function getName<T>(name:Array<T>):T {return name.len...原创 2020-04-27 16:45:13 · 560 阅读 · 0 评论 -
关于在React结合TypeScript错误解决办法
官方示例:https://www.tslang.cn/docs/handbook/react-&-webpack.html输入Webpack出错:One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:- webpack-cli (h...原创 2020-04-26 13:33:04 · 2444 阅读 · 0 评论 -
关于TypeScript,React Native,React整理的一些文档
1.React Native入门指南2.TypeScript指南3.React指南4.如何将React和TypeScript结合一起使用5.如何将React Native和TypeScript结合另外看到的React中文文档原创 2020-04-26 11:59:51 · 177 阅读 · 0 评论 -
TypeScript-5-函数
let myAdd: (x: number, y: number) =>number= function(x: number, y: number): number { return x + y; };let n:number=myAdd(1,2);console.log(n);myAdd:(x:number,y:number)规定了参数类型,=>number规定...原创 2020-04-25 19:42:13 · 224 阅读 · 0 评论 -
TypeScript-4-类
模仿文档中给出的类继承的例子class Animal{myName:string;constructor(name:string){ this.myName=name;}print(){ console.log(`我叫${this.myName}`);}}let animal=new Animal('动物');animal.print();class Cat ex...原创 2020-04-25 01:26:16 · 168 阅读 · 0 评论 -
JavaScript-静态属性和静态方法
先看第一个例子class Cat { MyName = '德玛';}let cat1 = new Cat();console.log(cat1.hasOwnProperty('MyName')); //true很显然 name='德玛'相当于this.name='德玛';这是实例属性,而不是静态属性,静态属性需要用static修饰class Cat { static My...原创 2020-04-21 14:00:59 · 381 阅读 · 0 评论 -
TypeScript-3-接口
先看下面的例子function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label);}let myObj = { size: 10, label: "Size 10 Object" };printLabel(myObj);其中局部变量声明里labelledObj: { la...原创 2020-04-20 23:38:44 · 587 阅读 · 0 评论 -
TypeScript-2-变量声明
for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 100 * i); }setimeout()会在for循环 执行完毕后再执行,而 所有的i都会指向同一个,因此需要在每一次循环过程中,执行setTimeout函数for (var i = 0; i < 10; i++) { (...原创 2020-04-19 23:46:53 · 137 阅读 · 0 评论 -
TypeScript-1-基础数据类型
学到声明string变量的时候遇到一个问题。下面是官方给的一个例子:enum Color {Red, Green, Blue}let c: Color = Color.Green;console.log(c);//1console.log(Color[0]);let name: string = `Gene`;let age: number = 37;let senten...原创 2020-04-19 17:28:14 · 423 阅读 · 0 评论 -
React-10-组合
import React from 'react';import ReactDOM from 'react-dom';function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children...原创 2020-04-16 11:16:22 · 92 阅读 · 0 评论 -
React-9-状态提升
import React from 'react';import ReactDOM from 'react-dom';function toCelsius(fahrenheit) { return (fahrenheit - 32) * 5 / 9;}function toFahrenheit(celsius) { return (celsius * 9 / 5) +...原创 2020-04-16 02:13:04 · 104 阅读 · 0 评论 -
React-8-表单
import React from 'react';import ReactDOM from 'react-dom';class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' ...原创 2020-04-15 21:14:08 · 114 阅读 · 0 评论 -
React-7-列表
import React from 'react';import ReactDOM from 'react-dom';function List(props) { console.log(props) const nums = props.nums; console.log(nums) const listItem = nums.map((elment) =...原创 2020-04-15 12:50:46 · 79 阅读 · 0 评论 -
React-6-条件渲染
看一下官方的示例import React from 'react';import ReactDOM from 'react-dom';function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(props) { return <h1&...原创 2020-04-14 13:05:28 · 132 阅读 · 0 评论 -
React-5-事件
先看例子import React from 'react';import ReactDOM from 'react-dom';class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn:...原创 2020-04-12 23:32:54 · 99 阅读 · 0 评论 -
React-4-State
先看一下官方的例子import React from 'react';import ReactDOM from 'react-dom';class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } ren...原创 2020-04-12 00:16:06 · 159 阅读 · 0 评论 -
React-3-组件
ReactDOM.render(element, container[, callback])在提供的container里渲染一个 React 元素,并返回对该组件的引用(或者针对无状态组件返回null)。其中element 可以长这样:<h1></h1>如果我这么写<H1><H1>,这里的'H1'将会是一个定义组件,特征就是首...原创 2020-04-11 22:38:51 · 109 阅读 · 0 评论 -
React-2-元素渲染
渲染元素,只需要将元素传入ReactDOM.render();如下:import React from 'react';import ReactDOM from 'react-dom';// class App extends React.Component{// render(){ // }// }// ReactDOM.render(// <App /...原创 2020-04-10 23:18:43 · 89 阅读 · 0 评论 -
React-1-JSX
本文按照React官方文档的脉络进行总结以React-学习目录 的demo为基础1.大括号大括号包裹变量import React from 'react';import ReactDOM from 'react-dom';const headContent='你好';class App extends React.Component{ render(){ return...原创 2020-04-10 17:25:43 · 146 阅读 · 0 评论 -
React-学习目录
会把我学习过程中的学习流程到这里,供新手入门用学习资料:1.React入门-概述和演练教程https://www.taniarascia.com/getting-started-with-react/2.官方示例https://zh-hans.reactjs.org/docs/getting-started.html#learn-react环境搭建:1.安装...原创 2020-04-10 14:48:58 · 202 阅读 · 0 评论 -
JavaScript-原型链和继承-6
class Father { constructor() { this.name = 'a'; } print() { console.log('b'); }}class Son extends Father { constructor() { super(); //执行超类的构造函数,还能继承方法 ...原创 2020-04-09 22:17:51 · 89 阅读 · 0 评论