mac osx下 react 开发环境搭建

mac osxreact 开发环境搭建

你必须先安装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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello reacttitle>
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 !!
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之路吧

你可能感兴趣的:(前端开发,编程日记,nodejs,react)