入门React(尝试一下jsx和组件化)

简介: > 开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天,点击查看活动详情今天继续学习React,这是一篇面向初学者的React文章,大佬可以划走了。# 引言历史上,React源于facebook,他对于超大型的项目的编写上,适应非常好。而且具有着非常非常强大的生态环境。React的设计思路就是响应式编程。这样有以下几个优势。- 状态更新,UI会自动更新- 代码组件化,可复用性更强,可以封装,更方便。- 状态之间的依赖关系,只需要声明即可。# 初始化项目我们可以使用`create-react-app`的方式快速创建一个Rea
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天,点击查看活动详情

今天继续学习React,这是一篇面向初学者的React文章,大佬可以划走了。

引言

历史上,React源于facebook,他对于超大型的项目的编写上,适应非常好。而且具有着非常非常强大的生态环境。React的设计思路就是响应式编程。

这样有以下几个优势。

  • 状态更新,UI会自动更新
  • 代码组件化,可复用性更强,可以封装,更方便。
  • 状态之间的依赖关系,只需要声明即可。

初始化项目

我们可以使用create-react-app的方式快速创建一个React项目,首先我们要安装一个create-react-app的脚手架。

npm install -g create-react-app // 安装 create-react-app 脚手架

接下来我们就可以使用create-react-app脚手架来完成快速初始化我们的React项目了。

create-react-app my-app // 创建项目

我们等待一段时间后,React项目就创建好了,我们切换到React项目所在的跟目录,然后使用npm start命令来启动项目,等待一段时间后,我们就可以看到如下效果了。

image.png

目录

我们的目录结构大致如下:

image.png

我们来解析一下目录,package.jsonpackage-lock.json文件无需多言了,src目录下我们一般可以放一些开发时的代码,而node_modules是我们用到的依赖,而public目录下有如下事物:

image.png

分别是涉及的资源和我们要用的html文件,值得一提的是:React也是一种SPA的开发模式。

写一个demo

我们创建一个`Table.js·文件,内容如下:

import React , { Component } from "react";

class Table extends Component {
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Job
                        </th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>张三</td>
                    <td>xxx</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>yyy</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>zzz</td>
                </tr>
                </tbody>
            </table>
        )
    }
}

export default Table;

我们定义了一个Table类,然后导出,接下来我们在index.js中使用这个组件

import React , { Component } from "react";
import  ReactDOM  from "react-dom";
import Table from "./Table";
import './index.css';

const element = <div>Hello, world!</div>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello React { element }</h1>
        <Table/>
      </div>
    )
  }
}

ReactDOM.render(<App/> , document.getElementById('root'));

我们将他引入,并尝试了一下jsx的语法:const element = <div>Hello, world!</div>;

最后将他挂载到Html中的root下。

保存,热更新之后:

image.png

相关文章
|
2天前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
15 4
|
1天前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
4天前
|
前端开发 人机交互
langchain 入门指南 - ReAct 模式
langchain 入门指南 - ReAct 模式
11 1
|
10天前
|
前端开发 JavaScript 开发者
React组件与JSX之间的区别是什么
【8月更文挑战第9天】 React组件与JSX之间的区别是什么
30 4
|
7天前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
13 0
|
1月前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
65 8
|
1月前
|
JavaScript 前端开发
react18【系列实用教程】JSX (2024最新版)
react18【系列实用教程】JSX (2024最新版)
30 1
|
1月前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
35 0
|
2月前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
7天前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
12 0