需要Node.js 自行下载安装
然后全局安装create-react-app
npm install -g create-react-app
如果出现报错请参考
create-react-app -V 报错无法将“create-react-app”项识别为 cmdlet、函数、脚本文件或可运行程序的名称_Java-请多指教的博客-CSDN博客
在你的项目文件夹下打开Windows PowerShell 执行命令
create-react-app your-app
安装过程会有点久,耐心等待即可
出现下面的界面,表示创建项目成功:
然后进入你创建的项目目录下 我们执行npm start
也可以在vscode里面的终端打开
react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本,create-
react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空
清空后页面就是空白的了
然后我们可以看public目录下index.html body里面就只有个div id=root
后面我们需要使用js往这个div里面加东西
然后在里面重新创建一个index.js. 写入以下代码:
//从react的包当中引入了React。
//只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX,要写JSX,就必须引入React
import React from 'react';
//ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用.它是从 react-dom 中引入的,而不是从 react 引入。
import ReactDom from 'react-dom';
// ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上
ReactDom.render("欢迎来到react世界",document.getElementById("root"));
document.getElementById("root") 获取index.html中的id=root 然后渲染
也可以修改为:
ReactDom.render(欢迎来到react世界,document.getElementById("root"));
自动识别html标签 这就是JSX语法
JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。
原理是什么呢?
要明白JSX的原理,需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?
看下面的DOM结构
欢迎进入React的世界
React.js 是一个帮助你构建页面 UI 的库
上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示:
{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
}
]
}
但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 HTML 的方式写起来就方便很多了。
于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法,这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX结构转换成 JavaScript 的对象结构。
可以新建一个文件夹,专门存放组件
在classmodule.js中写入代码
import React, { Component } from "react";
class ClassApp extends Component{ //只有继承了Component才算是组件 组件名称首字母必须大写
//渲染效果是靠render()方法
render(){
//render()函数必须要有个返回值
return hello classApp Component;
}
}
//export把组件导出去
export default ClassApp;
1.首先导入React和Component
2.class类名必须首字母大写,继承Component才算是组件
3.render()方法是渲染效果,必须有返回值
4.必须把组件暴露出去 使用export default 组件名
然后在index.js中导入
import ClassApp from './base/01_classmodule';
ReactDom.render(
,document.getElementById("root")
);
//ReactDom.render( ,document.getElementById("root"));
注意:
1.return后面可以加小括号换行 代码多的时候可以对齐好看
return (
hello classApp Component)2.return 里面只能有一个最大的标签,不能并排
比如这就会报错:
改为
function FunctionalApp(){
return (
hello Functional Component
)
}
export default FunctionalApp;
还可以这样写函数式组件
const FunctionalApp=()=>{
return (hello Functional Component)
}
export default FunctionalApp;