react.js 教程之 Installation 安装
2024-09-22 01:02:23
react.js 教程之 Installation 安装
运行方法
运行react有三种方式
1.如果你只是学习react,可以在http://codepen.io/gaearon/pen/rrpgNB?editors=0010上只写写代码
2.如果你想用自己的编辑器,https://facebook.github.io/react/downloads/single-file-example.html可以下载这个html文件,直接编写代码,编译速度很慢
3.如果是自己开发app,可以通过安装create-react-app命令行工具,或者直接添加到自己正在开发的项目中创建一个新的app应用
这是开发react单页面应用最好的方式,提供了完善的开发环境,你可以使用最新的js特性,拥有非常好的开发体验,并且生产环境的代码优化了,使用如下命令运行react应用
npm install create-react-app -g
create-react-app my-app
cd my-app
npm start
创建的程序不会处理后端的逻辑和数据库,仅仅是创建了一个前端的构建通道,所以你可以使用任何的后端语言。在此程序的背后使用了诸如Babel和webpack的构建工具,尽管这些工具有很复杂的配置,但是react保证让你零配置运行项目,当你写好了项目,可以使用npm run build创建优化后的代码,这些代码将放在build文件夹中,关于create-react-app命令行工具的更多介绍,请访问https://github.com/facebookincubator/create-react-app#create-react-app- 和 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents将react添加到已经存在的项目中
添加react并不需要重写项目,我们建议你将react添加到你项目的一个小的部分中,作为一个独立的部件,看react是否能够正常工作,react可以单独使用不需要构建管道,但是我们建议你在设置这个功能,因为这样会是你的开发更高效,一个现代的构建管道包括以下几方面内容
1.包管理器,如Yarn或者npm,方便管理第三方包
2.打包器,如webpack或者Browserify,能够帮助你书写模块化代码并且打包成小的包用来节省下载时间
3.编译器,如Babel,能够帮助你书写现代化的js代码,在老浏览器中照样可以用
步骤:
1.安装react
npm init
npm install --save react react-dom
2.安装Babel和JSX
Babel要包含babel-preset-react或者babel-preset-es2015
3.安装webpack
简单的react的程序
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello,world!</h1>,
document.getElementById('root')
)
4.指定生产和开发使用的react版本上面有些内容没有讲到,这涉及后面的知识,后面再讲
最新文章
- perl q qq qr qw qx 区别与使用方法
- 预处理语句--#define、#error和#warning
- [ubuntu] Can not run OpenProj on Ubuntu
- Overview of Form Control Types [AX 2012]
- phpize 动态添加 PHP 扩展的错误及解决方案
- codevs 1704 卡片游戏
- HTML5显示地图例子
- CLRS:max_heap and min_heap operation (pseudocode)
- jenkins 重新设置 管理员密码
- python---连接MySQL第三页
- [repost]Xcode因为证书问题经常报的那些错
- python--DenyHttp项目(1)--调用cmd控制台命令os.system()
- 关于Thread类的简单使用
- C#、Java和JS实现SHA256+BASE64加密总结
- js 控制光标到指定位置
- 剑指Offer 46. 孩子们的游戏(圆圈中最后剩下的数) (其他)
- Maven使用deploy上传jar包到远程库
- Hadoop工作原理
- 结对编程——四则运算器(UI第十组)
- 设置视口中心点setViewCenter