博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React学习及实例开发(一)——开始
阅读量:4974 次
发布时间:2019-06-12

本文共 1020 字,大约阅读时间需要 3 分钟。

本文基于React v16.4.1

初学react,有理解不对的地方,欢迎批评指正^_^

一、构建一个新项目

  1、命令行运行如下命令,构建一个新的react项目

npm install -g create-react-appcreate-react-app my-app

2、运行项目,效果如下图

cd my-appnpm start

二、项目目录

  如下图,是新构建项目的目录:

1、node_modules

  用于存放项目的依赖包

2、public

    • index.html 项目的入口文件
    • manifest.json 当web页面被用于Android主页面使用时的配置文件

  3、src

    • 开发中的主要区域,页面都写在这里
    • 在这里App.js是一个组件,index.js将它渲染到页面中

  4、package.json

包含项目信息、项目依赖模块、npm运行脚本的命令缩写等

三、其他

1、暴露配置项

用create-react-app创建的项目中,为了避免一开始就费太多精力配置技术栈,webpack等配置都是封装好的,如果需要修改,可以用如下命令将配置项“弹射”到应用的顶层(eject命令不可逆)。

npm run eject

如下图,目录中多出了config和scripts两个文件夹,同时package.json文件中的scripts部分也发生了相应的变化。

 

 

  2、写jsx标签不能自动补齐的问题(VSCode)

    • code-->首选项-->设置
    • 搜索emmet.triggerExpansionOnTab,按下图,将false改为true

10.23 new----------------

npx create-react-app my-app

报错The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".

解决:整一个nvm ,安装需要的node版本(如8.10.0),然后切换到8.10.0,就可以了

 

END-----------------------------------------------------------------------

 

 

 

转载于:https://www.cnblogs.com/MaiJiangDou/p/9215003.html

你可能感兴趣的文章
JMeter-性能测试之报表设定的注意事项
查看>>
1066-堆排序
查看>>
仿面包旅行个人中心下拉顶部背景放大高斯模糊效果
查看>>
强大的css3
查看>>
c#中的组件拖拽和MouseMove事件
查看>>
C# 小叙 Encoding (二)
查看>>
python创建对象数组避免浅拷贝
查看>>
CSS自学笔记(14):CSS3动画效果
查看>>
项目应用1
查看>>
Ubuntu下配置jdk和tomcat
查看>>
大型网站的演变升级
查看>>
图片延迟加载的实现
查看>>
C# 委托链(多播委托)
查看>>
解密个推持续集成
查看>>
基本SCTP套接字编程常用函数
查看>>
C 编译程序步骤
查看>>
页面抓取匹配时,万恶的\r,\n,\t 要先替换掉为空,出现匹配有问题,都是这个引起的...
查看>>
利用Node.js调用Elasticsearch
查看>>
构造函数
查看>>
LeetCode N-Queens
查看>>