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介绍与搭建的更多相关文章

  1. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  2. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  3. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  4. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  5. React Native从零到一搭建开发环境

    React Native从零到一搭建开发环境 ReactNative环境搭建 安装Homebrew 安装rvm 安装nvm 安装node 安装react-native-cli 安装watchman i ...

  6. React教程:4 个 useState Hook 示例

    摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...

  7. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  8. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  10. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

随机推荐

  1. git fatal: 远程 origin 已经存在。

    不小心将git远程地址配错了,再次配置提示以下错误: fatal: 远程 origin 已经存在. 此时只需要将远程配置删除,重新添加即可: git remote rm origin git remo ...

  2. Java开源生鲜电商平台-异常模块的设计与架构(源码可下载)

    Java开源生鲜电商平台-异常模块的设计与架构(源码可下载) 说明:任何一个软件系统都会出现各式各样的异常与错误,我们需要根据异常的情况进行捕获与分析,改善自己的代码,让其更加的稳定的,快速的运行,那 ...

  3. Windows 使用 Visual Studio 编译 caffe

    说明:最近看 caffe 发现在 github 上下载的源码没有windows版本的,需要自己生成项目文件才能用 Visual Studio 编译,这里记录一下生成Windows项目文件的方法以及编译 ...

  4. ajax封装函数和表单序列化

    //表单序列化function iSerialize(form){ var parts={}; for(var i=0;i<form.elements.length;i++){ var file ...

  5. 当需要向数据库插入空值时,sql语句的判断

    方法如下: 1.int代表整形. 2.string 代表 字符型. 3.datetime ,日期类型判断如下 if(account.date!=Datetime.MinValue) { Str1.Ap ...

  6. 面试题:求第K大元素(topK)?

    一.引言二.普通算法算法A:算法B:三.较好算法算法C:算法D:四.总结 一.引言 ​ 这就是类似求Top(K)问题,什么意思呢?怎么在无序数组中找到第几(K)大元素?我们这里不考虑海量数据,能装入内 ...

  7. MySQL 复制 - 性能与扩展性的基石 2:部署及其配置

    正所谓理论造航母,现实小帆船.单有理论,不动手实践,学到的知识犹如空中楼阁.接下来,我们一起来看下如何一步步进行 MySQL Replication 的配置. 为 MySQL 服务器配置复制非常简单. ...

  8. Qt之加减乘除四则运算-支持负数

    一.效果展示 如图1所示,是简单的四则运算测试效果,第一列为原始表达式,第二列为转换后的后缀表达式,冒号后为结果.表达式支持负数和空格,图中是使用了5组测试数据,测试结果可能不全,如大家发现算法有问题 ...

  9. Python爬虫入门教程 58-100 python爬虫高级技术之验证码篇4-极验证识别技术之一

    目录 验证码类型 官网最新效果 找个用极验证的网站 拼接验证码图片 编写自动化代码 核心run方法 模拟拖动方法 图片处理方法 初步运行结果 拼接图 图片存储到本地 @ 验证码类型 今天要搞定的验证码 ...

  10. 【推荐】.NETCore 简单且高级的库 csredis v3.0.0

    前言 .NETCore 从1.0发布历经坎坷,一开始各种库缺失到现在的部分完善,走到今天实属不易. 比如 redis-cli SDK 简直是坑出不穷. 过去 .net 最有名望的 ServiceSta ...