创建react应用程序
A chef knows that two different cooks, one more skilled and one less skilled, given the same ingredients and instructions will produce two dishes that are very different.
一位厨师知道，如果使用相同的食材和说明，则两名不同的厨师，一名技能更高的一名和技能更低的一名，将产生两种截然不同的菜肴。
The less skilled cook may have followed each step carefully, measured each ingredient exactly, and still finds themselves flabbergasted that their dish isn’t as good as their counterpart’s.
不太熟练的厨师可能会仔细地执行每个步骤，准确地测量每种成分，但仍然发现自己不满意自己的菜。
The skilled cook knows that it takes more than the right tools and good instructions to create something amazing. Understanding how and why different ingredients react to each other and to the cooking process will change how you cook them and the result, even within the confines of a recipe or a set of instructions.
熟练的厨师知道，要制作出令人赞叹的产品，不仅仅需要正确的工具和良好的指导。 即使在配方或一组说明的范围内，了解不同成分如何以及为什么彼此之间以及在烹饪过程中发生React，将会改变您烹饪它们的方式和结果。
这与React有什么关系？ (What does this have to do with React?)
As a new developer, I rely on several tools, many of which I don’t have a strong understanding of how or why they work. This is not necessarily a bad thing, it means that I can create apps that do cool things.
作为一个新开发人员，我依赖于几种工具，其中许多我对它们的工作方式或原因没有很深入的了解。 这并不一定是一件坏事，这意味着我可以创建能够完成出色工作的应用程序。
I want to create apps that do really cool things, so my goal is to gain a better understanding of why and how some of these tools work.
我想创建的应用程序，你真的很酷的东西，所以我的目标是获得的原因，并更好地理解如何一些这些工具的工作。
I am starting with a tool I use for almost every project I’ve created recently, create-react-app.
我将从一个我最近create-react-app几乎所有项目都使用的工具create-react-app 。
Let’s get cooking.
让我们去做饭。
从头开始创建React应用程序：(Create a React App from Scratch:)
Find the completed guide repository here and feel free to fork and clone:)
在此处找到完整的指南存储库，可以随意进行分叉和克隆：)
In your terminal, create a directory for your app and cd into it. I’m calling my directory
scratch-react.在您的终端中，为您的应用程序创建一个目录，然后将其安装到其中。 我称我的目录为
scratch-react。
mkdir scratch-react
cd scratch-reactRun
init -yto create apackage.json.运行
init -y创建package.json。- Next, install the packages we will use. This is a long list, and after installing them we will see how everything connects. 接下来，安装我们将使用的软件包。 这是一个很长的列表，安装它们后，我们将看到一切之间的连接方式。
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-pluginUsing the flag --save-dev allows us to differentiate between development and live modes.
使用标志--save-dev可以使我们区分开发模式和实时模式。
After this runs you will see the familiar node_modules and package-lock.json files appear in your file tree.
运行之后，您会看到熟悉的node_modules和package-lock.json文件出现在文件树中。
Create an
index.htmlfile and put some simple HTML to get started.创建一个
index.html文件，并放入一些简单HTML入门。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" conent="ie=edge">
<title>Scratch React App</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>Your React App will render to the <div> with the root id.
您的React App将使用root ID渲染到<div> 。
The <script> pointing at app.js is what webpack and babel are going to build.
指向app.js的<script>是webpack和babel将要构建的。
{
"name": "scratch-react",
"version": "1.0.0",
"description": "",
"main": ".index.js",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1",
"create": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}Add babel and webpack to
package.json.将babel和webpack添加到
package.json。
Here, we add the babel and scripts sections where we are calling on some of the packages we installed earlier that translate our app for us (babel) and start our app for us (webpack)
在这里，我们添加了babel和scripts部分，在其中调用我们之前安装的一些软件包，这些软件包可以为我们翻译应用程序(Babel)并为我们启动应用程序(webpack)
Create
index.js, anindex.css,App.jsand.gitignorefiles.创建
index.js，index.css，App.js和.gitignore文件。
touch index.js
touch index.css
touch App.js
touch .gitignore
Now is a great time to start organizing your app files. Create directories to structure it any way you like. For this guide, I will create an src folder to hold my index.html , components, and CSS files.
现在是开始组织应用程序文件的好时机。 创建目录以任意方式构建它。 对于本指南，我将创建一个src文件夹来保存index.html ，components和CSS文件。
- Build out some basic structure in each of these new files. 在每个这些新文件中构建一些基本结构。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));Import React and ReactDom in the index.js file as well as index.css and the App.js component.
在index.js文件以及index.css和App.js组件中导入React和ReactDom 。
Render <App/>by the root id.
通过root ID渲染<App/> 。
import React from 'react';
function App() {
return (
<div>Hello World!</div>
);
}
export default App;This basic App.js component will print “Hello World” to the browser once we get everything connected.
一旦我们一切都连接好，这个基本的App.js组件就会在浏览器中显示“ Hello World”。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Set a baseline in your CSS file to ensure all browsers start from a clean slate.
在CSS文件中设置基准，以确保所有浏览器均从干净的状态启动。
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*Check out this great information about .gitignore in general and in React apps here.
在此处和React应用程序中查看有关.gitignore重要信息。
Or, feel free to copy from this code snippet.
或者，可以随时从此代码段复制。
In order to compile into an App.js file, create in your main folder a file,
webpack.config.jsand add the following to the new file.为了编译成一个App.js文件，在主文件夹中创建一个文件，
webpack.config.js并添加以下到新文件。
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.(js)$/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}Set a path and webpack variables.
设置路径和webpack变量。
In module.exports, point entry at your index.js file. I organized my app to include a src file. If you didn’t, be sure line 5 and 26 point to the correct place.
在module.exports ，将条目指向index.js文件。 我组织了我的应用程序以包含一个src文件。 如果没有，请确保第5和26指向正确的位置。
module: rules: finds JSX files and uses babel-loader on them, as well as teaching your app how to view CSS and style.
module: rules:查找JSX文件并在文件上使用babel-loader ，并教您的应用程序如何查看CSS和样式。
Run npm run create and after it runs you should see something like this in your terminal.
运行npm run create ， npm run create之后，您应该在终端中看到类似的内容。
Lastly, run
npm startand say最后，运行
npm start并说
I want to finish with a video from a great American chef and teacher, Julia Child. This video meant a lot to me when I was learning to cook, and I still find inspiration from it as I learn to code.
我想结束一段美国著名厨师兼老师Julia·柴德(Julia Child)的视频。 当我学习烹饪时，这段视频对我意义重大，在学习编码的同时，我仍然从中得到启发。
Find the Github repository for this guide here.
在此处找到本指南的Github存储库。
Contact me at joshuagauthreaux@gmail.com or through my website, joshgotro.com.
通过joshuagauthreaux@gmail.com或通过我的网站joshgotro.com与我联系。
As always, thank you for reading and be well!
与往常一样，感谢您的阅读并身体健康！
创建react应用程序
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
