博客地址 :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. python自动化--批量执行测试之生成报告

    一.生成报告 1.先执行一个用例,并生成该用例的报告 # -*- coding: utf-8 -*- from selenium import webdriver from selenium.webd ...

  2. Leetcode33.Search in Rotated Sorted Array搜索旋转排序数组

    假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个目标值, ...

  3. js的DOM节点操作:创建 ,插入,删除,复制,查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  4. IP地址与,域名,DNS服务器,端口号的联系与概念

    一,什么是IP地址? 每一个联入到Internet的计算机都需要一个世界上独一无二的IP地址,相当于人们的身份证号码! IP地址有A类,B类,C类,D类和E类之分,目前D类和E类都暂时作为保留地址! ...

  5. Win7下IIS的安装配置与文件发布

    出于兴趣,抽空弄了一下Windows上的IIS,把过程记录下来与大家分享.高手请略过... 一.安装IIS.打开控制面板,单击“程序与功能” 二.点击左侧“打开或关闭Windows功能” 三.找到“I ...

  6. JS函数式编程 - 概念

    最近在看Typescript,顺便看了一些函数式编程,然后半个国庆假期就没有了.做个笔记,分几个部分写吧. 最开始接触函数式编程的时候,第一个接触的概念就是高阶函数,和柯里化.咋一看,这不就是长期用来 ...

  7. 如何设置单个 Git 仓库的代理从而提高更新速度

    如何设置单个 Git 仓库的代理从而提高更新速度 因为特殊原因,需要单独对 Git 仓库设置远程代理,从而提高更新速度. 主要原因是因为有一些远程 Git 仓库比较慢. 最初的想法是系统全局代理,但是 ...

  8. 如何在Liferay Custom JSP Fragment项目中加Java代码

    先附上大神原文链接 Adding Dependencies to JSP Fragment Bundles 在开发Liferay的过程中,我们常常会利用Module Fragment来修改Lifera ...

  9. bzoj3899 弦论

    好久没有更blog了啊... 对于一个给定长度为N的字符串,求它的第K小子串是什么. 这是一个SAM的模板题. 我好弱啊这个时候才开始学SAM,才会用指针. 要维护3个东西:每个状态right集合的大 ...

  10. PHP学习(类型转化)

    PHP 在变量定义中不需要(或不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的.也就是说,如果把一个 string 值赋给变量 $var , $var 就成了一个 string .如果 ...