React学习及实例开发(一)——开始(转载)
https://www.cnblogs.com/MaiJiangDou/p/9245063.html#4136668 转载
一、构建一个新项目
1、命令行运行如下命令,构建一个新的react项目
npm install -g create-react-app
create-react-app my-app
2、运行项目,效果如下图
cd my-app
npm start

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

1、node_modules
用于存放项目的依赖包
2、public
- index.html 项目的入口文件
- manifest.json 当web页面被用于Android主页面使用时的配置文件
3、src
- 开发中的主要区域,页面都写在这里
- 在这里App.js是一个组件,index.js将它渲染到页面中
4、package.json
包含项目信息、项目依赖模块、npm运行脚本的命令缩写等
三、其他
暴露配置项
用create-react-app创建的项目中,为了避免一开始就费太多精力配置技术栈,webpack等配置都是封装好的,如果需要修改,可以用如下命令将配置项“弹射”到应用的顶层(eject命令不可逆)。
npm run eject
如下图,目录中多出了config和scripts两个文件夹,同时package.json文件中的scripts部分也发生了相应的变化。


React学习及实例开发(一)——开始(转载)的更多相关文章
- React学习及实例开发(一)——开始
本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.构建一个新项目 1.命令行运行如下命令,构建一个新的react项目 npm install -g crea ...
- React学习及实例开发(三)——用react-router跳转页面
本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.定义路由 1.安装react-router npm install react-router@ --sav ...
- React学习及实例开发(二)——用Ant Design写一个简单页面
本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...
- WebService学习------小实例开发(号码归属地查询)
1.WebService简介: WebService是一种跨平台,跨语言的,可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.通过SOAP在Web上提 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)
),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
随机推荐
- EChart.js 笔记一
一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...
- SOJ 1685:chopsticks(dp)
题目链接 说实话挺喜欢soj的界面,简简单单,没有多余的东西hhh(但是简单到连内存限制,时间限制都看不到了. 题意是有个“奇葩”的主人公,吃饭要用三根筷子.两根短的一根长的. 现在给你n根筷子,要在 ...
- 【题解】K乘积
题目描述 有N个数,每个数的范围是[-50,50],现在你要从这N个数中选出K个,使得这K个数的乘积最大. 输入格式 第一行,N和K. 1 <= N <= 50. 1 <= K & ...
- veu——引入iconfont图标
我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...
- P1282 多米诺骨牌 dp
思路:dp[i][j] 的j是上半段的和的值 这里表示的是达到上半段值是j的最小次数 答案在最小的可达到的j #include<bits/stdc++.h> using namespa ...
- 关于thinkphp5URL重写
可以通过URL重写隐藏应用的入口文件index.php,下面是相关服务器的配置参考: [ Apache ] httpd.conf配置文件中加载了mod_rewrite.so模块 AllowOverri ...
- 「CodeForces 581D」Three Logos
BUPT 2017 Summer Training (for 16) #3A 题意 给你三个矩形,需要不重叠不留空地组成一个正方形.不存在输出-1,否则输出边长和这个正方形(A,B,C表示三个不同矩形 ...
- nfs的配置文件/etc/exports
/etc/exports 文件格式 <输出目录> [客户端1 选项(访问权限,用户映射,其他)] [客户端2 选项(访问权限,用户映射,其他)] a. 输出目录:输出目录是指NFS系统中 ...
- 一种导致 emwin 中 EDIT 控件不显示的情况
@2018-12-11 [小记] 设计界面中使用了 EDIT 控件,但在其初始化语句中误使用了 text-color 属性API,导致了控件 EDIT 中的 Text 无法显示,具体如下 hItem ...
- 自写juqery插件实现左右循环滚动效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...