前端学习周记（3）——react.js

最新推荐文章于 2023-11-26 11:00:45 发布

Karen_Yu_

最新推荐文章于 2023-11-26 11:00:45 发布

阅读量968

点赞数

本文链接：https://blog.csdn.net/Karen_Yu_/article/details/80386373

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

刚刚在找怎么装，然后又看到一个 Hello World!，忍不住又粘到这里了（我的终极目标就是精通各种语言输出Hello World!略略略）

官网链接 https://reactjs.org/

大家可以通过官网下载最新版本（另外官网上也有一些有趣的小程序……大家可以去调戏，是可以直接改代码然后看输出的，反正我是调戏了小半个晚上……）

顺便难过一下，这两天英汉互译做了好多，现在看到英文网站只想(╯‵□′)╯︵┻━┻，天哪我的六级怕不是要凉凉

是真的不太明白官网的说法……

-----------------------------------------------------------------------------------

采取逐句翻译的方法，如果有错，望大家不吝珠玉，感激不尽

出于私心，希望回头可以直接把翻译好的私给小学弟小学妹看，就采取了这种方式

-----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
  	<div>
    	<h2>Try React</h2>
		<h2>测试React</h2>
	
		<p>Try React online or set up your local development environment.</p>
		<p>在线测试React或在本地配置环境</p>
	</div>
	<div>
		<h3>Online</h3>
		<h3>在线</h3>
		<p>If you’re just interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen or CodeSandbox.</p>
		<p>如果您仅仅是对React有兴趣，您可以选择在线测试。在CodePen 或 CodeSandbox上测试一个Hello World（补充：无须安装）</p>
	</div>
	<div>
		<h3>Minimal HTML Template</h3>
		<h3>最小的HTML模板</h3>
		<p>If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don’t use it in production.</p>
		<p>如果您更喜欢用您自己的文字编辑器，您也可以下载这个HTML文件，编辑它，并在浏览器中的本地文件系统中打开它。它执行运行时代码转换十分缓慢，所以不要在产品中使用它。</p>
	</div>
	<br />
	<div>
		<h2>Next Steps</h2>
		<h2>下一步</h2>
		<h3>Quick Start</h3>
		<h3>快速开始</h3>
		<ul>
			<li>Head over to the Quick Start section for a step-by-step introduction to React concepts.</li>
			<li>前往快速入门部分，我们将一步一步地介绍react的概念。</li>
			<li>Try the Tutorial for a hands-on practical example.</li>
			<li>尝试本教程来学习一个实际的例子。</li>
		</ul>
	</div>
	<div>
		<h3>Complete Development Environment</h3>
		<h3>完整的开发环境</h3>
		<p>The lightweight solutions above are the best fit if you are new to React or just experimenting.</p>
		<p>如果您是react的新手或只是测试,以上的轻量级解决方案是最适合您的。</p>
		<p>When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install.</p>
		<p>当您准备好构建您的第一个应用程序时，请查看下面的安装指南。这些设置是为了让您在开发过程中获得良好的开发经验，并准备好进行生产。其中包括内置的linting、测试和优化;但是，它们需要更多的时间和磁盘空间来设置和安装。</p>
		<ul>
			<li>Add React to a New App: Create a new app with a fully-featured starter kit.</li>
			<li>添加对一个新的react应用:创建一个全新的应用程序和一个功能齐全的初学者工具包。</li>
			<li>Add React to an Existing App: Add React to a build system or a larger app.</li>
			<li>将react添加到已存在应用中:添加对构建系统添加react一边构建系统或一个更大的应用</li>
		</ul>
	</div>
	<br />
	<div>
		<h2>网址整理</h2>
		<h3>CodePen</h3>
		<a href="https://codepen.io/pen?&editors=0010">CodePen</a>
		<h3>CodeSandbox</h3>
		<a href="https://codesandbox.io/s/new">CodeSandbox</a>
		<h3>download this HTML file</h3>
		<a href="https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html">download this HTML file</a>
		<h3>Quick Start</h3>
		<a href="https://reactjs.org/docs/hello-world.html">Quick Start</a>
		<h3>Tutorial</h3>
		<a href="https://reactjs.org/tutorial/tutorial.html">Tutorial</a>
		<h3>Add React to a New App</h3>
		<a href="https://reactjs.org/docs/add-react-to-a-new-app.html">Add React to a New App</a>
		<h3>Add React to an Existing App</h3>
		<a href="https://reactjs.org/docs/add-react-to-an-existing-app.html">Add React to an Existing App</a>
		</div>
  </body>
