从零一起学react(1)---HelloWorld

最新推荐文章于 2024-05-24 09:15:22 发布

buppt

最新推荐文章于 2024-05-24 09:15:22 发布

阅读量935

点赞数

分类专栏： react 从零一起学react 文章标签： react 从零开始 HelloWorld

本文链接：https://blog.csdn.net/buppt/article/details/78188690

版权

react 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

从零一起学react

8 篇文章 1 订阅

订阅专栏

前言

最近刚开始学习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()以后应该会讲到，第一篇《从零一起学》先到这里吧～

buppt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零一起学react(1)---HelloWorld

前言最近刚开始学习react，就打算从一个初学者的角度，从零开始边学边写，记录一下react的学习过程，如果能给其他人带来方便，不胜荣幸。安装相信大家都看过官网的安装介绍，开始我是使用的Create React App，用react官网上的话说: Create React App 是开始构建新的 React 单页面应用的最佳途径。它可以帮你配置开发环境，以便你可以使用最新的 JavaScr
复制链接

扫一扫