从零开始一个react项目(自用笔记)

一、项目初始化

npm版

1、下载 NodeJS 并设置淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2、下载构建 React 应用的脚手架工具
$ cnpm install create-react-app -g

3、以 react-pc 为名创建项目
$ create-react-app react-pc 

4、启动项目
$ npm start

建好项目后上传至码云( https://gitee.com/songhh96/Web-React.git )等代码托管仓库时,不用上传 node_modules 文件夹。从码云 git clone 后,项目文件中并没有 node_modules 文件夹,此时执行 $ npm install,npm 会根据 package.json 配置文件中的依赖配置下载安装。

yarn版

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install create-react-app yarn -g

$ create-react-app react-pc2

$ yarn start

从码云 git clone 后,执行 $ yarn

二、开发笔记

react中组件才是王道,采用JSX语法,将HTML模板嵌入到了JS中(Angular将JS嵌入了HTML中)

三、开发问题

ie11不兼容: https://blog.csdn.net/Wcharles666/article/details/89889897

                      https://www.jianshu.com/p/ce83a8cdb68f

导入组件的两种方式(import 与 require):https://www.cnblogs.com/soyxiaobi/p/9573897.html

兄弟组件通信(事件总线机制):https://www.cnblogs.com/xiaoyaoxingchen/p/11093061.html

点击事件处理:https://blog.csdn.net/qq_34829447/article/details/81705977

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搭建 React + TypeScript 项目的步骤如下: 1. 创建一个新的项目文件夹 ``` mkdir my-react-ts-app cd my-react-ts-app ``` 2. 初始化项目 ``` npm init -y ``` 3. 安装必要的依赖 ``` npm install --save react react-dom npm install --save-dev typescript @types/react @types/react-dom webpack webpack-cli webpack-dev-server awesome-typescript-loader html-webpack-plugin ``` 4. 创建一个 TypeScript 配置文件 ``` touch tsconfig.json ``` 5. 将以下内容添加到 tsconfig.json 文件中 ``` { "compilerOptions": { "outDir": "./dist/", "module": "es6", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "jsx": "react", "moduleResolution": "node", "esModuleInterop": true }, "include": [ "./src/**/*" ] } ``` 6. 添加一个 index.html 文件到项目根目录 7. 添加以下内容到 index.html 文件中 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My React TypeScript App</title> </head> <body> <div id="root"></div> </body> </html> ``` 8. 创建一个 src 目录 ``` mkdir src ``` 9. 在 src 目录中创建一个 App.tsx 文件 ``` touch src/App.tsx ``` 10. 将以下内容添加到 App.tsx 文件中 ```tsx import React from 'react'; const App = () => { return ( <div> <h1>Hello, World!</h1> </div> ); }; export default App; ``` 11. 在 src 目录中创建一个 index.tsx 文件 ``` touch src/index.tsx ``` 12. 将以下内容添加到 index.tsx 文件中 ```tsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 13. 在项目根目录中创建一个 webpack.config.js 文件 ``` touch webpack.config.js ``` 14. 将以下内容添加到 webpack.config.js 文件中 ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }), ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, }, }; ``` 15. 运行 npm start 启动项目 ``` npm start ``` 以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值