关于React不做自我介绍了。 create-react-app 快速搭建React环境,自带热加载,服务器。 电脑与手机在同一wifi下可以通过ip访问项目,实现手机电脑同时预览
npx create-react-app my-app
cd my-app
npm start
第一个默认启动项目.png
入口文件:src/index.js
import React from 'react';//引入React库
import ReactDOM from 'react-dom';//组件挂载在dom上
//大写字母为组件
import App from './App';
//将App.js渲染入dom
ReactDOM.render(<App />, document.getElementById('root'));
渲染文件:src/App.js
import React, {Component} from 'react';
//定义React组件
class App extends Component {
render() {
return (
<div >
hello9
</div>
);
}
}
export default App;
可以看到用 create-react-app创建的项目很简洁,但却能开启服务器,还能热部署。原因在于react-scripts
create-react-app.png
已内置:webpack,webpack-dev-server,
babel系列、react系列、eslint系列、html-webpack-plugin、
url-loader(limit: 10000)、style-loader、css-loader、file-loader等
webpack.config.dev.js和webpack.config.prod.js分别代表开发与生产环境,都要改 autoprefixer:自动加css3浏览器前缀 打包时与js分开,成css文件(不然js会很大)
npm i node-sass sass-loader -D
node_modules/react-scripts/config/webpack.config.dev.js 具体的配置跟源码一起放在github上:详见附录:webpack的scss配置:
scss.png
修改样式.png
[1]本文由张风捷特烈原创,转载请注明 [2]欢迎广大编程爱好者共同交流 [3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 [4]你的喜欢与支持将是我最大的动力