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版本
- 上面有些内容没有讲到,这涉及后面的知识,后面再讲
时间: 2024-11-08 05:13:39