博客地址 :https://www.cnblogs.com/sandraryan/

安装node ,有就跳过。

node.js官网:https://nodejs.org/en/

终端用node -v 和 npm -v 来查看版本号。

用npm 安装 create-react-app工具,自动地在本地目录中创建react项目。

npm install -g create-react-app

全局安装create-react-app脚手架工具,使用命令创建新的react项目。

create-react-app 文件夹名

在文件夹中部署npm,导入react-dom依赖包.

cd 文件夹:

npm init   (然后一路回车)初始化 package.json,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。

npm install --save react react-dom  ( 在该目录下导入react和react-dom)

npm install --save  react-router-dom   (react路由,以后会用到)

打开 npm  start 成功√

CSS in js 可以将css写在js中react安装styled-copmonents 工具包,对js中css代码进行解析,转码生效(组件化样式)

npm i styled-components --save

安装react 数据监测组件

npm i prop-types --save

react项目安装及运行的更多相关文章

  1. React Native 安装

    第一 :在天朝如果你可以违规上网的话便可以按 react native 中文网的文档进行安装与调试.地址为:https://reactnative.cn/docs/getting-started.ht ...

  2. 解决react项目中跨域和axios封装使用

    最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装 全局安装create-react-app脚手架 ...

  3. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  4. 前端新手如何安装webstorm ,初步搭建react项目

    下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https ...

  5. react项目如何运行

    react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...

  6. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  7. 基于Abp React前端的项目建立与运行——React框架分析

    基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...

  8. JavaWeb学习之tomcat安装与运行、tomcat的目录结构、配置tomcat的管理用户、web项目目录、虚拟目录、虚拟主机(1)

    1.tomcat安装与运行双击tomcat目录下的bin/startup.bat,启动之后,输入http://localhost:8080,出现安装成功的提示,表示安装tomcat成功 2.tomca ...

  9. React项目搭建及依赖安装

    一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...

随机推荐

  1. JS方法大全

    方法:document.createElement(tagName) 说明:创建指定元素 方法:document.createTextNode(文本) 说明:创建文本节点 方法:_dom.append ...

  2. iview 中table列 一列显示多个数据(后台返回数组显示在列内)

    一.首先出现的是比较复杂的一种情况(多个key) 1.首先页面显示效果如下 2.后台返回数据格式如下: 3.在iview中table的columns中的render函数: 4.具体代码 render: ...

  3. HDU - 1724 Ellipse 自适应辛普森模板

    OJ 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #include ...

  4. addEventListener-第三个参数 useCapture

    转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...

  5. yum源配置及详解

      红帽系列中,进行软件安装可以有三种方法,编译安装,rpm包安装,和yum源安装.其中yum方法安装最简单,因为它可以自动解决软件包之间的依赖关系... 一.常用yum源 yum源可以来源于多种文件 ...

  6. 【Java-加密算法】对称加密、非对称加密、单向散列(转)

    一提到加密,就会联想到数字签名,这两个经常被混淆的概念到底是什么呢? 加密:加密是一种以密码方式发送信息的方法.只有拥有正确密钥的人才能解开这个信息的密码.对于其他人来说,这个信息看起来就像是一系列随 ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结 本系列文章中可能有很多翻译有问题或者错误的地方:并且有些章节 ...

  8. 笔记:OSAL st 宏学习 do { x } while (__LINE__ == -1)

    笔记:OSAL st 宏学习 do { x } while (LINE == -1) #define st(x) do { x } while (__LINE__ == -1) 这段的意思是让代码可以 ...

  9. Timer和DispatcherTimer简单使用

    1. 设定计时器相关属性,使用委托方法处理事件触发 DispatcherTimer dispatcherTimer= new DispatcherTimer(); dispatcherTimer.Ti ...

  10. php的一些误解

    1.php函数和方法是不用的:类的方法可以设定访问权限,需要通过对象或者类来调用:函数是公共的,都可以使用.