react 从0到1

 

上一章基本知识点,学啦一点点啦!接下来就要做项目啦,我们就直接干一个项目,并且目前要最新的。

我推荐用create-react-app,  别问我为什么,我不知道

1.0 npm install -g create-react-app

1.1 create-react-app classw

 

1.2 进到这个文件夹

 npm start

 

 

 

哇好神奇啊!

妈的其实我一点都不感觉神奇,继续吧!

请注意,我用的是webstrom,,不是用这个的我建议趁早用这个,原因,还是没有

 

 

 这是文件目录

 

 

 

 

 这个修改了一下,接下来你看,注意看,一个新的知识点,我怎么跳转页面呢?

npm install --save react-router-dom

然后

 这些代码加上去

 

 

 

 

 

 

 

 自己点击看看吧!

 

 这你就可以开始写项目啦!前提是,用css写哈哈,不能用less或者是sass,

我们来配置一下sass吧!我一直用的这个

 

npm install sass-loader node-sass --save-dev
他不行的话就用
cnpm install sass-loader node-sass --save-dev
找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件(两个文件都要改)

 

 

 

 

效果

哈哈,没有啦,,就这样so easy把!

假装的。

没啦,这样就可以开始写项目啦!

还等什么呢?

 

接下来会继续更新的!

 

转载于:https://www.cnblogs.com/lieaiwen/p/8973950.html

1. 为了搭建一个React项目,首先要确保你的开发环境已经配置好了。你需要安装Node.js和npm(Node包管理器)。 2. 使用命令行工具进入你想要保存项目的文件夹,并执行以下命令来创建一个新的React应用: ```shell npx create-react-app my-app ``` 这将使用create-react-app脚手架工具创建一个新的React应用,并在my-app文件夹中初始化项目结构。 3. 进入my-app文件夹,并启动开发服务器: ```shell cd my-app npm start ``` 这将启动一个本地开发服务器,并在浏览器中打开http://localhost:3000以查看你的React应用。 4. 现在你可以开始编写你的React组件了。你可以创建函数组件或类组件来定义你的UI。函数组件是一个纯函数,接收props对象并返回一个React元素;而类组件需要继承React.Component,并实现一个render函数来返回React元素。 5. 如果你需要在组件之间进行通信,可以使用Redux这样的状态管理库。Redux可以帮助你管理全局的状态,并使不同组件之间共享数据变得更加容易。你可以使用npm来安装Redux和相关的库: ```shell npm install redux react-redux ``` 然后,你可以在你的应用中创建Redux的store,并通过Provider组件将它提供给整个应用。你可以使用connect函数来连接你的组件,使其能够访问Redux中的状态。 6. 最后,你可以使用第三方UI库来加快你的开发速度。Ant Design是一个流行的React UI框架,它提供了丰富的组件和样式,可以帮助你快速构建漂亮的用户界面。你可以使用npm来安装Ant Design: ```shell npm install antd ``` 然后,你可以在你的组件中引入Ant Design的组件,并使用它们来构建你的UI。Ant Design的文档提供了详细的使用说明和示例代码,可以帮助你更好地了解和使用该框架。 以上是从0到1搭建一个React项目的一般步骤。你可以根据实际需求和项目要求进行相应的调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [REACT实战项目从0到1搭建(仅供参考)](https://blog.csdn.net/qq_31851435/article/details/121740400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [react-从0到1新建react项目](https://blog.csdn.net/weixin_40220492/article/details/127145343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值