我的React開發之路1:React的環境搭建

aisuhua 發布于2019-08-19 18:21 / 3376人閱讀

摘要：是大臉書出的一個前端開發框架。與其說是一個框架，我更加認為更是一種模式，從年月份開始接觸，我就認為這個框架以后一定會火。是一個單向數據流的框架，不同于和的雙向數據綁定的單向數據流可以數據模式更加單一，更利于前端的維護。

React是大臉書出的一個前端開發框架。與其說是一個框架，我更加認為React更是一種模式，從2015年10月份開始接觸React，我就認為這個框架以后一定會火。React是一個單向數據流的框架，不同于Vue和Angular的雙向數據綁定 React的單向數據流可以數據模式更加單一，更利于前端的維護。好了，廢話不多說如果想具體學習React，可以參考我以后的教程或者參考網上大量的資料還有萬能的github
React環境的搭建
首先得明白React的開發是基于JSX去開發的，所以我們第一步做的就是編譯JSX 因為普通的瀏覽器并不懂的JSX 當然你也可以這樣:

個人十份不建議用以上的方式因為非常不利于代碼的維護和開發而且也有各種的兼容性問題當然你想測試jsx就可以是用編譯JSX的方式非常多：webpack browserify+gulp+babelify 或者使用TypeScript用微軟的編譯器去編譯
首先本人比較習慣第二種方式也是介紹第二種方式
第一步
安裝必要的工具 node.js gulp
安裝node.js 去官網安裝node的最新版下載根據提示安裝即可
安裝gulp 在node安裝完之后你需要用npm的命令去安裝gulp :

npm install gulp -g

安裝好gulp之后，就開始構建項目，可以新建一個目錄名字，命令行指向該目錄，也就是cd到此目錄
輸入以下的命令：

npm init

根據提示做完以下的工作之后，在目錄中就會有一個名字叫做package.json的文件，然后就需要一些安裝一些開發插件了
1、我們需要將gulp安裝到項目目錄里來；

npm install gulp --save//
//或者
npm install --save gulp

2、安裝browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

這一步主要是安裝一些編譯器和一些必要的插件具體怎么用后面會詳細的說
3、安裝react 和react-dom

npm install react react-dom --save

既然是react的開發就必須要有react
4、寫好babel的配置：
創建一個叫做.babelrc的文件在里面輸入以下的代碼

{
  "presets": ["react","es2015"]
}

這個是babel編譯器需要的插件用來編譯es6和react的jsx的語法
5、創建一個叫做gulpfile.js的文件這個是gulp的執行文件以下代碼是一個簡單的構建react項目的gulpfile.js的代碼

//gulp需要的模塊
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 任務 用于創建本地服務器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:"localhost"
    })
});
//編譯任務 
gulp.task("browserify",function(){
     //entris:入口文件的js  
    return browserify({entries: "./domsrc/app/Main.js", extensions: [".jsx"]})
         //用babel轉換
        .transform(babel)
        //需要browserify-shim轉換
        .transform(require("browserify-shim"))
        //bundle合并
        .bundle()
        .pipe(source("bundle.js"))
        //編譯文件目標目錄
        .pipe(gulp.dest("./bin-debug"));
});

6、package.json的配置文件修改:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

將這段代碼加入到package.json里面就可以了現在環境基本已經搭建完成

測試
我們在工程目錄下創建一個名為domsrc的目錄在這個目錄下在創建一個app目錄里面創建一個Main.js的文件，
文件里的代碼參考如下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(Hello World,document.getElementById("content"));
    }
}
new Main();

然后在該目錄下執行以下命令行

gulp browserify

可以看到在bin-debug生成了bundle.js的文件

GPU云服務器云服務器我的編程之路 java開發環境的搭建 php開發環境的搭建 java 開發環境的搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79499.html

最小白的webpack+react環境搭建

摘要：接下來安裝和，執行命令安裝很順利，沒有遇到任何問題。再總結一下我們遇到的坑初始化時的項目名稱要合規，特別是不能出現中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結構為各文件的最終內容本文也同步發表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個最簡單的webpack+react環境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0
手挽手帶你學React：一檔 React環境搭建，語法規則，基礎使用

摘要：當屬性是一個回調函數時，函數接收底層元素或類實例取決于元素的類型作為參數。手挽手帶你學React入門第一期,帶你熟悉React的語法規則,消除對JSX的恐懼感,由于現在開發中都是使用ES6語法開發React，所以這次也使用ES6的模式進行教學，如果大家對ES6不熟悉的話,先去看看class相關內容吧，這里我也慢慢帶大家一步一步學會React。視頻教程視頻教程可移步我的個人博客：h...

BicycleWarrior 2019-08-23 15:11 評論0 收藏0
拒絕Redux文檔“毒害” 一個項目告訴你Redux最新真正哲學

摘要：之前分享過幾篇關于技術棧的原創文章解析前端架構學習復雜場景數據設計干貨總結打造單頁應用一個項目理解最前沿技術棧真諦一個工程實例今天進一步剖析一個實際案例移動網頁版。目前面臨的問題在于提高產品的各方面性能體驗。之前分享過幾篇關于React技術棧的原創文章：解析Twitter前端架構學習復雜場景數據設計 React Conf 2017 干貨總結1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 評論0 收藏0
Webpack系列——手把手教你使用Webpack搭建簡易的React開發環境

摘要：在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發環境，用以鞏固我們之前學習的知識。文章首發于我的github及個人博客，github請看https://github.com/huruji/blo...，轉載請注明出處。在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發環境，用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發環境需要達到的效果：1、...

cucumber 2019-08-22 11:06 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0