React入门0x001: 环境配置和 helloworld

yibinnn 发布于2019-08-26 12:17 / 1065人阅读

摘要：概述开坑系列文章，不知道会写到什么程度，毕竟写文章并不在行，存在当做笔记做，先不讲理论，实践先行。

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/

成功！！！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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