前言

  其实我的react的实战经验很少,大概是17年-18年写了一个react全家桶的后台管理系统。猜测这个项目应该还一直在使用

  在我手里的vue项目就比较多了,技术栈一直是vue全家桶。最近也在深入的了解vue的原理。撸一遍vue源码。尤大大正在vue3.0

  听说也是大改的,函数式编程,从长远的角度来看。还是利大于弊的。react比较短板,所以想利用工作之余写几个实战项目,react非常强悍

  希望后面也可以写更多的大型的react项目,深入了解前端,自己的能力也可以提升到一个台阶。

  1. 第一步,如何开始react呢
    1. 有过vue开发的前端,都熟悉 vue-cli 脚手架这个东西。脚手架就是用来快速搭建单页面项目的,说白了就是一个基本项目框架
    2. 那react,也是对应的脚手架的。create-react-app 这里放出官网相对应的链接:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app
  2. 开始动手吧
    • 在本地新建一个文件夹,然后打开命令行 运行代码 :npx create-react-app my-app
    • 注释:第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具
    • 运行完之后,长这样子的
    • 运行 cd my-app
    • 运行 yarn start
    • 运行之后的结果是这样的
    • 会打开默认浏览器)其实平常我都是用谷歌浏览器的 360总是很霸道的把360浏览器设置成为我的默认浏览器 改来改去的 我改累了 就妥协了
    • 用你最喜欢的编辑器,打开 my-app 目录结构长这样子
    • 画布已经准备好了(),接下来就任君发挥了。
  3. 这仅仅是打开了门哦,快来跟Fannie一起冒险吧)哈哈哈哈

第一步,怎么打开react的大门?的更多相关文章

  1. 重制AdvanceWars第一步 -- 搞定地图

    首先来聊下高级战争吧Advance Wars,由任天堂旗下的Intelligent Systems开发的战棋游戏.初作诞生于GBA上,后来继续跟进了高战2黑洞崛,而后在下一代掌机DS上也出了三代续作高 ...

  2. java学习第一步,使用IntelliJ IDEA编写自己的第一个java程序

    首先下载java的jdk,然后说一下IDEA的配置 IntelliJ IDEA目前公认的最好的java开发工具,不过一般的学校的教学还是使用eclipse来进行java的开发.所以老师一般只会教你如何 ...

  3. ElasticSearch第一步-环境配置

    ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSearch第四步-查询详解 Elasti ...

  4. 005.TCP--拼接TCP头部IP头部,实现TCP三次握手的第一步(Linux,原始套接字)

    一.目的: 自己拼接IP头,TCP头,计算效验和,将生成的报文用原始套接字发送出去. 若使用tcpdump能监听有对方服务器的包回应,则证明TCP报文是正确的! 二.数据结构: TCP首部结构图: s ...

  5. Mac系统下使用VirtualBox虚拟机安装win7--第一步 安装vbox虚拟机

    Mac系统下使用VirtualBox虚拟机安装win7操作步骤: 第一步 安装vbox虚拟机 1.先下载vbox,下载地址:: https://www.virtualbox.org/wiki/Down ...

  6. Java 学习第一步-JDK安装和Java环境变量配置

    Java学习第一步——JDK安装及Java环境变量配置 [原文]  2014-05-30 9:09  Java SE  阿超  9046 views Java作为当下很主流的编程语言,学习Java的朋 ...

  7. 面对一个新的MCU,我再也不敢说第一步是点灯了

    折腾了几天AT91SAM3S,今天才算是把开发板上的3个LED点亮. 在点亮之前,起码看了百八十页的Datasheet,动用了N次百度. 各种时钟,看门狗,分散加载,中断向量,都得去整.这些都远远超过 ...

  8. java微信开发API第一步 服务器接入

    I如何接入服务器,下面就为大家进行介绍 一.说明 * 本示例根据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/2016 5:34 ...

  9. Java学习第一步: Win7配置JDK环境

    转摘"专注JavaWeb开发":http://www.javaweb1024.com/java/Javajichu/2015/03/02/353.html 下载JDK并安装到本机  ...

随机推荐

  1. Java 解决Emoji表情过滤问题(转载)

    本文作者 我是周洲 原文链接 https://blog.csdn.net/u012904383/article/details/79376707 本人使用的是第三种引入jar的方法 问题: Emoji ...

  2. 你再也不用使用 Redux、Mobx、Flux 等状态管理了

    Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...

  3. 解决远程连接数据库:Host is not allowed to connect to this MySQL server

    远程连接数据时,报以下提示: Host 'web1' is not allowed to connect to this MySQL server 原因是数据库服务不允许远程登录,没有授权导致,解决方 ...

  4. django--模型字段引用

    如果内置字段不起作用,您可以尝试使用django-localflavor(文档),其中包含对特定国家和文化有用的各种代码片段. 此外,您可以轻松编写自己的自定义模型字段. 注意 从技术上讲,这些模型是 ...

  5. 【Bug】MQ消息与事务提交

    项目联调期间,遇到个bug,涉及MQ消息传递和事务提交时间问题,简单记录下. 背景 审核服务(审核创建项目),点击审核通过,后台代码会在提交事务前发送MQ消息(该消息由项目管理服务消费),发送成功后, ...

  6. [openssl] 使用openssl生成证书

    使用openssl生成带域名的证书,SAN,subjectAltName, subject alternative name, DNS. 1. 生成私钥 openssl genrsa - 2. 编写配 ...

  7. IDEA快速搭建WEB项目【记录篇】

    这里用的都是市面上通用的技术,而每个公司都有自己的调用方式,可以根据实际情况与业务场景不同去进行变通 三层架构: 界面层(User Interface layer).业务逻辑层(Business Lo ...

  8. 《The One!团队》第八次作业:ALPHA冲刺(一)

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)掌握软件测试基础技术.(2)学习迭代式增量软件开发过程(Scrum) 第一天 ...

  9. 201671030116 宋菲菲 实验十四 团队项目评审&课程学习总结

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 任务一:团队项目审核已完成.项目验收过程意见表已上交. 任务二:课程学习 ...

  10. 01.Vue前端路由学习目标

    路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航 基于vue-rout ...