七十五、React环境搭建，目录文件分析和JSX
程序员文章站
2022-07-02 22:43:10
...
| 2020/11/18、 周三、今天又是奋斗的一天。 |
@Author：Runsen
React
React是Facebook 2013年推出的函数式编程开源前端框架，和Vue就是两个巨头。我得赶紧搞定React。
React环境搭建
引用js
可以通过引入.js文件来使用React，下面是React中的HelloWorld代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react.js:核心文件 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom.js渲染页面中的DOM，当前文件依赖于react核心文件 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--babel.js：可以将ES6语法转换为ES5语法，JSX语法转换为Javascript语法，保证浏览器的码的兼容。-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
除了引用.js文件，还可以通过npm下载
// 下载方式：react核心包：
npm i react --save
// react-dom:
npm i react-dom --save
// babel:
npm i babel-standalone --save
脚手架工具搭建
但更多的时候通过脚手架工具来搭建—Create-react-app。
前提node和npm安装好。
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
访问3000端口，即可看见画面，Vue的是8080端口。
目录结构
- node_modules： 这里面包含了react项目中会用到的一些组件 。
- src：里面包含了一些我们自己使用的js文件，css文件，img文件等等
- manifest.json：清单配置文件，声明了项目的名称图标以及入口
- package.json: 包的清单文件，这里面声明的包会通过npm下载到node_modules中
React 使用 JSX 来替代常规的 JavaScript。Jsx全称: javascript and XML
Jsx定义: 可拓展(自定义)标记性语言,基于javascript,融入了XML,我们可以在js中书写xml,使用JSX可以很好的描述UI在页面中应该呈现它应有的交互形式
| 请一键三连！！！！！ |