前言
最近刚开始学习react,就打算从一个初学者的角度,从零开始边学边写,记录一下react的学习过程,如果能给其他人带来方便,不胜荣幸。
安装
相信大家都看过官网的安装介绍,开始我是使用的Create React App,用react官网上的话说:
Create React App 是开始构建新的 React 单页面应用的最佳途径。 它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用。代码如下:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
然而安装完生成的这些都是干什么用的 =-= 初学者只是想按照国际惯例先写一个Hello World而已。安装的这个文件夹先这么放着吧,以后应该会用到。
HelloWorld
所以还是另建一个文件夹,点击这里进入facebook react下载页面。2017年9月26号更新了react v16.0.0,把react.development.js和react-dom.development.js下载到所在目录,自行通过src引入这两个文件。如果想使用老版,就下载下面v15.6.1版本的react.js和react-dom.js文件,通过src引入。
先把HelloWorld代码贴上:
<body>
<div id="test"></div>
<script src="./react/react.development.js"></script>
<script src="./react/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('test')
);
</script>
</body>
这里还引入了一个CDN。babel是一个js编译工具,可以把一种JS编译成另一种JS,支持JSX、JSPM、Webpack等。而browser.js可以让浏览器直接编译JSX。所以敲入上面的代码,就可以在浏览器中显示HelloWorld了。
初识react
1.JSX
先看一段代码:
const h1 = <h1>Hello world</h1>;
这个看起来又像JS又像HTML的代码就叫JSX。
2.JSX元素
再来看上面那行代码
const h1 = <h1>Hello world</h1>;
这就是将一个JSX元素储存到了一个变量中。
下面这个例子是把几个JSX元素储存到了一个object中:
const temp = {
teacher: <li>张三</li>,
monitor: <li>李四</li>,
student: <li>王五</li>,
};
JSX元素的属性和HTML元素相似,但是class属性在JSX中需使用className如:
const temp=<a id="aid" className="blog" href="https://buppt.github.io">我的博客</a>;
你如果想分成几行,写的更好看一些,需要用一个小括号把JSX元素扩起来
const temp=(
<a id="aid" href="https://buppt.github.io">
<h1>
我的博客
</h1>
</a>
);
还有一点就是JSX元素最外层只能有一个元素,如果有多个你需要用一个div或其他标签把他们包含起来。
这样是不可以的:
const temp = (
<p>我在最外层.</p>
<p>我也在最外层.</p>
);
这样才可以:
const temp = (
<div>
<p>我不在最外层.</p>
<p>我不在最外层.</p>
</div>
);
3.让JSX元素显示在浏览器中
就像上面的HelloWorld,使用ReactDOM.render(JSX元素,id)可以将JSX元素显示在浏览器上。
const testList=(<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>);
ReactDOM.render(testList,document.getElementById('test'));
具体ReactDOM.render()以后应该会讲到,第一篇《从零一起学》先到这里吧~