1. 程式人生 > >Ubuntu14.04下從零開始實戰react

Ubuntu14.04下從零開始實戰react

原本希望入手react,無奈自己跑的虛擬機器還是12.04的,遇到好多坑,而且之前的一些node和npm也都不是最新版本,一怒之下,乾脆直接新裝了一個Ubuntu14.04,從零開始配置到建成系統。

之所以用Ubuntu14,是因為看太多部落格使用react搭建專案都是基於14,所以選了這個版本。

  • 系統環境:Ubuntu14.04

1. 安裝最新版本的 Node.js

1.0更新源

每次安裝軟體前先更新一下就對了,將系統更新到最新的補丁和升級包.

apt-get update
apt-get upgrade  #沒想到這一步這麼慢,推薦一邊看電影一邊安裝吧

1.1. 通過apt-get下載編譯好的軟體包

由於預設ubuntu下載的nodejs版本過低,根據官方給的安裝解決方法:(地址

在終端執行以下兩個命令升到最新版:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

同時還需要下載一個依賴工具:

sudo apt-get install -y build-essential

下載完成後,可以檢視nodejs與npm版本:

這裡寫圖片描述

成功執行後,nodejs npm就被安裝好了。

2. 建立React新應用

新建一個專案資料夾。

mkdir React & cd
React

Create React App 是開始構建新的 React 單頁面應用的最佳途徑。

sudo npm install -g create-react-app
create-react-app my-app

然後我遇到了sha證書認證失敗的Error,解決方法是先執行下面語句然後再安裝

npm cache verify 
create-react-app my-app

安裝結束


cd my-app
npm start

可以看到React的歡迎介面。

接下來可以根據React中文官網推薦的程式小試牛刀,試試空的井字棋棋盤
這裡寫圖片描述

相關推薦

Ubuntu14.04開始實戰react

原本希望入手react,無奈自己跑的虛擬機器還是12.04的,遇到好多坑,而且之前的一些node和npm也都不是最新版本,一怒之下,乾脆直接新裝了一個Ubuntu14.04,從零開始配置到建成系統。 之所以用Ubuntu14,是因為看太多部落格使用react搭

IDEA開始搭建SpringBoot工程

row ace ffi repr exception user 技術 amp 不用 1)它是Spring的升級版,Spring容器能做到的事情,它都能做到,而且更簡便,從配置形式上來說,SpringBoot完全拋棄了繁瑣的XML文件配置方式,而是替代性地用註解方式來實現,雖

開始搭建react腳手架

從零開始搭建react腳手架安裝create-react-app: npm -g install create-react-app 創建一個新項目: create-react-app myapp 進入項目: cd myapp 安裝必備插件: npm install dollarphp less

實戰:React無人點餐收銀系統教程(2)React目錄結構分析

主要內容 1.React目錄結構分析 2.建立元件 3.JSX語法 4.繫結資料 繫結物件 5.React繫結屬性( 繫結class  繫結style 圖片) 刪除沒有用的檔案並新增assets目錄 如下圖:今天主要講解Home.js index.

實戰:React無人點餐收銀系統教程(1)專案初始化

react官網:react官網 React的介紹: React來自於Facebook公司的開源專案 React 可以開發單頁面應用       spa(單頁面應用) react 元件化模組化  開發模式 React通過對DOM的模擬(虛

大資料之hadoop 環境搭建開始——實戰訓練

        這裡的前提是要先安裝一個乾淨的CentOS系統,我這裡用的是CentOS6.6,安裝教程參考另一篇部落格:https://blog.csdn.net/gaofengyan/article/details/85054337 目錄 ha

開始React Native App開發

   學習更詳細資訊參考連結 通往全棧工程師的捷徑 —— React http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&

[Wondgirl]開始React Native之ES5 ES6語法對比(七)

模組 引用 在ES5裡,如果使用CommonJS標準,引入React包基本通過require進行,程式碼類似這樣: //ES5 var React = require("react-native"); var { Image, Te

[Wondgirl]開始React Native之Text(五)

像不像iOS的富文字 <Text style={{color:'#00F'}}> 我的文字 </Text>

開始 – 使用React+Webpack+Nodejs+Express快速構建專案

前言 目前 React 、 Webpack 等技術如火如荼,你是不是還在愁苦如何把這些雜亂的知識統統學習一下,開啟一段新的前端開發之路呢?本文將以一個例子來講解如何使用React 、 Webpack 、 Nodejs 、 Express 這些技術快速構建專案,為後期的深

[Wondgirl]開始React Native之View(四)

index.ios.js如下: /** * Sample React Native App * https://github.com/facebook/react-native * @flo

開始的Ubuntu 16.04PX4編譯環境的搭建

      近來入手了一塊pixhawk,想進行一些基於已有程式碼的二次加工,於是到官網https://dev.px4.io/上看教程。官網上的教程是分為中文、英文以及韓文的版本。很多人肯定第一反應就是看中文的版本。但是這樣做弊端真的很大,原因如下:  1.官網上的中文漢化較

開始react實戰:雲書籤-1 react環境搭建

總覽篇:react 實戰之雲書籤 本篇是實戰系列的第一篇,主要是搭建 react 開發環境,在create-react-app的基礎上加上如下功能: antd 元件庫按需引入 ,支援主題定製 支援 less 語法,並使用 css-module 配置路由 支援 http 請求 配置 redux 注意:需要

React實戰教程之開始手把手教你使用 React 最新特性Hooks API 打造一款計算機知識測驗App

## 專案演示地址 [專案演示地址](https://kamiba.gitee.io/react-hooks-exam-app/) ## 專案程式碼結構 ![](https://media.songbo.info/20200623130952.png) ## 前言 React 框架的優雅不言而喻,元件化的

開始學習html(五)與瀏覽者交互,表單標簽——

定位 開始 系統 isp ctr 程序 顯示 text 輸入 六、使用下拉列表框進行多選 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-T

開始學習html(十)CSS格式化排版——

而是 復習 nbsp 1.5 如果 spl 排版 居住 blog 六、文字排版--刪除線 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-T

開始學習html(十二)CSS布局模型——

位操作 女生 margin 沒有 定位元素 top 並且 變化 開始 五、什麽是層模型? 什麽是層布局模型?層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣, 每個圖層能夠精確定位操作,但在網頁設計領域,由於網頁大小的活動性,層布局沒能受到熱捧。 但是

開始學習html(十五)css樣式設置小技巧——

right ron pos 瀏覽器 spl pan esc 插入 ccf 六、垂直居中-父元素高度確定的單行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="

SD開始03-04

來源 con cin 商品 ati bom record 記錄 party [原創]SD從零開始3 SD中的主數據 客戶主數據Customer master(分層維護) 一般數據general data; 與銷售和財務都有關,對所有的組織單元有效

[閑的蛋疼系列]開始用TypeScript寫React的UI組件(0)-先寫一個Button??

component extension lap exp closed struct app target 參數 0.鹹魚要說的 一入前端深似海,鹹魚入海更加鹹。 最近閑的蛋疼,手上年前的事也完成了7788了,借助[PG1]的話來說,我們要keep real. 鹹魚肯定不