首页 技术 正文
技术 2022年11月8日
0 收藏 977 点赞 2,044 浏览 1399 个字

react.js 教程之 Installation 安装

  1. 运行方法

    运行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命令行工具,或者直接添加到自己正在开发的项目中
  2. 创建一个新的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
  3. 将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版本
  4. 上面有些内容没有讲到,这涉及后面的知识,后面再讲

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,110
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,584
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,431
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,202
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,837
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,920