Hello ReactJS
前言
React学习前先搭好环境,官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。
源码:https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1
1. 环境搭建
涉及以下几个技术。但从hello world的角度说,目前先不用知道是干嘛的,先用来学习react,后面再去研究各个组件的功能。
- Webpack - A module bundler
- Babel - A Javascript compiler
- ES6 - A relatively new Javasript standard
- Yarn - A package manager
- 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。
参考
- https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel#toc-webpack-installation-and-configuration
- https://yarnpkg.com/zh-Hans/docs/usage
Hello ReactJS的更多相关文章
- 一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- ReactJS webpack实现JS模块化使用的坑
从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...
- reactjs 接入数据模型以及markdown语法的支持
页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:
- 初探ReactJS.NET 开发
ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...
- ReactJs笔记
中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html
- redux的中间层 --reactjs学习
React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意 ...
- 初识ReactJs(一)
React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...
- D2.Reactjs 操作事件、状态改变、路由
下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...
- D1.1.利用npm(webpack)构建基本reactJS项目
前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...
- ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...
随机推荐
- 用css控制字数,多余的用省略号代替
选择器 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; } white-space 属性 ...
- WPF中实现类智能感知
首先要做的事情就是定义一个popup来显示我们需要展示的东西 <Popup x:Name=" StaysOpen="False" Placement="B ...
- 基于FPGA的IIR滤波器
基于FPGA的IIR滤波器 by方阳 版权声明:本文为博主原创文章,转载请指明转载地址 ...
- 【VC6.0】getline需要输入2次回车才会结束的BUG修复方法
原始日期:2013-09-30 23:22 今天看C++Primer的时候发现一个问题,getline需要输入2次回车才会显示结果,上网找了一下,发现是VC6.0的原因,修复原因如下: (1)建立一个 ...
- svn客户端的使用
1 SVN概述 SVN客户端应用集成在右键菜单中: svn服务器有2种运行方式:独立服务器和借助apache运行.两种方式各有利弊,用户可以自行选择: SVN是Subversion的简称,是一个开放源 ...
- 使用 FLASH DATABASE 恢复误删除的用户
场景描述 误 drop 了生产库中的用户 U1 U1 用户下面有 3 张表(T1-T3),表中数据如下所示: SQL> conn u1/u1 Connected. SQL> select ...
- form表单上传文件使用multipart请求处理
在开发Web应用程序时比较常见的功能之一,就是允许用户利用multipart请求将本地文件上传到服务器,而这正是Grails的坚固基石——spring MVC其中的一个优势.Spring通过对Serv ...
- MVC过滤器之添加LoginAttribute,浏览器bug:重定向次数太多
以前在写登录Action过滤时,都在每个Controller前写上CheckLoginAttribute:这次决定偷懒试一下能否将所有Action和Controller统一过滤: 出bug的代码是这样 ...
- 9天C#转Java学习过程,自己记录一下
其实没有完整的9天,就是连续每天花点时间,过程so frustrated,踩坑无数...下面是学习过程的记录 第1天 开始正式学习JavaEE,已完成: 1. Tomcat安装: 2. Tomcat配 ...
- DOM 和 BOM 的 对象 和方法
DOM 对象 有 documet event element attlibute 方法 getElementById getElementsBytagname getElementsB ...