资讯专栏INFORMATION COLUMN

react开发教程(二)安装

Jonathan Shieber / 1289人阅读

摘要:使用快速构建开发环境第一步安装全局包是来自于,通过该命令我们无需配置就能快速构建开发环境。执行以下命令创建项目项目目录在浏览器中打开,即可显示上一篇开发教程初识下一篇开发教程三组件的构建

react安装

React可以直接下载使用,下载包中也提供了很多学习的实例。
本教程使用了 React 的版本为 15.4.2,你可以在官网 http://facebook.github.io/react/ 下载最新版。
你也可以直接使用 BootCDN 的 React CDN 库,地址如下:



使用实例



  
    
    Hello React!
    
    
    
  
  
    

react.min.js - React 的核心库 react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React
代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime
包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

使用 create-react-app 快速构建 React 开发环境 第一步、安装全局包

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

//项目目录
|____my-app
|____README.md
|____node_modules/
| |____package.json
|____.gitignore
|____public
| |____favicon.ico
| |____index.html
|____src
| |____App.css
| |____App.js
| |____App.test.js
| |____index.css
| |____index.js
| |____logo.svg

在浏览器中打开 http://localhost:3000/ ,即可显示

上一篇:react开发教程(-)初识
下一篇:react开发教程(三)组件的构建

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82544.html

相关文章

  • webpack4详细教程,从无到有搭建react脚手架(

    摘要:相关链接详细教程,从无到有搭建脚手架一配置插件,这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新,按照官网配置会出错,所以参考上这个插件文档来配置,文档地址生成打 相关链接 webpack4详细教程,从无到有搭建react脚手架(一) 配置插件 clean-webpack-plugin、 html-webpack-plugin...

    cuieney 评论0 收藏0
  • webpack4详细教程,从无到有搭建react脚手架(四)

    摘要:相关链接详细教程,从无到有搭建脚手架一详细教程,从无到有搭建脚手架二详细教程,从无到有搭建脚手架三管理打包后目录结构打包结构如下修改配置通过相对目录对资源命名前加上目录名,效果后面的步骤在这里需要安装一个大型的包,以为例安装为第三 相关链接 webpack4详细教程,从无到有搭建react脚手架(一) webpack4详细教程,从无到有搭建react脚手架(二) webpack4详细...

    chnmagnus 评论0 收藏0
  • windows系统安装配置react-native运行环境

    摘要:把目录添加到环境变量中打开控制面板系统和安全系统高级系统设置高级环境变量,选中变量,然后点击编辑。 最近公司要开发react-native项目,自己在windows系统上练习了一下,过程中发现好多问题,在这里整理出来供大家参考; 一、首先来看一下reactNative官网 官网上的教程很详细,介绍了IOS和Android的环境搭建、示例教程等等,建议大家先按照官网的环境搭建教程尝试搭...

    SunZhaopeng 评论0 收藏0
  • windows系统安装配置react-native运行环境

    摘要:把目录添加到环境变量中打开控制面板系统和安全系统高级系统设置高级环境变量,选中变量,然后点击编辑。 最近公司要开发react-native项目,自己在windows系统上练习了一下,过程中发现好多问题,在这里整理出来供大家参考; 一、首先来看一下reactNative官网 官网上的教程很详细,介绍了IOS和Android的环境搭建、示例教程等等,建议大家先按照官网的环境搭建教程尝试搭...

    sixgo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<