mac osx下 react 开发环境搭建

最新推荐文章于 2023-05-08 22:27:14 发布

holoto

最新推荐文章于 2023-05-08 22:27:14 发布

阅读量5.9k

点赞数

分类专栏：编程日记前端开发 react nodejs 文章标签： mac osx react 环境搭建开发

本文链接：https://blog.csdn.net/baidu_16051437/article/details/51194551

版权

编程日记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

前端开发

17 篇文章 0 订阅

订阅专栏

react

12 篇文章 1 订阅

订阅专栏

`mac osx`下 `react` 开发环境搭建

你必须先安装nodejs

nodejs安装

安装开发辅助工具包

sudo cnpm install babel -g
sudo cnpm install babel-cli -g
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g
sudo cnpm install gulp -g
sudo cnpm install react -g

创建项目文件夹

mkdir myreact
cd myreact

初始化开发环境

npm init

一直回车即可生成 package.json 文件

安装需要使用的工具包

--save 命令用于将包添加至 package.json 文件

sudo cnpm install --save react
sudo cnpm install --save react-dom
sudo cnpm install --save babel
sudo cnpm install --save babel-core
sudo cnpm install --save babel-loader
sudo cnpm install --save babel-preset-react
sudo cnpm install --save babel-preset-es2015
sudo cnpm install --save babel-preset-stage0

建立项目文件

index.html 
component.jsx
main.js
webpack.config.js  //webpack配置文件

编辑package.json

#在    "scripts":{}
#{}内 添加一行
"dev": "webpack-dev-server --hot",

配置webpack

编辑webpack.config.js

 var config = {
     entry: './main.js',

     output: {
         path: './',
         filename: 'app.js',
     },

     devServer: {
         inline: true,
         port: 8080
     },

     module: {
         loaders: [{
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel',

             query: {
                 presets: ['es2015', 'stage-0', 'react']
             }
         }]
     }

 };
 module.exports = config;

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="app.js"></script>
</body>

</html>

component.jsx

'use strict';
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            hello holoto !!<br/>
         </div>
      );
   }
}

export default App;

main.js


'use strict';
import React from 'react';
import ReactDOM from 'react-dom';

import App from './component.jsx';

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

react hello world

命令行下运行`dev`命令

npm run dev

在浏览器中查看

地址栏输入http://127.0.0.1:8080/
看到

hello holoto !!

就这样 react的hello world 完成了

开始你的react之路吧

holoto

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
mac osx下 react 开发环境搭建

mac osx下 react 开发环境搭建你必须先安装nodejsnodejs安装安装开发辅助工具包sudo cnpm install babel -gsudo cnpm install babel-cli -gsudo cnpm install webpack -gsudo cnpm install webpack-dev-server -gsudo cnpm install gulp -
复制链接

扫一扫