React入门——1.Create React App

永寂如孤星

已于 2022-03-31 13:31:53 修改

阅读量970

点赞数

文章标签： reactjs javascript typescript

于 2022-03-25 05:50:31 首次发布

本文链接：https://blog.csdn.net/yjrguxing/article/details/123726199

版权

我们假定你已经安装了
Node.js(>= 8.1)，并且可以使用npm(>=5.6)或yarn，VScode或WebStorm
如果没有，请先去
安装Node.js
安装VScode
安装WebStorm

如果你没有接触过后端，在IDE方面请优先选择VScode
如果你之前有接触过后端，并且使用过jetbrains家的产品，请优先考虑WebStorm，因为他更适合你的编码习惯

在合适的文件夹中打开cmd，执行以下命令:

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

npx不是拼写错误，这是npm5.2+附带的包运行工具
之后你会得到一个项目的初始文件，如果有必要你也可以详细了解这些文件的作用
在你选择的IDE中运行npm start，他会自动帮助你打开一个网页，如果网页顺利打开，那么你的第一个React项目就创建完成了

打开项目的index.js文件，可以看到如下代码

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

将其修改为以下代码即可成功在网页上显示Hello World

ReactDOM.render(
    <div>Hello World</div>,
  document.getElementById('root')
);

显示Hello World的原因是，在项目的初始文件public\index.html中有这么一行代码<div id="root"></div>
我们通过以下代码将<div>Hello World</div>挂载到了root节点下

ReactDOM.render(
    <div>Hello World</div>,
  document.getElementById('root')
);

之后我们回想代码修改前的模样，也就是说React通过在JS中用render函数将代码挂载到root节点的方式达到只修改js文件就操作了htmll内容的目的

Hello World - React
最后更新于2022年3月25日
原创不易，如果该文章对你有所帮助，望左上角点击关注~如有任何技术相关问题，可通过评论联系我讨论,我会在力所能及之内进行相应回复以及开单章解决该问题.

该文章如有任何错误请在评论中指出，感激不尽，转载请附出处！
个人博客首页：https://blog.csdn.net/yjrguxing ——您的每个关注和评论都对我意义重大

关注