React 入门程序

作者: MryU93 | 来源:发表于2016-12-06 16:12 被阅读31次

React 入门程序
react+webpack项目实际开发应用
react+webpack项目实际开发应用
react+webpack项目实际开发应用
React Native：从入门到原理
React Native学习资料
React Native
React 实践（一）
awesome-react-native
慕课视频

入门程序 Hello React

第一步、初始化项目

新建目录，进入到该目录下，执行以下命令,生成 package.json 文件

npm init

第二步、安装需要的包

//全局安装
npm install -g webpack
npm install babel -g

//安装到你的项目目录
npm install --save-dev webpack
npm install webpack-dev-server --save-dev

第三步、创建文件

第四步、添加依赖包及插件

$ npm install react --save
$ npm install react-dom --save
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

第五步：相关配置

package.json

webpack.config.js

//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
entry:  __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
 },

module: {
loaders: [
  {
    test: /\.json$/,
    loader: "json"
  },
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel',//在webpack的module部分的loaders里进行配置即可
    query: {
      presets: ['es2015','react']
    }
  }
]
},

devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port: 7777
} 
}

main.js

import React from 'react';
import {render} from 'react-dom';
import FirstPage from './FirstPage';

//import './main.css';//使用require导入css文件

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

firstPage

 import React, {Component} from 'react'
 import config from './config.json';

class FirstPage extends Component{
render() {
return (
  <div>
    {config.greetText}
  </div>
);
}
}

export default FirstPage

config.json

{
 "greetText": "Hi there and greetings from React!"
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>