Hello ReactJS

前言

React学习前先搭好环境,官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。

源码:https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1

1. 环境搭建

涉及以下几个技术。但从hello world的角度说,目前先不用知道是干嘛的,先用来学习react,后面再去研究各个组件的功能。

  1. Webpack - A module bundler
  2. Babel - A Javascript compiler
  3. ES6 - A relatively new Javasript standard
  4. Yarn - A package manager
  5. React - As expected

1.1 安装一些东西

去官网下载NodeJS,安装。 去官网下载yarn,然后安装。

1.2 开始搭建

最终搭建的文件结构如下:

.
|____.babelrc
|____node_modules
|____app
| |____components
| | |____App.jsx
| |____index.html
| |____index.js
|____dist
| |____index.html
| |____index_bundle.js
|____package.json
|____readme.md
|____structure.txt
|____webpack.config.js
|____yarn.lock

1.2.1 初始化

mkdir hello-react-js
cd hello-react-js
yarn init

添加webpack

yarn add webpack webpack-dev-server path

这时,项目根目录下会多出一个yarn.lock,不用理会。

1.2.2 在根目录下创建webpack.config.js

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: './app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};
  • entry: 指向入口js文件
  • output: 指向打包后的文件目录
  • filename: js打包后的文件名
  • path: 打包后的文件目录
  • loaders: 转换工具。这里简单加载es6的转换工具babel-loader,将以.js或者.jsx结尾的文件转换为es5.
  • plugins: 一些插件。这里用到HtmlWebpackPlugin,将打包后的js文件插入到指定的html模板里。好处是我们不用手动将js插入html中,这在修改js文件名的时候很有用,否则我们还要手动修改js引入的名称。

1.2.3 添加babel

刚才提到了babel-loader,除了配置之外还需要加载依赖:

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

然后,在根目录创建.babelrc:

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

1.2.4 添加react

yarn add react react-dom

创建app/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React App</title>
</head>
<body>
<div id="root">

</div>
</body>
</html>

创建app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

创建app/components/App.jsx

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div style={{textAlign: 'center'}}>
                <h1>Hello World! Hi ReactJS</h1>
            </div>);
    }
}

1.2.5 添加html-webpack-plugin

前面配置了html-webpack-plugin,这里还需要加载依赖文件:

yarn add html-webpack-plugin

在前面的配置文件制定了html模板文件,输出文件名,以及js打包文件插入的位置。

1.3 基本搞定,运行一下

打开package.json。在script下添加

...
"scripts": {
    "start": "webpack-dev-server"
 },
 ...

运行

yarn start

这时候页面显示如下。大功告成。

可以在package.json里配置不同的webpack运行环境。这里只是搭建学习react官方文档之前先要准备好的环境。最终,package.json:

{
  "name": "hello-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ryan Miao",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.29.0",
    "less-loader": "^4.0.5",
    "react": "^15.6.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react-dom": "^15.6.1"
  }
}

1.3 小结

开始的时候照葫芦画瓢,先把环境搭建起来。然后开始学习,开始做事。在需要的时候去研究对应的问题。不然,知识何其多也。下面就可以照着react官网的教程,把react组件过一遍。然后再去看redux。

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

前端路由的简单实现

概念 路由这个概念首先出现在后台。传统MVC架构的web开发,由后台设置路由规则,当用户发送请求时,后台根据设定的路由规则将数据渲染到模板中,并将模板返回给用户...

3284
来自专栏更流畅、简洁的软件开发方式

【自然框架】之通用权限(四):角色表组

      继续,这是第四章了。这里涉及到了资源方面的,不过有点绕,所以这里先介绍一下表结构,在后面的章节里面,再举例子详细介绍。 通用权限想要写的文章目录:(...

2058
来自专栏大前端开发

【新闻】微信小程序开发工具升级到版本 0.10.102700

今晚引来了微信小程序开发工具《微信web开发者工具》的一次更新,此次更新新增了很多API,修复了一些bugs,也标记了一些即将废弃的API。这次更新也升级了开发...

815
来自专栏张善友的专栏

Windows版本nginx

在cnbeta上看到Nginx 0.7正式变成Stable版,下载下来看了一下,Nginx非常小,配置也非常简单,首先下载nginx 0.7.59的window...

1845
来自专栏性能与架构

小程序示例 - 不同页面间的消息传递

场景 假设有两个页面:用户列表页、信息编辑页 在列表中点击后某条信息后,进入编辑页面 ? 修改了用户信息后,返回到列表页,列表中需要显示修改后的信息 例如把 “...

3367
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

1673
来自专栏网站那些事

PageGuard.js 防止网站内容复制和检测开发者工具代码

检测开发者工具的话,整合了各种较新的方法,经测试是支持 Chrome (包括单独窗口打开的情况)和 Firefox (在单独窗口打开时,只有打开控制台时才能检测...

47121
来自专栏小程序之家

如何使用小程序导航

在日常开发小程序中,我们总不能吧所有数据都堆在首页。为此,需要一些二级三级页面。今天,我们来介绍介绍小程序比较重要的导航组件,使用导航组件,可以在小程序内外部进...

1215
来自专栏李蔚蓬的专栏

关于Android Studio中Run按钮是灰色的解决

今天导入一个别人的项目,在导入之前是老方法,覆盖  了三个关键文件之后(.gradle文件夹的内容版本若与本地不一,也应删掉),重启AS;

2592
来自专栏守候书阁

webpack+vue项目实战(一,搭建运行环境和相关配置)

现在正在开发一个公司的后台管理项目,项目是一个单页面应用。功能上就是管理销售订单的各个环节,包括物流管理,回款管理,订单管理等等的功能。这些就不多说了。项目是,...

571

扫码关注云+社区