Installation 安装
*React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
React能应用于很多项目中,并且具有非凡的灵活性. 你可以不用代码的重构,由现有的代码库逐步创建新的代码来创建新的app.
*Here are a couple of ways to get started:
Try React
Create a New App
Add React to an Existing App
下面是一组正确的打开姿势:
直接写react
创建一个reactApp
在现有的app上继续写
Trying Out React 尝试react
If you’re just interested in playing around with React, you can use CodePen.Try starting from this Hello World example code. You don’t need to install anything; you can just modify the code and see if it works.
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.
If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
如果你只是玩儿玩儿react,你可以直接使用codepen.
从hello world 代码尝试开始.
什么都不需要安装
你就只需要修改代码,然后观察是否有效果.
要是你更喜欢你自己的文本编辑器的话,你可以下载这个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>
</body>
</html>用浏览器打开本地的文件系统,
这样会使代码变慢,所以别在生产环境中使用
如果你想使用完整的app,有两种react的比较流行的方法:
1.创建app
2.或者使用现有的app
Creating a New Application
Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
创建一个react单页面应用的最佳方式是 Create react app
它设置开发环境,让你可以用这个最新的javascript ,提供了很好的开发经验,优化生产app,你的node 版本要大于6.
npm install -g create-react-app
create-react-app my-app
cd my-app
npm startCreate React App doesn’t handle backend logic or databases;
it just creates a frontend build pipeline, so you can use it with any backend you want.
It uses build tools like Babel and webpack under the hood,
but works with zero configuration.
Create React App 不会操作后台逻辑和数据库.
只是前端的建造方法,可以和任何后端一起搭配使用,在这个层面上,它使用建造工具:bable和webpack.
When you’re ready to deploy to production,
running npm run build will create an optimized build of your app in the build folder.
You can learn more about Create React App from its README and the User Guide.
当你准备好部署项目的时候,运行npm构建一个优化的app,在你的文件夹里面
你可以从readme和user guide里面学到更多关于创建app的知识.
Adding React to an Existing Application
You don’t need to rewrite your app to start using React.
你不需要重写app来使用react
We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
建议先把react加入到app的一小部分,比如一个个人的小装置,这样你会知道是否符合你的医院了.
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:
虽然没有构建通道,react也可以使用,但是我们还是建议你设置好他们,因为这样的效率更高,现代化的构建通道包括:
*A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
*npm或者Yarm包管理工具,利用它你可以对大量的第三方包的生态系统进行管理,尽快对它们安装和更新.
A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time.
*打包工具,比如webpack或者browserify . 它允许您编写模块化的代码,并将其打包成小的包,来优化加载时间.
A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.
*像bable这样的编译器,它允许您在旧版的浏览器里编写最新的javaScript代码.
Installing React 安装react
Note:
Once installed, we strongly recommend setting up a production build process to ensure you’re using the fast version of React in production.
小贴士:
一旦安装成功之后,强烈建议设置生产构建程序,确保使用的react版本是快速的版本
We recommend using Yarn or npm for managing front-end dependencies. If you’re new to package managers, the Yarn documentation is a good place to get started.
建议用npm 或者Yarn来管理前端的依赖.要是你对包管理工具不熟悉,Yarn文档是个不错的选择.
To install React with Yarn, run:
用Yarn安装并使用React
yarn init
yarn add react react-domTo install React with npm, run:
用Yarn安装并使用React
npm init
npm install --save react react-domBoth Yarn and npm download packages from the npm registry.
使用npm和yarn都可以从npm注册表下载包.
Enabling ES6 and JSX 让ES6 和 JSX 可用
We recommend using React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.
我们建议使用Bable来编译ES6 和JSX.ES6拥有Javascript最新的特性.JSX很好的用在react上,是Javascript的延展.
The Babel setup instructions explain how to configure Babel in many different build environments. Make sure you install babel-preset-react and babel-preset-env and enable them in your .babelrc configuration, and you’re good to go.
Babel setup instructions告诉我们在不同的环境中怎么样构建Bable.确保你安装了babel-preset-react 和babel-preset-env
,并且在 你的 babelrc configuration 里面哦,这样才能好好的啊.
Hello World with ES6 and JSX
We recommend using a bundler like webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.
建议使用Webpack和Browserify这样的打包工具, 它允许您编写模块化的代码,并将其打包成小的包,来优化加载时间.
The smallest React example looks like this:
最小的React是这样子的:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
This code renders into a DOM element with the id of root, so you need
这段代码渲染id为root 的DOM 的元素,所以在HTML 文件里有这样一行代码,
Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.
类似,你可以渲染其他的 Javascript UI 库,
Learn more about integrating React with existing code.
更多集成代码请点击:
Development and Production Versions开发和生产版本
By default, React includes many helpful warnings. These warnings are very useful in development.
react有许多有用的警告,对开发很有用的警告.
However, they make the development version of React larger and slower so you should use the production version when you deploy the app.
然而,react的开发版本庞大而且缓慢.所以用生产版本部署app那是极好的啦!
Learn how to tell if your website is serving the right version of React, and how to configure the production build process most efficiently
了解你的网站是否提供了正确的react版本,怎样有效的配置生产版本程序.how to tell
Using a CDN
If you don’t want to use npm to manage client packages, the react and react-dom npm packages also provide single-file distributions in umd folders, which are hosted on a CDN:
要是你想用npm 来管理客户端包,在你的UMD 文件夹里,应该有独立文件react 和react-dom 托管在CDN 上.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
上面的版本只用于开发,不适用于生产, 压缩和优化的生产版本的React在下面:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>To load a specific version of react and react-dom, replace 16 with the version number.
要加载特定版本的反应和响应DOM，请替换版本号为16的react。
If you use Bower, React is available via the react package.
要是你使用浏览器,可以通过react 包来使用react.
Why the crossorigin Attribute?
什么是crossorigin 属性
If you serve React from a CDN, we recommend to keep the crossorigin attribute set:
要是你从CDN 加载React ,建议保证crossorigin属性:
<script crossorigin src="..."></script>
We also recommend to verify that the CDN you are using sets the Access-Control-Allow-Origin: * HTTP header:
同时建议,你是用的CDN ,访问控制允许起源 :* http header
This enables a better error handling experience in React 16 and later.
这使得react16和以后版本的错误处理体验会更好。
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
