267-react入门

最新推荐文章于 2023-12-23 17:03:40 发布

Lich Howger

最新推荐文章于 2023-12-23 17:03:40 发布

阅读量91

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_33781658/article/details/87808169

版权

react 专栏收录该内容

14 篇文章 1 订阅

订阅专栏









react入门





react
应用程序骨架(脚手架)

安装一下
npm install -g create-react-app

然后我们创建一个工程
create-react-app demo

ls看下目录
然后进入到目录里面
cd demo
我们看到目录里已经有了工程文件了
然后我们测试一下

npm run start 
然后我们就看到react了







然后我们用GoLand打开工程
我们删掉一些没用的东西
把src里面的
App.js和index.js留下
其他的全都删掉

然后我们整理一下App.js和index.js
然后看下代码

import React, { Component } from 'react';

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

export default App;




然后是index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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





然后我们来说一下这个react是怎么运行的
我们先看public文件夹
里面有一个index.html
实际上展示的是index.html
但是呢
我们看这个html文件
里面的<body>的
<div id="root">
</div>

react会把所有的内容渲染好
然后放到这个root根节点里面

然后我们看一下index.js
ReactDOM.render(<App />, document.getElementById('root'));
这里就是通过ReactDOM的render渲染方法
把东西都放到root里面了

然后我们再看一下App.js
  render() {
    return (
      <p>hello world</p>
    );
  }

所以就展示了hello world

Lich Howger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
267-react入门

react入门react应用程序骨架(脚手架)安装一下npm install -g create-react-app然后我们创建一个工程create-react-app demols看下目录然后进入到目录里面cd demo我们看到目录里已经有了工程文件了然后我们测试一下npm run start 然后我们就看到react了...
复制链接

扫一扫