React 从入门到精通(1)-- 简单Demo

React是用于构建用户界面的 JavaScript 库,起源于FaceBook,该公司大部分网站都用这个支撑。国外很多著名项目(如Scratch)也是基于这个开发。

安装

1.安装脚手架工具create-react-app
进入命令行终端,输入(需要先安装node)
npm install -g create-react-app

安装完毕后,在AppData\Roaming\npm这个目录下面就可以看到create-react-app这个文件,这样就可以全局运行了。

2.在工程目录目录位置打开命令行。输入:
create-react-app 项目名

就会创建项目。

创建的文件目录

《React 从入门到精通(1)-- 简单Demo》

Node-modules公用的库
Public 页面 ico
Src 代码

用vscode打开项目,通过终端运行 npm start,启动开发版。
《React 从入门到精通(1)-- 简单Demo》

掌握React先掌握他的写法。

看下代码

《React 从入门到精通(1)-- 简单Demo》

Index.js

《React 从入门到精通(1)-- 简单Demo》

导入了React和ReactDOM基础类,和index.css(里面是一些网页的通用css),导入了组件App。执行ReactDOM.render(<App />,document.getElementById(‘root’));
将App组件渲染到网页上。

《React 从入门到精通(1)-- 简单Demo》

App()这个函数定义了组件如何渲染,这是React特殊的写法,返回了html的内容。然后用”export default”将其导出给其他文件使用。这里面用到的css则是App.css。注意的是,class这个关键字要写完className。

以上,就是个基本demo。当然开发大型项目光靠这个实在太单薄,下一章介绍前端框架。

    原文作者:生哥学前端
    原文地址: https://segmentfault.com/a/1190000019967237
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