React-初探(开发环境、目录、组件介绍)

最新推荐文章于 2022-10-21 18:35:52 发布

jackaroo2020

最新推荐文章于 2022-10-21 18:35:52 发布

阅读量177

点赞数

分类专栏：前端工程师

本文链接：https://blog.csdn.net/qq3399013670/article/details/92440415

版权

前端工程师专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1、开发环境

官方文档说明
前提： You’ll need to have Node >= 6 and npm >= 5.2 on your machine
在这里插入图片描述

核心命令：

npx create-react-app my-app
cd my-app
npm start

在这里插入图片描述

2、目录结构

在这里插入图片描述

3、组件

import {Component} from “react”;
等价于
import React from ‘react’;
const Component = React.Component;

import React,{Component} from 'react';

 // import {Component} from "react";
// import React from 'react';
// const Component = React.Component;

// class App extends React.Component {
class App extends Component {
	
	render(){
		return(
			<div>
				hello world
			</div>
		);
	}
}

index.js

import React from 'react';
// ReactDOM 是一个第三方模块，它有个render方法帮我们把组件App挂载在页面的某个节点
import ReactDOM from 'react-dom';
import App from './App';
// 如果你引用了jsx的语法，那么你一定需要引用react,在react中的render函数中的标签也是jsx语法
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>TODO_TEST</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

4、基础的JSX语法

JSX自定义组件的首字母必须大写，h5标签小写开发。

jackaroo2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-初探(开发环境、目录、组件介绍)

1、开发环境官方文档说明前提： You’ll need to have Node >= 6 and npm >= 5.2 on your machine核心命令：npx create-react-app my-appcd my-appnpm start
复制链接

扫一扫