使用reactjs,我们有两种方式
一种是通过script标签引入reactjs,这是一种比较古老的编码方式了, 如果我们的项目比较大,你会对项目js进行拆分,然后页面就会通过script标签加载很多拆出来的js文件。这样的话,页面性能会很低,维护性也比较差
第二种是使用脚手架工具,这也是我们在学习的时候要使用的方式。那么什么是脚手架呢,可以这么理解,脚手架是前端开发过程中的一种辅助工具。他会自动帮我们构建一个大型项目的开发流程和目录,他允许我们以一定的方式去实现js的相互引用。让我们更方便的对项目进行管理,但是我们在脚手架里面写的代码实际上并不能直接运行。你需要脚手架工具帮我们做代码的编译,编译出来的代码才可以被浏览器识别运行。我们一般会使用grunt,gulp,webpack这样的工具来帮助我们编写脚手架。在开发的过程中我们其实不用太过关心脚手架的底层实现,只要学会使用他就可以了。能用reactjs产生的脚手架工具非常多,甚至公司内部都会有定制的脚手架工具。在初学reactjs的时候,我们可以使用官方提供的脚手架工具。叫做 create-react-app。首先是官方提供的脚手架工具,所以健壮程度不用怀疑。同时使用很简单,可定制性很强。调试代码也非常方便
这个地址,可以看到官方 Create React App 这个脚手架工具
 
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
看到npm就知道这是一个node的包管理工具,所以如果想使用这个工具就需要安装node 和 npm
如果node版本在6以上,npm版本在5.2以上,可以用下面这种方式
npx create-react-app my-app
cd my-app
npm start

react开发环境准备的更多相关文章

  1. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  2. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  3. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  4. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  5. React开发环境配置

    本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...

  6. React笔记01——React开发环境准备

    1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...

  7. 搭建 webpack、react 开发环境(三)

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  8. 搭建 webpack、react 开发环境(二)

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  9. 搭建 webpack、react 开发环境(一)

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  10. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

随机推荐

  1. js 判断各种数据类型 typeof 几种类型值

    了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx) 如下实例: typeof   2      输出   number   ...

  2. C++的一些编程规范

    新规范的目标: 让代码排错更加简单 程序员专心于业务逻辑 将一些错误交给编译器处理 提高代码可维护性 逐步实现插件化 编码 使用array(QT下用QVarLengthArray)代替和vector代 ...

  3. Linux查找命令与find命令详解

    一.文件查找之locate命令 locate :非实时的,查找时根据全系统文件数据库进行的,模糊查找,update 手动生成文件数据库速度快 依赖于updatedb数据库 1 2 3 4 5 6 7 ...

  4. pat1014. Waiting in Line (30)

    1014. Waiting in Line (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Suppo ...

  5. 详解ASP.NET MVC Model验证

    ASP.NET mvc的最好的优点之一就是支持Model验证,这个特性很方便你可以选择在定义Model的时候在字段中采用特性进行注解约定,也可以在代码中自己进行手动验证.下面就来细说一下ASP.NET ...

  6. sql查询时,根据特定的条件给表的某一个字段赋值

    先讲一下需要这个需求的情景: 这是一个招聘求职项目遇到的一个问题.个人A向公司B的职位投递简历后,公司B会收到个人A的简历;但是A投递后把简历删除,公司收到的简历信箱 还有这个简历,但却不能看了. 原 ...

  7. scss-@at-root

    @at-root指令可以使一个或多个规则被限定输出在文档的根层级上,而不是被嵌套在其父选择器下. 下面就通过scss代码实例介绍一下它的作用: 没有使用@at-root命令的默认情况. .parent ...

  8. html5格式样式

    <b>        加粗 <b style="font-size: 100px;">大字体</b>

  9. stateless函数里面的参数问题

    UI组件文件: function Selector({ status1, status2, status3 }){ return (<div><span>demo</sp ...

  10. Android Activity中状态保存机制

    在Activity中保存用户的当前操作状态,如输入框中的文本,一般情况下载按了home键后,重新进入文本框中的东西会丢下,所以我们要保存当前页面信息,如在写短信的时候接到一个电话,那么当你接电话的时候 ...