React学习笔记(一)

React学习笔记(一)

1.全局安装React

1
$ npm install -g create-react-app

2.创建一个React-app

1
$ create-react-app my-app

3.启动一个简单的React-app

1
2
$ cd my-app
$ npm start

使用浏览器访问http://localhost:3000/

为什么是 $ npm start
因为package.json里面有这么一段配置信息:

1
2
3
4
5
6
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}

OK,我现在还不是很看的懂,但是基本可以猜测build就是发布,test就是测试。

4.Hello World

修改/gallery/src/index.js

1
2
3
4
5
6
7
8
9
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

//将以下内容替换以上内容

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

OK,页面自动更新了。

5.无需npm安装使用React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

</script>
</body>
</html>

注意关键的一句话<script type="text/babel">

HTML file 下载

那么就先到这里吧,React之旅启程。

链接

Sublime Text 3 插件安装建议

  1. ReactJS
  2. React Templates
  3. React IDE

安装步骤可以参考Sublime Text 3 安装Vue语法高亮插件

来自原单位的同事的鼓励

很高兴可以收到这样的鼓励,我会努力。

  • 卡部损失一名悍将啊
  • 有缘相识,加油粽子。人生还是非常有趣的
  • 你那么优秀,一定是康庄大道
# React

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×