react（一）初始React及React脚手架

最新推荐文章于 2024-05-13 21:12:44 发布

我在人间贩卖青春

最新推荐文章于 2024-05-13 21:12:44 发布

阅读量121

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44178305/article/details/118325989

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

React

一个用于构建用户界面的 JavaScript 库
中文手册：地址

基于浏览器的模式

React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件

React.createElement(type,props,children)

ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染

ReactDOM.render(Vnode, container[, callback])

	-  element：要渲染的内容
    - container：要渲染的内容存放容器
    - callback：渲染后的回调函数

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
<body>
    <div id="div"></div>
    <script>
        ReactDOM.render("Hello React",document.querySelector("#div"));
    </script>
</body>
</html>

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
    <div id="div"></div>
    <script type="text/babel">
        let h1 = React.createElement("h1",null,"这是副标题");
        let p = React.createElement("p",null,"这是副标题")
        // let header = React.createElement("header",{
        //     id:"header"
        // },h1,p);
        // let header = React.createElement("header",{
        //     id:"header"
        // },[h1,p]);
        
        // JSX:在JS中扩展XML语法
        let header = <header id = "header"><h1>这是标题</h1><p>这是副标题</p></header>
        console.log(header)
        ReactDOM.render(header,document.querySelector("#div"));
    </script>
</body>
</html>

基于自动化的集成环境模式 - create-react-app - 脚手架

create-React-App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 。

全局安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

创建项目

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

我在人间贩卖青春

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react（一）初始React及React脚手架

React一个用于构建用户界面的 JavaScript 库中文手册：地址基于浏览器的模式React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件React.createElement(type,props,children)ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染ReactDOM.render(Vnode, container[, callback]) - element：要渲染的内容 - container：要渲
复制链接

扫一扫

专栏目录