2. 程式人生 > >React學習之旅----安裝腳手架

React學習之旅----安裝腳手架

阿新 • • 發佈：2018-11-11

npm i yarn -g全域性安裝yarn

npm install -g create-react-app全域性安裝腳手架

create-react-app react01建立第一個專案，最好已經全域性安裝了yarn

安裝了node高版本後可以直接npx create-react-app react02是新的react建立專案方法，將來使用，目前還是舊方法好

之後cd react02（專案資料夾後）

yarn install安裝依賴包

yarn start啟動專案

哈哈，開始我們的React之旅吧

相關推薦

React學習之旅----安裝腳手架

npm i yarn -g全域性安裝yarn npm install -g create-react-app全域性安裝腳手架 create-react-app react01建立第一個專案，最好已經全域性安裝了yarn 安裝了node高版本後可以直接npx create-react-ap

React學習之旅----Redux安裝及富文字、echarts

瀏覽器中安裝redux devtools擴充套件 yarn add redux  react-redux redux-devtools-extension 安裝依賴包即可 // 引入createStore建立store，引入applyMiddleware 來使用中介軟體 //

React學習之旅----專案小例項----無人點餐二---詳情頁渲染

App.js /* react路由的配置： 1、找到官方文件 https://reacttraining.com/react-router/web/example/basic 2、安裝 cnpm install react-router-dom --save 3、找

React學習之旅----mock模擬假資料及封裝axios，動態渲染表格

import React from 'react'; import { Card, Table, Modal, Button, message } from 'antd'; import axios from './../../axios/index' import Utils from './..

React學習之旅----配置多頁面路由及巢狀路由demo

const menuList = [ { title: '首頁', // key: '/home' key: '/admin/home' }, { title: 'UI', key: '/ui', children: [ {

React學習之旅----按需載入Antd UI元件及自定義主題

package.json "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "a

React學習之旅----配置less-loader

yarn less-loader先安裝依賴 yarn eject結構目錄 開啟config目錄下的webpack.config.dev.js，修改webpack配置 找到css部分，拷貝一份，複製貼上，改為less即可 新增 const lessRegex = /\.less$/

React學習之旅----yarn eject報錯“This git repository has untracked files or uncommitted changes:”解決辦法

當我們yarn eject解開專案結構時，報錯This git repository has untracked files or uncommitted changes: 這是提示我們沒有進行git提交 我們開啟我們的github，新建專案，拉下程式碼後，將我們之前開發的檔案放進來，重新安

React學習之旅----表單錄入

import React, { Component } from 'react'; /* 約束性和非約束性元件: 非約束性組:<input type="text" defaultValue="a" /> 這個 defaultValue 其實就是原生DOM中的 value

React學習之旅----Todolist

import React from 'react'; class TodoList2 extends React.Component { constructor(props) { super(props) this.state = { list: [

React學習之旅----引入圖片

import React from 'react'; // 引入本地圖片，需以元件的形式引入，而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; class News extends React.Component { construc

React學習之旅----新建元件

react的元件有兩種寫法： import React from 'react'; class News extends React.Component { constructor(props) { super(props) // 用於父子元件傳值 } render () {

React學習之旅----獲取表單輸入的值，雙向繫結

react中實現雙向繫結input輸入框值 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(props) this.sta

React學習之旅----獲取自定義屬性

獲取自定屬性，在小程式中可能更常用，在React中同樣也是可以獲取的，看例項 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(pr

React學習之旅----事件方法及改變this指向

import React, { Component } from 'react'; import '../assets/css/index.css' // react繫結屬性注意點 // class要換成className // for 要換成htmlFor // style class Home

React學習之旅----迴圈資料

import React from 'react'; // 引入本地圖片，需以元件的形式引入，而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; // 元件名稱，類首字母必須大寫 class News extends React.Compo

React學習之旅----實現類似vue的資料雙向繫結

react沒有資料的雙向繫結，但可以用過一些方法實現： import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta

React學習之旅----父子元件傳值

父元件 import React from 'react' import Header from './Header' import Footer from './Footer' class Father extends React.Component { constr

React學習之旅----axios與fetch-jsonp

父元件 import React from 'react' import Header from './Header' import Footer from './Footer' import Axios from './Axios' import FetchJsonp f

React學習之旅----生命週期函式

app.js import React, { Component } from 'react'; // import logo from './assets/images/logo.svg'; // import './assets/css/App.css'; // 引入