</html>

有时间会接着翻译剩下内容的（这绝对不是挖坑然后不填……）

附录上面提到的下载的文档：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.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>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

再附录官方文档 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript

竟然有中文版的，五星好评……

JavaScript 是一种面向对象的动态语言，它包含类型、运算符、标准内置（ built-in）对象和方法。它的语法来源于 Java 和 C，所以这两种语言的许多语法特性同样适用于 JavaScript。需要注意的一个主要区别是 JavaScript 不支持类，类这一概念在 JavaScript 通过对象原型（object prototype）得到延续（有关 ES6 类的内容参考这里 Classes ）。

——摘自上述文档（说句闲话，之前听到一个笑话：甲：Java和JavaScript有什么关系？乙：雷锋和雷峰塔有关系吗？），这解答了我的一个疑惑，为啥感觉语法都似曾相识。然后上周写周计划的时候还像模像样写看类……真的是丢人丢到家了。

接着引用：

对象

JavaScript 中的对象可以简单理解成“名称-值”对，不难联想 JavaScript 中的对象与下面这些概念类似：

Python 中的字典
Perl 和 Ruby 中的散列（哈希）
C/C++ 中的散列表
Java 中的 HashMap
PHP 中的关联数组

这样的数据结构设计合理，能应付各类复杂需求，所以被各类编程语言广泛采用。正因为 JavaScript 中的一切（除了核心类型，core object）都是对象，所以 JavaScript 程序必然与大量的散列表查找操作有着千丝万缕的联系，而散列表擅长的正是高速查找。

“名称”部分是一个 JavaScript 字符串，“值”部分可以是任何 JavaScript 的数据类型——包括对象。这使用户可以根据具体需求，创建出相当复杂的数据结构。

有两种简单方法可以创建一个空对象：

var obj = new Object();

和：

var obj = {};

这两种方法在语义上是相同的。第二种更方便的方法叫作“对象字面量（object literal）”法。这种也是 JSON 格式的核心语法，一般我们优先选择第二种方法。

“对象字面量”也可以用来在对象实例中定义一个对象：

var obj = {
    name: "Carrot",
    "for": "Max",
    details: {
        color: "orange",
        size: 12
    }
}

对象的属性可以通过链式（chain）表示方法进行访问：

obj.details.color; // orange
obj["details"]["size"]; // 12

下面的例子创建了一个对象原型，Person，和这个原型的实例，You。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义一个对象
var You = new Person("You", 24); 
// 我们创建了一个新的 Person，名称是 "You" 
// ("You" 是第一个参数, 24 是第二个参数..)

完成创建后，对象属性可以通过如下两种方式进行赋值和访问：

obj.name = "Simon"
var name = obj.name;

和：

obj["name"] = "Simon";
var name = obj["name"];

这两种方法在语义上也是相同的。第二种方法的优点在于属性的名称被看作一个字符串，这就意味着它可以在运行时被计算，缺点在于这样的代码有可能无法在后期被解释器优化。它也可以被用来访问某些以预留关键字作为名称的属性的值：

obj.for = "Simon"; // 语法错误，因为 for 是一个预留关键字
obj["for"] = "Simon"; // 工作正常

注意：从 EcmaScript 5 开始，预留关键字可以作为对象的属性名（reserved words may be used as object property names "in the buff"）。这意味着当定义对象字面量时不需要用双引号了。参见 ES5 Spec.

关于对象和原型的详情参见： Object.prototype.

--------------------今天先到这里啦，室友生日，要赶回去庆生------------------------

那个，说个笑话，我在官网摸了一周，玩得很开心，不过还没发现怎么下载……

冒昧猜测是否加上几句话就算好了？

我点了一下尝试一下，然后弹出的页面显示如下图：

猜测是否只要在<head></head>里加几句

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

这个就算是好了？

当然估计肯定不是这样，不然干嘛非让我上官网下载最新版本

参考博客： https://www.cnblogs.com/jerryyj/p/react01.html

这个博客中所说的最新版和稳定版就是上面画出来的两个，然后依照博客指令，我一路安装完了（就是疯狂next）……

安装nodehttps://www.runoob.com/nodejs/nodejs-install-setup.html

不晓得为啥，这个看起来就像是简单加几句话的事……

装了一下午node，果然难装

----------------写作业去了，大物作业还没打印，溜了-------------------

Karen_Yu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习周记（3）——react.js

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Hello React!&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/react/15.4.2/rea
复制链接

扫一扫