React教程(一) React介绍与搭建
React的介绍:
React来自于Facebook公司的开源项目
React 可以开发单页面应用 spa(单页面应用)
react 组件化模块化 开发模式
React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互 (数据绑定)
react灵活 React可以与已知的库或框架很好地配合。
react 基于jsx的语法,JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面, html js混写模式
搭建React开发环境之前的准备工作
1、必须安装nodejs 注意:安装nodejs稳定版本
2、安装cnpm用cnpm替代npm
地址:http://npm.taobao.org/
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、用yarn替代npm
yarn的安装:
第一种方法:参考官方文档https://yarn.bootcss.com/
第二种方法:cnpm install -g yarn 或者 npm install -g yarn
搭建React开发环境的第一种方法(现在推荐):
https://reactjs.org/docs/create-a-new-react-app.html
1、必须要安装nodejs 注意:安装nodejs稳定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0
2.安装脚手架工具 (单文件组件项目生成工具) 只需要安装一次
npm install -g create-react-app / cnpm install -g create-react-app
3.创建项目 (可能创建多次)
找到项目要创建的目录:
create-react-app reactdemo
4.cd 到项目里面
cd reactdemo
npm start yarn start运行项目
npm run build yarn build 生成项目
搭建React的开发环境的第二种方法(未来推荐):
https://reactjs.org/docs/create-a-new-react-app.html
1、必须要安装nodejs 注意:安装nodejs稳定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0
2.安装脚手架工具并创建项目
找到项目要创建的目录执行:
npx create-react-app reactdemo
4.cd 到项目里面
cd reactdemo
npm start 运行项目(调试)
npm run build 生成项目(发布)
npx介绍:
npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
详情:
http://www.phonegap100.com/thread-4910-1-1.html
npx create-react-app reactdemo这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件。
再比如 npx http-server 可以一句话帮你开启一个静态服务器
React教程(一) React介绍与搭建的更多相关文章
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native从零到一搭建开发环境
React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...
- React教程:4 个 useState Hook 示例
摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...
- react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
随机推荐
- 26.app后端怎么架设推送服务
推送服务已经是app的标配了.架设推送服务,除了可以使用第三方服务商外,也有大量的开源技术可以选择. 现在推送主要分两块,android推送和ios推送,在下面分别论述: 1. Android推 ...
- ImageMagick简介、GraphicsMagick、命令行使用示例
http://elf8848.iteye.com/blog/382528 ImageMagick资料 ------------------------------------------------- ...
- Log4j2中的同步日志与异步日志
1.背景 Log4j 2中记录日志的方式有同步日志和异步日志两种方式,其中异步日志又可分为使用AsyncAppender和使用AsyncLogger两种方式. 2.Log4j2中的同步日志 所谓同步日 ...
- go语言nsq源码解读五 nsqlookupd源码registration_db.go
本篇将讲解registration_db.go文件. 1234567891011121314151617181920212223242526272829303132333435363738394041 ...
- BZOJ_1408_[Noi2002]Robot_数学
Description Input Output Sample Input 3 2 1 3 2 5 1 Sample Output 8 6 75 HINT 90号机器人有10个老师,加上它自己共11个 ...
- nginx+php安装
1.环境概述 虚拟机系统:CentOS Linux release 7.3.1611 (Core) 宿主机系统:Mac Sierra version 10.12.3 nginx:1.10.3 php: ...
- Ubuntu18.04 Desktop Entry
1.Desktop Entry 是什么? 我们都知道,在Windows里软件在安装的时候都会询问是不是要在开始菜单和桌面创建快捷方式,这样就不用在使用软件的时候去安装目录启动,而是直接去开始菜单点击相 ...
- MIP技术交流分享(3月9日)
3月9日上周四下午,MIP 团队工程师与去哪儿酒店云.众荟的 Web 前端工程师进行了一次面对面的技术交流. 在这次交流中,MIP 工程师主要分享了 MIP 技术原理,MIP 加速原理,以及 MIP ...
- 搭建SpringCloud-Eureka 注册中心以及服务提供与调用
纸上得来终觉浅,绝知此事要躬行啊~果然看着很easy,自己搞起来就是各种坑~各位看官,容我慢慢道来~ 关于springcloud是什么我就不废话了~ Eureka Eureka(原来以为是缩写,原来 ...
- Nginx 配置 Https 免费证书访问
配置HTTPS 现在做博客或者做网站没有 https 已经不行了,就记录一下我在腾讯云配置 https 的过程吧,非常简单,1个小时就可以了. 还涉及到 http 访问自动转发到 https 访问路径 ...