<二>Hello React开发
2017-04-29 本文已影响0人
者薄
方式一(快速入手)
1.创建文件夹hello_react
创建项目文件夹后将我们之前下载的react build的文件夹考入到hello_react目录中
2.项目导入
打开atom,点击file--->open--->选择创建的项目文件夹,再将browser.min.js复制到项目的build文件夹中:
图片.png
3.编写Hello React
创建hello.html编写react代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入react.js是react的核心库 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- 导入react-dom.js -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- 导入browser.min.js 将JSX语法装换为js语法-->
<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
<!-- react渲染的模板会插入到这个节点中 -->
<div id="examp">
</div>
</body>
<!-- 在使用jsx的时候要使用babel,babel是一个编译转换器,将es6转换为浏览器可运行的东西 -->
<script type="text/babel">
/*
ReactDOM.render()
react最基本的方法,将模板转换成html语言,渲染dom并插入到指定的dom中
三个参数:
参数一:模板的渲染内容html形式
参数二:这段模板需要插入的dom节点
参数三:渲染后的回调,一般不用
*/
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('examp')
);
</script>
</html>
4.运行
由于之前安装了插件,所以这里右键点击open in browser就会看到我们的入门程序
图片.png
方式二(npm方式)
创建一个空的文件夹hello
图片.png
进入的创建的文件夹目录
shizhengyangdeMacBook-Pro:~ panyuanyuan$ cd java/react-native/react_more/hello/
shizhengyangdeMacBook-Pro:hello panyuanyuan$
初始化项目:输入npm init,只需要在相应的标红的地方输入
图片.png
初始化完成之后项目结构---多了package.json这个是我们依赖挂历的配置
图片.png
打开react官网,点击docs http://reactjs.cn/react/docs/getting-started-zh-CN.html ,我们还需要安装react和react-dom
图片.png
进入项目路径,输入:这里需要加sudo,可能会出现权限问题
sudo npm install --save react react-dom babelify babel-preset-react
安装完成
图片.png
官方还提示了:
图片.png
安装es6转换成es5,输入:
shizhengyangdeMacBook-Pro:hello panyuanyuan$ sudo npm install babel-preset-es2015 --save
安装完成
图片.png
注意:--save是将安装的包配置到之前的package.json中
此时我们的package.json文件
图片.png
安装webpack
在项目目录中重新创建目录和index.js文件
图片.png
index.js文件内容:
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("example")
);
在项目根目录下创建webpack.config.js(名字不能变),其内容:
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname + '/src',
entry: './js/index.js',
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
},
output: {
path: __dirname + "/src/",
filename: "bundle.js"
}
};
安装webpack相关的包:
1.全局安装webpack:
sudo npm install -g webpack
2.全局安装webpack-dev-server
sudo npm install -g webpack-dev-server
3.项目安装webpack,进入项目安装
sudo npm install webpack --save
4.项目安装webpack-dev-server
sudo npm install webpack-dev-server --save
5.安装babel-loader(一定要写sudo)
sudo npm install babel-loader --save
都安装完成后输入webpack打包
shizhengyangdeMacBook-Pro:hello panyuanyuan$ webpack
看到如下界面证明成功:
图片.png
由上面知道,产生一个bundle.js的文件,接下来编写index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example">
</div>
<script src="./src/bundle.js" charset="utf-8"></script>
</body>
</html>
项目目录结构:
图片.png
运行测试:打开index.html
图片.png
