React 创建项目

一.创建项目

用react 创建一个项目

1.npm install create-react-app -g

2.create-react-app react-demo  (react-demo项目名)

3.cd react-demo

4.npm install

5.npm start     //运行

二.配置路由

1.安装:

npm install --save react-router-dom

这样就可以使用react router 了

三.添加less配置

create-react-app 创建的项目默认不支持less,以下增加less配置的步骤

安装:

npminstall--save-dev less-loaderless

修改webpack配置

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

      1. exclude

/\.css$/ 改为 /\.(css|less)$/

        2. test

test: /\.css$/ 改为 /\.(css|less)$/

test: /\.css$/ 的 use 数组配置增加 less-loader

原文地址:https://www.cnblogs.com/whx123/p/12108599.html

时间: 2024-11-09 01:54:29

React 创建项目的相关文章

react创建新项目并且修改配置文件

react创建项目 这是我在用react搭建项目时,用到的一些东西,顺序纯属自己定义, 一.创建项目 用react 创建一个项目,这也是官方给出的 1.npm install create-react-app -g 2.create-react-app react-demo  (react-demo项目名) 3.cd react-demo 4.npm install 5.npm start     //运行 二.配置路由 1.安装 npm install --save react-router-

React 脚手架创建项目

使用react脚手架创建项目 一.首先需要安装node.js 具体如何安装参考网址:https://www.jianshu.com/p/0ddecdbb4048 下载安装包 双击打开安装文件 setup 点击next,下一步 勾选 选中勾选框,点击next,下一步 安装路径 选择安装路径,默认路径即可,点击next,下一步 安装配置 默认即可,点击next,下一步 安装开始 点击install,开始等待安装 安装中 点击finish,安装完成 finish 打开命令提示符窗口,输入 node -

React Native创建项目等待时间长解决

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana; color: #ff6600; background-color: #ffffff } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana; color: #333333; background-color: #ffffff } span.s1 { } 1. 初始化工程 在终端输入命令 :react-na

第一个React Native项目

1>下图操作创建第一个React Native项目: 用Xcode运行界面如下: 记住: 在使用项目文件期间,终端记住不要关闭的哟!!! 改变了程序代码,需要刷新运行,使用快捷键: Command+ R,我都是在mac下的操作哟,安卓我就不涉及记录了,毕竟我不是搞安卓的...?? 2> 使用WebStrom软件进行敲代码啦....启动编译有点慢,耐心等待哟!!! 看左边的文件夹所示: Android : 表示安卓项目的文件夹; iOS : 表示iOS项目的文件夹; node_modules :

安装android Studio和运行react native项目(基础篇)

ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建 具体的路径可能和下图不一致,请自行确认. 你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效. 测试安装 react-native init AwesomeProject cd AwesomeProject react-nativ

React 实践项目 (三)

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行状态管理,这次我们使用Redux-saga 管理 Redux 应用异步操作 React 实践项目 (一)React 实践项目 (二)React 实践项目 (三) - 首先我们来看看登陆的 Reducer export const auth = (state = initialState, actio

React 实践项目 (二)

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一)本次实践代码 部署好的网址 上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中.惟一改变 state 的办法是触发 action,一个描述发生什么的对象.为了描述 a

React 实践项目 (四)

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有一个首页.现在开始构建一个新的投稿页面并使用 React-Router 进行路由管理. React 实践项目 (一)React 实践项目 (二)React 实践项目 (三)React 实践项目 (四) - 首先我们来构建投稿页面 创建 src/co

【腾讯Bugly干货分享】React Native项目实战总结

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小时外拼成长"这是大家共同的理想.除了每天忙于工作外,我们都希望能更多地区吸收领域内的新知识与新技能,从而走向人生巅峰. Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 上一期我们邀请了腾讯SNG工程师&qu