react.js 教程之 Installation 安装

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

react.js 教程之 Installation 安装的相关文章

kali Linux系列教程之BeFF安装与集成Metasploit

kali Linux系列教程之BeFF安装与集成Metasploit 文/玄魂 1.1 apt-get安装方式 1.2 启动 1.3 基本测试 1.4 异常信息 1.5 从源码安装BeEF 1.5.1 安装curl git 1.5.2 安装rvm 1.5.3 安装依赖项 1.5.4 安装ruby 1.5.5 安装bundler 1.5.6下载beef 1.5.7 安装和启动 1.6 集成metasploit 1.1 apt-get安装方式 打开终端,输入如下命令: apt-get install

iOS Sprite Kit教程之xcode安装以及苹果帐号绑定

iOS Sprite Kit教程之xcode安装以及苹果帐号绑定 其他的站点上下载安装Xcode 有时候,应用商店下载较慢,所以用户也能够选择从其它站点下载Xcode安装文件.以下解说这样的Xcode的安装步骤: (1)双击下载的Xcode软件,弹出正在打开此软件的对话框,如图1.26所看到的. (2)打开该软件后,就会弹出Xcode对话框,如图1.27所看到的. 图1.26  操作步骤1                                     图1.27  操作步骤2 (3)将

Kali Linux系列教程之OpenVas安装

Kali Linux系列教程之OpenVas安装 文 /玄魂 目录 Kali Linux系列教程之OpenVas安装... 1 前言... 1 1.  服务器层组件... 1 2.客户层组件... 1 安装过程... 2 Initial setup. 2 初始管理员密码... 4 从浏览器访问后台... 4 更新数据... 7 管理用户... 8 扫描器配置信息查看... 9 修复安装错误... 9 创建证书... 10 更新NVT. 12 客户端证书错误... 13 前言 OpenVAS是一款

react.js 之 create-react-app 命令行工具系统讲解

react.js 教程之 create-react-app 命令行工具系统讲解 快速开始 npm install -g create-react-app create-react-app my-app cd my-app/ npm start 通过http://localhost:3000/查看你的app 使用 npm run build 编译打包程序 npm test 文件修改后测试,这部分内容后面讲 更新到最新版本 创建react app的主要分为两个包,一个包是create-react-a

OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务

OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务 OpenVAS基础知识 OpenVAS(Open Vulnerability Assessment System)是开放式漏洞评估系统,其核心部分是一个服务器.该服务器包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题.OpenVAS不同与传统的漏洞扫描软件.所有的OpenVAS软件都是免费的,而且还采用了Nessus(一款强大的网络扫描工具)较早版本的一些开放插件.虽然Nessus很强大,但是该工具

Linux入门基础教程之Linux下软件安装

Linux入门基础教程之Linux下软件安装 一.在线安装: sudo apt-get install 即可安装 如果在安装完后无法用Tab键补全命令,可以执行: source ~/.zshrc APT(Advanced Packaging Tool), 包括apt-get, apt-cache, apt-cdrom等工具,APT可以自动下载,配置,安装二进制或者源代码格式的软件包,因此简化了Unix系统上管理软件的过程,Ubuntu是Debian的发行版.Debian使用的包管理工具是dpkg

gulp教程之gulp-less

gulp教程之gulp-less Ooo_My_God发表于2015-02-24 分类:构建工具 阅读(4518) 评论(19) 简介: 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1.gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2.本示例目录结构

React Native01-开始 Windows环境安装配置篇

转载本文章的童鞋请注明原链接. 查阅文档之类的资料,建议到 http://reactnative.cn/ 本人使用环境Win10. 在阅读本文之前,请了解我们安装React Native之前,要安装Python2.7.git.android环境.Visual Studio 2015.nodejs. 1.安装Python 1)下载地址 https://www.python.org/downloads/release/python-2711/ 建议安装2.7.11版本,3.x以上版本不支持. 我安装

使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

来自译者 markzhai:大家也知道最近 Web 越来越火了,如果你还以为 Web 就是 jQuery.Ajax.CSS 什么的,那你就 out 了.给大家几个链接看一看吧: https://shop.polymer-project.org/ https://housing.com/ https://www.flipkart.com/ https://react-hn.appspot.com/ https://mobile.twitter.com/ 部分可能需要自备梯子,另外建议在 Chrom