好久没来简书写博客了.
Hello world
Hello World
The smallest React example looks like this:
下面是一个react最简单的例子
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
It displays a heading saying “Hello, world!” on the page.
这段代码展示了一个页面上内容为“Hello world”的标题
Try it on CodePen
在CodePen上尝试一下
Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.
点击上面这个链接去打开一个在线编辑器,感受一下随意的改变一些东西和看一下它们是怎么影响输出的。在这个教程里面很多页面都有像这样可编辑的例子
如何阅读此教程
How to Read This Guide
In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
在这个教程,我们将检查react内置的模块,元素和组件。一旦你精通了它们,你可以利用一些可复用的片段创造创造复杂的app
Tip
This guide is designed for people who prefer learning concepts step by step. If you prefer to learn by doing, check out our practical tutorial. You might find this guide and the tutorial complementary to each other.
提示
这个是给那些想一步步学习概念的人设计的,如果你更想去学习如何使用,可以查看我们的实操教程,你可能会发现这个教程和那个教程是相互补充的
This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you’re reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
这是一步步指导学习react概念的第一章节。你可以在侧边栏上面找到每一章的导航。如果你在移动设备上阅读,你可以点击屏幕右下角的按钮唤醒导航
Every chapter in this guide builds on the knowledge introduced in earlier chapters. You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar. For example, “Introducing JSX” is the next chapter after this one.
这个教程内的每一章的知识都是基于之前的章节,你可以通过侧边栏中的Main Concepts来学习大多数关于react的知识。例如,introducing JSX 是下一章
Knowledge Level Assumptions
知识水平前提要求
React is a JavaScript library, and so we’ll assume you have a basic understanding of the JavaScript language. If you don’t feel very confident, we recommend going through a JavaScript tutorial to check your knowledge level and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won’t have to feel like you’re learning both React and JavaScript at the same time.
react是一个js库,我们将假设你对js语言有一定基础的了解。如果你并不确定,我们建议你通过js指导去检查你的知识水平,是你有能力独自阅读此教程,它可能会花你30分钟到1个小时,但是好处就是你不会觉得你在同时学习js和react
Note
This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, these three points should get you most of the way.
提示
这个教程里的例子偶尔会使用新的js语法,如果你在过去几年内没有在实际工作中用到js,这三点应该能让你理解大部分的方式
Let’s Get Started!
让我们开始吧
Keep scrolling down, and you’ll find the link to the next chapter of this guide right before the website footer.
向下滚动,你将发现这个教程的下一章的链接在页脚的右边