1.安装react 开发工具

1.下载    chrome      react developer tools

下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是一个crx 格式的文件。

2.安装:打开chrome 浏览器==>更多工具==》扩展程序

将插件拖入 在详细信息中点击启用即可; react developer tools 安装完毕。

2.现在开始新建一个react项目:

1.确保电脑中已经安装好node  npm

如何确定已经安装好node--打开命令工具 输入cmd==》输入node -v 如出现版本号,则说明node已经安装好,详情请看之前关于“安装node及相关配置”的文章

npm同理。

2.

方案一:

方案一会帮你打包你的代码,为你提供一个开发服务器,但是需要自己添加所需依赖。

  1. 安装全局包。 
    在WebStorm的左下角点击Terminal,输入:npm i react-scripts -g。 

  2. 初始化。 
    继续输入: npm init,然后安静等待,当出现下图划线部分时(如果你的项目名不是英文小写,请自觉输入),否则一直狂按回车键就好。 

  3. 在新创建的项目下新建一个名为public的文件夹,并在该文件夹下新建一个名为index.html的文件。 

  4. 在新创建的项目下新建一个名为src的文件夹,并在该文件夹下新建一个名为index.js的文件。 

  5. 添加依赖。 
    点回左下角的Terminal,继续输入:npm i react react-dom -S

  6. 打开index.html文件,在代码行中输入,再按tab键,可快捷生成html文档。之后在body标签对中添加:

    <div id="app" />
  7. 打开package.json文件,将下图中的内容进行替换: 

    替换后: 

  8. 在src文件夹下新建一个组件App.js,其代码如下:

  9. import React from 'react';
    
    class App extends React.Component {
    render () {
    return (
    <div>
    Hello React!
    </div>
    );
    }
    } export default App;
  10. 打开index.js文件,在代码行中输入:

  11. import React from 'react';
    import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('app'));

     

  12. 运行。 
    点回左下角的Terminal,输入:npm start,即可运行我们写的Hello React! 小应用啦~ 

方案二:

方案二的方法更方便,使用create-react-app包,然后几行命令就搞定了,只是可能会比较慢== (在cmd命令行中)进入某盘f:回车即可,进入某个路径 f:\react和回车即可
你可以在GitHub上面详细了解这个包。 
create-react-app会帮你下载项目的模板文件,比如public/index.html和src/index.js这些,然后会帮你执行npm install来安装项目依赖。 
这里就不按步骤依次截图了,在左下角的Terminal中按序键入下列命令就好,其他的都不用做:

1.npm i create-react-app -g
2.create-react-app test
3.cd react-router/
4.npm start

步骤2 的

create-react-app test
test 为项目的名字 

问题及解决:

import是ES6的语法,需要转换一下: 

转换成ES6后,忽略这条消息就好: 

React使用的是JSX语法,需要转换一下: 

全文完。

转载于:https://www.cnblogs.com/ylboke/p/9593029.html

react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...的更多相关文章

  1. PythonWeb开发教程(二),搭建第一个django项目

    这篇写怎么创建django项目,以及把django项目运行起来. 1.创建django项目 a.使用命令创建,安装完django之后就有django-admin命令了,执行命令创建即可,命令如下:   ...

  2. React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)

    原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...

  3. 安装DRools开发环境

    1.下载相关安装包和开发插件 网站:http://www.jboss.org/drools/downloads.html 1.1 drools-distribution-6.3.0.Final.zip ...

  4. 15个必须知道的 Chrome 开发技巧

    在 Web 开发者中,Chrome 是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用 console 和 d ...

  5. Android Studio 入门级教程(二):新建一个属于自己的工程并安装Genymotion模拟器

    声明 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4392611.html [系列] Andr ...

  6. React开发调试工具--react-developer-tools

    1. 首先,下载react-developer-tools开发调试工具插件. 因为谷歌插件下载需要FQ,这里提供一个本地资源:https://www.crx4chrome.com/crx/3068/ ...

  7. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 7. react 基础 - React Developer Tools 的安装 及 使用

    1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...

  9. win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件

    win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件   1.去git上下载react-devtools文件到本地,https://github.com/fac ...

随机推荐

  1. 【原创】Linux RCU原理剖析(一)-初窥门径

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. 微信小程序wx.setStorage(OBJECT)

    关于微信小程序的:wx.setStorage(OBJECT)在官网API介绍到:

  3. android开发对应高德地图定位服务进度一

    进行android的高德地图开发首先需要进入高德地图的控制台进行注册登录.之后创建新的应用并且绑定软件得到相应的key. 这里面需要找到自己软件对应的多个SHA1.这里有发布版和调试版,以及对应的软件 ...

  4. flask-migrate的基本使用

    Flask-migrate 在实际开发环境中,经常会发生数据库修改的行为.一般我们修改数据库不会手动的去修改,而是去修改orm对应的模型, 然后再把模型映射到数据库中.这时候如果有一个工具能专门做这种 ...

  5. Linux网络安全篇,认识防火墙(二),Netfilter

    一.概述 因为iptables软件利用的是数据包的过滤的机制.所以它会分析数据包的报头数据.根据报头数据与定义的规则来决定该数据是否可以放行.若数据包内容与规则内容相同则放行,否则继续与下一条规则进行 ...

  6. javascript 入门 之 bootstrap 第一个程序

    <table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...

  7. 搭建react项目(低配版)

    react项目低配版,可作为react相关测试的基础环境,方便快速进行测试. git clone git@github.com:whosMeya/simple-react-app.git git ch ...

  8. 19cRAC增删节点

    由于测试环境打19c补丁失败,导致节点2  d2 crs无法启动!打补丁没有有效备份,亲人两行泪 先删再加节点. 一.删除节点 1.1 删除实例 参考 https://www.cnblogs.com/ ...

  9. 011-指针(上)-C语言笔记

    011-指针(上)-C语言笔记 学习目标 1.[掌握]字符串常用函数 2.[掌握]指针变量的声明 3.[掌握]指针变量的初始化 4.[掌握]函数与指针 5.[掌握]指针的数据类型 6.[掌握]多级指针 ...

  10. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...