react系列（零）安装
安装
在最初的阶段，可以使用在线编辑的网站来学习React基本的语法。
从 Hello World 开始，可以在Codepen，或者codesandbox上进行编写。
当然，也可以使用npm或者yarn来安装依赖，本地进行开发。
这里先讲解通过create-react-app来创建一个React项目，后面会详细讲解如何用webpack创建一个react项目。
create-react-app
详细文档可以去github查看https://github.com/facebook/create-react-app。
Node和Npm
首先安装Node.js，这个直接在Node官网下载安装包即可。建议下载长期支持版，bug会较少。
安装完毕后，在终端或者cmd里输入
npm -v
如果要使用npx，确保npm的版本大于5.2。如果npm版本较低，使用
npm i -g npm
更新npm到最新版，就可以使用npx了。有关npx的详细信息，可以查看这篇文章。
如果使用yarn，也可以自行去yarn官网下载安装。
create-react-app
官方介绍了3种创建一个react-app的方法。
1.npx
npx create-react-app my-app
2.npm init xxx your-app
npm init react-app my-app
npm init相当于一次npx的命令封装，具体解释可以看一下这篇npm文档-init|npm。
需要注意的是，这个方法需要更高版本的npm，6+。
3.yarn
yarn create react-app my-app
我个人比较建议使用yarn来管理npm依赖，速度更快，上手也很简单。此处yarn的版本要求0.25+。
cd my-app
等到依赖安装完毕，进入到新创建的my-app目录里。
├── node_modules
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock
create-react-app只安装了最少能运行一个react-app的依赖，例子也很简单，现在我们运行一下。
yarn start
运行成功后，就可以在http://localhost:3000看到这个例子了。
webpack
现在前端开发常用的构建工具是webpack。接下来介绍用webpack构建一个简单的react-app。
新建目录
首先新建一个目录。
mkdir webpack-react-app
cd webpack-react-app
npm init -y
这时，目录里会有一个package.json。接下来，我们新建一个HTML文件，存放到dist目录，作为一个载体。
mkdir dist
cd dist
touch index.html
它的代码如下
<!DOCTYPE html>
<html>
<head>
<title>webpack react app</title>
</head>
<body>
<div id="app"></div>
<script src="/main.js"></script>
</body>
</html>
这里的id，默认为app，在具体编写时，可以修改。main.js也是webpack自己生成的，可以修改。
安装webpack
接下来安装webpack的一些依赖。
yarn add -D webpack webpack-dev-server webpack-cli
安装完毕以后，在package.json配置一下启动命令。
...
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
...
},
...
--mode 用来配置模式，可以区别是构建还是开发模式，如果是构建发布，就把一些开发时的提示等插件去掉。
--config 指向webpack的配置文件，默认为同目录下的 webpack.config.js。
配置webpack
接下来我们来创建 webpack.config.js。
touch webpack.config.js
它的基本代码如下：
module.exports = {
entry: './src/index.js', //webpack的入口文件
output: { //输出目录配置
path: __dirname + '/dist',
publicPath: '/',
filename: 'main.js'
},
devServer: { //开发时服务器的配置
contentBase: './dist'
}
};
根据习惯， src/index.js 是我们默认的入口。打包结束以后，生成一个 main.js 到dist目录下。配置了DevSever之后，我们可以在浏览器里访问到dist下的文件。
接下来需要编写 src/index.js。
console.log('webpack test');
终端运行
yarn start
打开http://localhost:8080查看控制台输出。
正常输出了webpack test。
接下来要引入react。
安装babel
react用到了jsx语法，需要使用babel来转义一遍，才能被浏览器正常读取。
安装babel和依赖
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react
新建babel配置文件
touch .babelrc
配置如下：
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
具体的 babel-preset-env 配置可以查看babel文档-babel-preset-env配置。
安装完毕以后，新的 webpack.config.js 配置为
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
...
};
接着就可以安装react依赖了。
yarn add -D react react-dom
把 index.js 重写一下。
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'Hello World!';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
运行一下
yarn start
ok，一个简单的react-app就创建成功了。
下一篇，将会讲解react的基本概念和语法。
谢谢阅读。
react系列（零）安装的更多相关文章
- react系列教程
这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...
- 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- 谈谈React Native环境安装中我遇到的坑
谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- Robotframework-Appium系列：安装配置
1. Robotframework-android系列:安装配置 1.1. 安装环境 64位win10家庭中文版 1.1. 安装说明 网上robotframework-appium安装资料也不少, ...
- React 系列教程 1：实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- [转]gitlab cicd (二)系列之安装git-runner rpm安装方式
本文转自:https://blog.csdn.net/qq_21816375/article/details/84308748 本编是继gitlab cicd (一)系列之安装gitlb之后,基于安装 ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...
- 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
随机推荐
- BZOJ4698: Sdoi2008 Sandy的卡片(二分 hash)
题意 题目链接 Sol 用什么后缀数组啊 直接差分之后 二分+hash找最长公共子串就赢了啊... 时间复杂度:\(O(nlogn)\)(不过我写的是两个log..反正也能过) // luogu-ju ...
- Idea15 常用设置(一)：JDK、SVN
1:显示行号 File->Settings->General->Appearance 2: 代码自动补齐即使是小写字母也会弹出代码补齐提示 3:自动编译 设置 4: 设 ...
- 【活动】畅想云端加油站，赢iPad
中石化联手阿里云升级石油化工业务,已运行2月 中石化的“互联网+”战略正在不断深化.4月20日消息,中石化与阿里云共同宣布,双方将展开技术合作,借助阿里巴巴在云计算.大数据方面的技术优势,对部分传统石 ...
- 是否应该开启WebView硬件加速？
android webview 在3.0+后显示flash要启用硬件加速,开启硬件加速也能够使绘制更加平滑. 开启硬件加速是在manifest中加入: android:hardwareAccelera ...
- 如何解决 Linux 虚拟机磁盘设备名不一致的问题
问题描述 在 Linux 虚拟机内,将附加的多块数据磁盘以设备名(/dev/sdxx)的方式创建文件系统,并将之写入 /etc/fstab 文件中实现启动自动挂载功能.但是在虚拟机重启之后,会随机出现 ...
- javascript小练手
1.做一个小图标在界面中通过按钮可以变大 变小 变色 变圆 <!DOCTYPE html> <html lang="en"> <head> &l ...
- C可变参数
https://www.cnblogs.com/pengdonglin137/p/3345911.html#_label0
- Mysql 系统学习梳理_【All】
0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...
- PHP小错误及分析
即使是经验丰富的程序猿,在编程的过程中犯个错误也是在所难免的.如果开发人员不能注意到这些错误,也无法了解编译器报错信息的含义,那么这些错误信息不仅毫无用处,还会常常让人感到沮丧,所以更好地理解错误信息 ...
- Linux 命令行浏览器
真是没有做不到只有想不到! Linux下竟然有命令行式的浏览器:W3m SPC向下翻页 b向上翻页 J 向下滚动一行 K 向上滚动一行 > 右移一屏 < 左移一屏 TAB 转到下个超链接 ...