前端新手如何安装webstorm ,初步搭建react项目
下载安装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项目的更多相关文章
- [Web 前端] webstorm 快速搭建react项目
cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...
- JBOSS安装与配置搭建本地项目环境(方便前端开发调式)
JBOSS安装与配置搭建本地项目环境 什么是JBOSS? JBOSS是EJB的服务器,就像Tomcat是JSP服务器一样,就是服务器的一种. 环境搭建如下: 一:首先安装JDK,配置环境变量(PAT ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 从零开始使用 webpack5 搭建 react 项目
本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...
- 🌅 使用 Dawn 快速搭建 React 项目!
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- 搭建React项目环境【1】
1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
随机推荐
- ava包(package)的命名规范,java中package命名规则
Java的包名都有小写单词组成,类名首字母大写:包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类.以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现. 由于 ...
- PHP的单引号和双引号
单引号内部的变量不会执行,双引号会执行. <?php $name = 'hello php'; echo "<h1>$name</h1>"; echo ...
- IDEA导入eclipse项目并部署运行完整步骤(转发)
首先说明一下:idea里的project相当于eclipse里的workspace,而idea里的modules相当于eclipse里的project 1.File-->Import Proje ...
- 前端安全系列之二:如何防止CSRF攻击?
背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...
- Centos7(Firewall)防火墙开启常见端口命令
使用云服务器的,一定要注意开启安全组配置的响应端口 Centos7默认安装了firewalld,如果没有安装的话,则需要YUM命令安装:firewalld真的用不习惯,与之前的iptable防火墙区别 ...
- Acer宏碁暗影骑士3进阶版无法进入系统引导修复
1.刚开机时,按住alt不放,不停点击F10进入恢复系统: 2.点击疑难解答,选择cmd: 3.以下是cmd命令,//注释不要复制 c: //进入C盘 cd windows cd system32 b ...
- Python进阶篇:文件系统的操作
通过一个例子来熟悉文件的基本操作:创建文件,读取文件,修改文件,删除文件,重命名文件,判断文件是否存在 ''' 编写可供查询的员工信息表--学号 姓名 年龄 班级 1. 提供格式化查询接口 2. 允许 ...
- codevs 1004 四子连棋
1004 四子连棋 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白 ...
- [BZOJ4487][JSOI2015]染色问题(容斥)
一开始写了7个DP方程,然后意识到这种DP应该都会有一个通式. 三个条件:有色行数为n,有色列数为m,颜色数p,三维容斥原理仍然成立. 于是就是求:$\sum_{i=0}^{n}\sum_{j=0}^ ...
- 【洛谷】2473:[SCOI2008]奖励关【期望DP(倒推)】
P2473 [SCOI2008]奖励关 题目背景 08四川NOI省选 题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不 ...