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学习及实例开发(一)——开始(转载)的更多相关文章

  1. React学习及实例开发(一)——开始

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.构建一个新项目 1.命令行运行如下命令,构建一个新的react项目 npm install -g crea ...

  2. React学习及实例开发(三)——用react-router跳转页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.定义路由 1.安装react-router npm install react-router@ --sav ...

  3. React学习及实例开发(二)——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  4. WebService学习------小实例开发(号码归属地查询)

    1.WebService简介: WebService是一种跨平台,跨语言的,可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.通过SOAP在Web上提 ...

  5. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  6. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  7. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  8. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  9. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

随机推荐

  1. 面对AI

    面对AI,我们应该怎么做? 李开复博士的一段话: 1. 我们应该具有战略性思维,并以人工智能无法取代的工作为目标.我们应该致力于终身学习,更新我们的技能,了解新趋势,并寻找新机遇. 2. 我们应该鼓励 ...

  2. PHP涉及到的英文单调

    slashes [slæʃeis]:斜线 uppercase ['ʌpəˌkeɪs]:大写字母,简写uc strip [strɪp]:去掉 trim [trɪm]:整理(修剪) explode [ɪk ...

  3. vue 使用技巧总结 18.11

    前言: 在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟 ...

  4. excel 公式 insert 语句

    ="insert into tb_fdn_deviceaccount (zdmc,czmc,sbbh,sbmc,SZCS,SBFLMC,SBLXMC,SBGG,SBYZ,SBJZ,SBXH, ...

  5. 学习 Spring (五) Aware 接口

    Spring入门篇 学习笔记 Spring 中提供了一些以 Aware 结尾的接口,实现了 Aware 接口的 bean 在被初始化之后可以获取相应资源 通过 Aware 接口,可以对 Spring ...

  6. HTML知识点总结[部分]

    Web服务的本质(socket实例) import socket def handle_request(client): buf = client.recv(1024) client.send(byt ...

  7. 洛谷3822 [NOI2017] 整数 【线段树】【位运算】

    题目分析: 首先这题的询问和位(bit)有关,不难想到是用线段树维护位运算. 现在我们压32位再来看这道题. 对于一个加法操作,它的添加位置可以得到,剩下的就是做不超过32的位移.这样根据压位的理论. ...

  8. CH2101 可达性统计(算竞进阶习题)

    拓扑排序+状态压缩 考虑每一个点能够到达的所有点都是与该店相邻的点的后继节点,可知: 令f[u]表示u点可到达的节点个数,f[u]={u}与f[v](u, v)的并集 于是可以利用状态压缩,能够到达的 ...

  9. hihocoder#1333 : 平衡树·Splay2 (区间操作)

    题面: #1333 : 平衡树·Splay2 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:好麻烦啊~~~~~ 小Hi:小Ho你在干嘛呢? 小Ho:我在干活啊! ...

  10. MT【277】华中科技大学理科实验班选拔之三次方程

    (2015华中科技大学理科实验班选拔)已知三次方程$x^3+ax^2+bx+x=0$有三个实数根.(1)若三个实根为$x_1,x_2,x_3$,且$x_1\le x_2\le x_3,a,b$为常数, ...