React入門0x001: 環境配置和 helloworld

yibinnn 發布于2019-08-26 12:17 / 1070人閱讀

摘要：概述開坑系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當做筆記做，先不講理論，實踐先行。

0x000 概述

開坑 react 系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當做筆記做，先不講理論，實踐先行。

0x001 創建項目

$ mkdir 0x001-helloworld
$ cd 0x001-helloworld
$ yarn init -y

0x0002 添加依賴

$ yarn add @babel/core @babel/preset-react babel-loader html-webpack-plugin webpack webpack-cli --dev

@babel/core: babel 核心包

@babel/preset-react: react 的 preset，支持 jsx 等，具體看這里

babel-loader: babel 的 webpack loader

webpack webpack-cli html-webpack-plugin: webpack相關包和插件，其中 html-webpack-plugin 用來處理 html 模版

$ yarn add react react-dom

react react-dom:react相關核心包

此時的package.json

    {
      "name": "0x001-helloworld",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "start": "webpack-dev-server --color --process --hot"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.0"
      },
      "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
      }
    }

0x003 配置 babel，添加.babelrc文件

{
  "presets": [
    "@babel/preset-react"
  ]
}

0x004 編寫webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "src/index.js"),
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    devServer: {
        open: true
    },
    module: {
        rules: [{
            test: /.js$/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html")
        })
    ]
}

0x005 編寫源代碼

創建目錄

$ mkdir src

編寫html

// index.html



    React Study

編寫js

//index.js
import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
    Hello, world!,
    document.getElementById("app")
);

0x006 此時完整目錄結構

+ react-study
    + 0x001-helloworld
        + src
            - index.html
            - index.js
        - .babelrc
        - package.json
        - webpack.config.js
        - yarn.lock

0x007 運行項目

npm start

查看瀏覽器：http://localhost:8080/

成功！！！

GPU云服務器云服務器 iis7和iis8如何配置asp運行環境 HelloWorld linux入門環境環境配置

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

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

React入門0x002: jsx

摘要：概述也是，如是說。屬性集合，比如等屬性對應，是關鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。 0x000 概述 jsx也是js，如是說。 0x001 語法在上文React入門0x001-環境配置和 helloworld中，出現了一句奇怪的代碼： Hello, world! 這在html中沒有任何問題，但問題是他出現在...

hedzr 2019-08-26 12:17 評論0 收藏0
React入門0x003：jsx 和自由的組件

摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。 0x000 概述說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，...

eechen 2019-08-23 11:25 評論0 收藏0
React入門0x014: Fragment

摘要：只有一個屬性，那就是栗子可展開收縮的表格源碼展開收起張三我很開心李四我也很開心王五我比張三和李四更開心效果 0x001 引出問題讓我們先來看一個栗子： class App extends React.Component { render() { return ( ) } } Reac...

forrest23 2019-08-23 13:46 評論0 收藏0
java筆記0x001：helloworld

摘要：第一個程序編寫代碼編譯并運行生成運行輸出注釋這是單行注釋這是多行注釋注意如果代碼中出現中文，編譯時應該按照添加編碼選項基本類型基本類型一表看基本類型大小最小值最大值包裝器類型基本類型的聲明初始 0x001 第一個java程序編寫代碼 // 0x001helloworld/Helloworld.java public class Helloworld{ public sta...

draveness 2019-08-15 15:47 評論0 收藏0
webpack入門及結合react進行開發

摘要：最后還可以跟我們的進行結合管理代碼什么是說明白點就是模塊打包機，可以很好的管理我們的模塊，可以對瀏覽器進行更好的兼容。安裝首選我們要安裝，中已經給我們下載了我們通過進行安裝管理。 webpack入門及結合react進行開發重要提示（2017年7月26號更新）本文介紹的是最新版的3.4.1，并且其中又跟React結合的例子！showImg(https://segmentfault.c...

OldPanda 2019-08-20 18:19 評論0 收藏0