安裝
在最初的階段，可使用在線編輯的網站來學習React基本的語法。
從 Hello World 開始，能夠在Codepen，或者codesandbox上進行編寫。
固然，也可使用npm或者yarn來安裝依賴，本地進行開發。
這裏先講解經過create-react-app來建立一個React項目，後面會詳細講解如何用webpack建立一個react項目。javascript
create-react-app
詳細文檔能夠去github查看https://github.com/facebook/create-react-app。css
Node和Npm
首先安裝Node.js，這個直接在Node官網下載安裝包便可。建議下載長期支持版，bug會較少。
安裝完畢後，在終端或者cmd裏輸入html
npm -v
若是要使用npx，確保npm的版本大於5.2。若是npm版本較低，使用前端
npm i -g npm
更新npm到最新版，就可使用npx了。有關npx的詳細信息，能夠查看這篇文章。
若是使用yarn，也能夠自行去yarn官網下載安裝。java
create-react-app
官方介紹了3種建立一個react-app的方法。
1.npxnode
npx create-react-app my-app
2.npm init xxx your-appreact
npm init react-app my-app
npm init至關於一次npx的命令封裝，具體解釋能夠看一下這篇npm文檔-init|npm。 須要注意的是，這個方法須要更高版本的npm，6+。 3.yarnwebpack
yarn create react-app my-app
我我的比較建議使用yarn來管理npm依賴，速度更快，上手也很簡單。此處yarn的版本要求0.25+。git
cd my-app
等到依賴安裝完畢，進入到新建立的my-app目錄裏。github
├── 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://www.javashuo.com/tag/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的基本概念和語法。 謝謝閱讀。