下载安装webstorm:配置成功:

配置成功后就可以开启webstorm项目了。(存微信收藏、、)

1:在webstorm下配置node环境:

2:完成之后:

React官方脚手架地址:

https://github.com/facebook/create-react-app

在终端下安装执行npm install -g create-react-app  不用每个项目都装。一个webstorm装一次即可

3:可以直接新建react app项目了。

4:如上图:自己安装完成之后:执行下 npm list -depath0      (查看所下载的不为空的依赖包)

或者 npm ls (查看所下载的所有的依赖包包括空文件)

完成并开启入口

5:最后可以自己完成自己react项目

注意的是:一定要有顶层包裹的元素:如果不是报错

如下图:

6:初始化:

新建一个component文件夹下。并建一个header.js  如下图:按钮控制内容的显隐性

缩写的class后面的类 Header 一定的要大写、  如果需要导出到其它地方引用必须   export default这个类

7:引用导出的组件

7:

8:最终结果

9:项目完成之后打包上线。运行yarn build  上传的文件大致如下图所示。。具体情况具体分析

前端新手如何安装webstorm ,初步搭建react项目的更多相关文章

  1. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  2. JBOSS安装与配置搭建本地项目环境(方便前端开发调式)

    JBOSS安装与配置搭建本地项目环境  什么是JBOSS? JBOSS是EJB的服务器,就像Tomcat是JSP服务器一样,就是服务器的一种. 环境搭建如下: 一:首先安装JDK,配置环境变量(PAT ...

  3. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  4. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  5. 从零开始使用 webpack5 搭建 react 项目

    本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...

  6. 🌅 使用 Dawn 快速搭建 React 项目!

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...

  7. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  8. 搭建React项目环境【1】

    1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查 ...

  9. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

随机推荐

  1. 30分钟LINQ教程的学习笔记

    原文章 : http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html 一.11个与LINQ有关的语言特性: [隐式类型.匿名类型.对象 ...

  2. 【Java】返回长度为零的数组或者集合,而不是null

    今天在牛客网上做一个编程题时,在提交代码后老是抛出NullPointerException异常,大概的代码如下: public ArrayList<Integer> foo(TreeNod ...

  3. Hadoop整理五(基于Hadoop的数据仓库Hive)

    数据仓库,是为企业所有级别的决策制定过程,提供所有类型数据支持的战略集合.它是单个数据存储,出于分析性报告和决策支持目的而创建. 为需要业务智能的企业,提供指导业务流程改进.监视时间.成本.质量以及控 ...

  4. R语言实战(六)重抽样与自助法

    本文对应<R语言实战>第12章:重抽样与自助法 之前学习的基本统计分析.回归分析.方差分析,是假定观测数据抽样自正态分布或者其他性质较好的理论分布,进而进行的假设检验和总体参数的置信区间估 ...

  5. DRUID控制

    @Configuration public class DruidConfiguration { @Bean public ServletRegistrationBean statViewServle ...

  6. 你的跑步姿势正确吗? 教你正确跑步姿势 & 常识

    转载!!!!!搞IT必须运动一下 前言: 最近两年跑步的人越来越多,跑步在大部分人的观念中都是毫无技术含量,只要迈开腿就行了,其实这也是造成大多数跑步人士伤病的根源.对跑步的认知不足,跑步是一项看起来 ...

  7. ubuntu16.04查看软件的安装位置

    以chromium-browser为例 find命令 totoro@SWH:~$ sudo find / -name chromium-browser /usr/lib/chromium-browse ...

  8. django定时任务

    1.celery流程图: Celery的架构由三部分组成,消息中间件(message broker),任务执行单元(worker)和任务执行结果存储(task result store)组成 2.使用 ...

  9. luoguP2490 [SDOI2011]黑白棋 博弈论 + 动态规划

    博弈部分是自己想出来的,\(dp\)的部分最后出了点差错QAQ 从简单的情况入手 比如\(k = 2\) 如果有这样的局面:$\circ \bullet $,那么先手必输,因为不论先手怎样移动,对手都 ...

  10. 浅谈 PHP 中的多种加密技术及代码示例

    信息加密技术的分类 单项散列加密技术(不可逆的加密) 属于摘要算法,不是一种加密算法,作用是把任意长的输入字符串变化成固定长的输出串的一种函数 MD5 string md5 ( string $str ...