当前位置: 首页 > article >正文

React入门(1)——我的第一个React.js项目

创建日期: 2020年2月22日
官网
中文官方文档
React入门系列 目录导引

一.使用create-react-app命令创建

React 官方提供了一个脚手架用于初始化React项目,使用 create-react-app 可以简化手动设置流程。 官方网站的 Tutorial 也是以此为例。
注意:项目命名时,不支持大写字母。

STEP 1:
$ npm install -g create-react-app
$ create-react-app my-app

或者,npm版本在5.2.0+ 可以使用 npx 命令,简洁

$ npx create-react-app my-app

运行成功后,最后一句是“Happy hacking!”。
使用 create-react-app ,你只需要执行命令之后等待安装完依赖,就可以创建一个已经配置好的 React 应用程序,并可以基于此开始你的项目开发。创建成功后,项目文件夹如下:


项目文件夹
STEP 2:

进入项目目录,启动项目

$ cd my-app
$ npm start

我使用的$ yarn start启动项目。关于npm和yarn的区别
这里说一下,笔者在启动现存代码的时候,发现居然所有步骤都正确,画面是空白的。然后笔者刷新了一下画面,就可以了。
<br >

二.使用webStorm创建React项目

打开webStorm,File → New → Project... → React App
选好路径,填上项目名,点击Create,创建新项目。
如下图:


webstorm

项目刚创建时,先出现package.json, yarn.lock,然后node_modules文件夹。继续自动运行之后,出现了初始项目的完整文件夹。

运行时,直接点击run按钮即可。

以上,部分参考https://zhuanlan.zhihu.com/p/36137966 该链接里面提到项目初始化,其中npm init会对package.json进行修改,如果没有package.json这个文件,会自动生成,但是在生成过程中,entry point必须填写,否则会出现Aborted的错误提示,文件不会被生成。链接的作者,最后一次编辑是在2018年5月份,不知道是否这期间react的版本更新原因,笔者创建的新项目,已经自动拥有package.json这个文件,并不需要通过npm init对项目初始化。之后的开发过程中,是否需要,待定。。。

三.已有工程中,导入react

如果你希望在老项目中引入 React,或着探究 React 到底是怎么运行起来的。那就需要自己动手来配置了。我们使用 Babel 和 Webpack 来解决这个问题。

笔者没有老项目,这部分,之后再补吧。。。参考

下面这个链接,涉及到Babel和Webpack这两个概念,说的比较细致,可以参考。https://segmentfault.com/a/1190000016661311

四.扩展——显示Hello world!

我们找到项目的启动文件src/index.js,将文件所有内容替换成下面代码:

import React from 'react'

import ReactDOMfrom 'react-dom'

ReactDOM.render(

<h1>Hello, world!</h1>,

    document.getElementById('root')
);

运行,之后会看见界面显示Hello world。

我们观察下上述语法,待你多写几个demo的时候,你会发现,最后要先启动哪个界面,是由

ReactDOM.render(parameter,document.getElementById('root'));

的parameter决定的。

'root'是根DOM节点,想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render()。详细

下一篇:React入门(2)–––React中使用css / less文件

======================== 分割线 ==========================
http://huziketang.mangojuice.top/books/react/lesson7
看阮一峰的教程:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
创建第一个components:https://www.jianshu.com/p/324fd1c124ad

最后编辑于:2024-10-01 17:42:04


喜欢的朋友记得点赞、收藏、关注哦!!!


http://www.kler.cn/a/350533.html

相关文章:

  • conda环境打包环境、迁移环境
  • 论文阅读笔记-Incorporating Copying Mechanism in Sequence-to-Sequence Learning
  • Java-IO流使用场景
  • 单目相机和双目相机定位
  • SpringBoot整合分页助手
  • 富士胶片人像汽车照片Lr调色教程,手机滤镜PS+Lightroom预设下载!
  • Unity 3d 鼠标设置的问题——隐藏/显示鼠标、锁定/解锁/限制鼠标、自定义鼠标形状
  • Spring Boot助力B2B医疗平台病历数据交换
  • 智能网联汽车安全隐患,如何化解?
  • Flutter 单例模式技巧与最佳实践
  • java怎么连接数据库sql server
  • Python使用Selenium库实现CSDN自动化发帖
  • 论文阅读-U3M(2)
  • 前端 + Nginx + 后端架构的无感升级方案
  • 2-117 基于matlab的共振峰估计
  • 中国市场的NFT生存法则:消费属性与圈子文化
  • C语言函数递归经典例题:汉诺塔和小青蛙跳台阶
  • C语言简单的链表操作
  • Android 中 View 与 SurfaceView 主动与被动更新的应用场景
  • Vue3 props