react入门--------安装react
创建一个单页面应用
Create React App
是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的开发体验,并可以有效优化您的应用程序,提升开发效率。
$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm run start上面只是创建了一个React应用,不需要关心也需要不处理后端逻辑或数据库; 它只是一个React的前端环境集成工具,负责创建前端的开发环境,所以你可以使用它与你想要的任何后端进行交互。 它内部使用了webpack,Babel和ESLint,你可以单独配置它们,来达到定制化的效果。
在已经开发的项目中使用React
您不需要重新编写应用程序即可开始使用React。
我们建议将React添加到应用程序的一小部分,例如单个小部件,以便您可以看到它是否适合您的用例。
虽然React可以在没有构建工具的情况下使用,但我们建议使用并设置它,以便提高生产力。 现代构建工具通常包括:
一个包管理器,例如
npm
一个打包工具,例如
webpack
一个编译工具,例如
Babel
安装React
建议使用Yarn或npm来管理React前端模块的依赖。
通过Yarn安装:
yarn add react react-dom
通过npm安装:
npm install --save react react-dom
使用ES6和JSX
建议您使用Babel中的React配置让您在JavaScript代码中可以使用ES6和JSX。 ES6是一组现代JavaScript特性,使开发更容易,JSX是对React非常有效的JavaScript语言的扩展。
具体请百度Babel如何在许多不同的构建环境中配置Babel。首先 确保你安装了
babel-preset-react
和babel-preset-es2015
,并已经在.babelrc
配置中启用它们。使用ES6和JSX写一个HelloWorld的例子
建议使用像
webpack
或Browserify
这样的打包工具,以便您可以编写模块化代码,它们可以将不同的代码模块打包捆绑到一起,用来优化的代码加载时间。一个简单的React示例如下所示:
这里我使用的是bower来安装react和react-dom。
mkdir hello-world & cd hello-world bower install react babel --save touch index.html
然后在index.html中写入以下内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script src="bower_components/babel/browser.js"></script> <script type="text/babel"> var doc = document; ReactDOM.render( <h1>你好,react</h1>, doc.getElementById('app') ) </script> <title>ReactDOM.render</title> </head> <body> <div id="app"></div> </body> </html>
最后在浏览器中打开这个页面,就可以看到最终效果。
转载于:https://www.cnblogs.com/songdongdong/p/7273371.html
react入门--------安装react相关推荐
- React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
- React 入门教程(适合初学者)
React 入门教程 React 官网 https://reactjs.org/docs/getting-started.html React 是一个用于构建用户界面(UI)的 JAVASCRIPT ...
- React从入门到精通系列之(1)安装React
一.安装React React是灵活的,可以在各种类型的项目中使用. 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目. 创建一个单页面应用 Create Re ...
- React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所 ...
- 《慕课React入门》总结
React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
- React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
- Windows环境下安装React Native开发环境----记一次填坑过程
前言 集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
- arcgis开发 多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网 英文官网: https://reactjs.org/ 中文官网: https://react. ...
最新文章
- java前后端分离账号错误_前后端分离,获取token,验证登陆是否失效
- Python 内建函数 - sorted(iterable[, key][, reverse])
- VC+ADO+Access2000数据库文件密码的设置和修改
- (转)Spring Boot 2 (九):【重磅】Spring Boot 2.1.0 权威发布
- 在Android Studio中使用Method trace,查看某进程的所有线程trace的方法
- 暗黑系博客主题,欢迎访问与魔改,博客网站有搭建教程
- 从零开始学PCR技术(二):Taq DNA酶
- (2)卷积 卷积和
- 23 期-原文 6.30
- wifi情况下使用fiddler_如何对手机http进行抓包?Fiddler工具超好用
- matlab去除图片水印_怎么用matlab从含有水印的图像中提取出水印
- python import random函数-Python代码中的“import random”是什么意思?
- DDR3详解(以Micron MT41J128M8 1Gb DDR3 SDRAM为例)
- 潘多拉路由器搭建php,【请教】潘多拉(PandoraBox)双Wan如何配置叠加宽带
- 重振旗鼓后,七鲜能圆京东的一线零售品牌梦吗?
- 简述SSH框架和SSM框架的区别
- 每日三个笑话-20151008
- 关于游戏 生死狙击 辅助 外挂 这种
- H3C SecPath F100 系列
- 步进电机 HD6600驱动器 附arduino教程