react 最佳入门_miaov-React 最佳入门

node 环境搭建

快速安装国内镜像

npm i -g nrm

nrm use taobao

简单介绍 ES6

let const

let 不可以被重复声明，而 var 可以

箭头函数

等效匿名函数

没有 arguments

this 指向了函数所在的上下文环境

函数的返回值

let a = () => {}; console.log(a); // undefined, 误认为返回的是表达式

let b = () => ({});console.log(b); // {}

剩余参数

function fn(a,...re){ console.log(re) };

fn(1,2,3) // [2,3]

解构赋值

let human = { id: 0 };

let { id: id1} = human;

console.log(id1); // 0, 已经把 id 给了 id1

类

是个语法糖，看起来更像 OOP

用法：

class Animal{

constructor(a, b){ // 传递参数

this.a = a;

this.b = b;

}

add(){

return console.log(this.a + this.b)

}

let a = new Animal(1,2)

console.log(a) // {a: 1,b: 2}

a.add() // 3

继承

class Human extends Animal{

constructor(name){

super(3,4) // 执行父类的构造函数

this.name = name

}

let hu = new Human()

console.log(hu.a) // 3

简单介绍 commonJS，ES6模块化规范

commonJS: require('') / module.exports = {}

ES6: import {} from '' / export {}

工作流程

包管理器,管理安装项目依赖：npm ( install, update, remove, analyse )

任务流工具：Grunt, gulp ( 两者无法支持模块化开发 ), webpack ( 模块打包，代码检查等 )

Babel 简单介绍

可以把很多不是 JS 的文件自动编成 JS

babel-core: 核心库，类似一个裸机，只有操作系统，需要装软件才能发挥大作用

plugins: 插件，各种各样的插件，例如：es2015-arrow-functions 编译箭头函数

presets: 预设，会把很多插件打包到一起，例如：react/latest

.babelrc: 配置文件，填写 plugins 和 presets

webpack 简单介绍

安装： $ npm i -D webpack

项目结构：

|-dist // 打包生成文件存放

|-src

|- app.js // 入口文件

代码：

// webpack.config.js

const path = require('path')

module.exports = {

entry: ‘./src/app.js’, // 项目入口文件

output: {

filename: 'main.js' // 打包后的文件

path: path.resolve(__dirname, 'dist/assets')// 打包保存到哪里，绝对路径

publicPath: '/assets/' // 未知

}

执行：$ webpack

react 最佳入门_miaov-React 最佳入门相关推荐

使用Formik轻松开发更高质量的React表单（一）入门
前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的,看到作者的高度肯定后我立即转到github上,正如许多朋友所关注的,Formik的星数达8282,这个数字在git ...
react和nodejs_如何使用NodeJS和React为SaaS构建Stripe Billing入门流程
react和nodejs 你会学什么? (What will you learn?) In this article we will be going over the steps needed to ...
手把手教你写web全栈入门项目—React+Koa+MongoDB（3w字教程，真的很详细，有代码）
手把手教你写web全栈入门项目-React+Koa+MongoDB
3.9 Docker最新入门教程-Docker入门-构建镜像最佳实践
3.9 构建镜像最佳实践安全扫描构建镜像后,最好使用docker scan命令扫描它以查找安全漏洞.Docker 与Snyk合作提供漏洞扫描服务. 笔记您必须登录到 Docker Hub 才能扫 ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
往期文章目录: [入门]React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」文章目录快速搭建项目介绍 Vite Vite 特点搭建第一个 Vite 项目 ...
【React全家桶】 React入门
React简介 React是什么 React 是一个用于构建用户界面的 JavaScript 库. 是一个将数据渲染为 HTML 视图的开源 JS 库它遵循基于组件的方法,有助于构建可重用的 UI ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
react leaflet_如何使用React Leaflet和Leaflet Gatsby Starter设置自定义Mapbox底图样式
react leaflet Building maps can be pretty powerful, but often you're stuck with open source options ...

react 最佳入门_miaov-React 最佳入门

react 最佳入门_miaov-React 最佳入门相关推荐

最新文章

热门文章