我们将使用 react-scripts 从一个空目录设置所有内容。 react-scripts 最多支持中型项目。
create-react-app 脚本
当我开始学习 ReactJS 时，文档建议使用 create-react-app。 创建反应应用程序是设置我们的应用程序的快速方法。 使用反应脚本进行设置还有更多内容。
要求
您熟悉 Yarn 和 NPM 包管理器以及 NodeJS。
您应该安装 NodeJS、NPM 和 Yarn。
- 安装 NodeJS LTS 版本 https://nodejs.org/en/。
- 运行 npm --version 以验证安装是否成功。
- 运行 npm install -g yarn。
- 运行纱线——版本。
最初设定
我执行了以下步骤来设置项目：
- 创建一个空目录，然后随意命名。
- 创建文件 package.json。
- 在您创建的目录中运行 yarn install 。
- 在里面创建一个公共目录和 index.html。
- 在里面创建一个 src 目录和一个 index.js。
package.json 内容。
{ "name": "initial-setup", "version": "0.1.0", "description": "create-react-app initial setup", "scripts": { "start": "react-scripts start" }, "devDependencies": { "react-scripts": "5.0.1" }, "dependencies": { "react": "18.1.0", "react-dom": "18.1.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }}index.js 内容：
import { createRoot } from 'react-dom/client';function App() { return <h1>React App Setup</h1>}createRoot(document.getElementById('root')).render(<App />);带有源代码的完整项目设置在这里。
多根设置
multi-root 是多次调用 create root 函数的花哨名称。
以下是创建多根应用程序的一组更改：
diff --git a/public/index.html b/public/index.htmlindex 6672ed0..b5ed2a2 100644--- a/public/index.html+++ b/public/index.html@@ -4,6 +4,8 @@ <title>React App Setup</title> </head> <body>- <div id="root"></div>+ <div id="foo"></div>+ <div id="bar"></div>+ <div id="baz"></div> </body> </html>diff --git a/src/index.js b/src/index.jsindex 5521a9e..9bac9ba 100644--- a/src/index.js+++ b/src/index.js@@ -1,7 +1,17 @@ import { createRoot } from 'react-dom/client';-function App() {- return <h1>React App Setup</h1>+function Foo() {+ return <h1>Foo Root</h1> }-createRoot(document.getElementById('root')).render(<App />);+function Bar() {+ return <h1>Bar</h1>+}++function Baz() {+ return <h1>Baz</h1>+}++createRoot(document.getElementById('foo')).render(<Foo />);+createRoot(document.getElementById('bar')).render(<Bar />);+createRoot(document.getElementById('baz')).render(<Baz />);理解术语多根允许我们添加对现有 Web 应用程序的响应。 想象一下现有的 Web 应用程序。 该应用程序正在使用模板引擎或其他东西。 我们不想重写整个应用程序。 我们做什么？ 创建一个带有 ID 的 div 作为根并挂载一个反应树。
在嵌套 HTML 结构中呈现反应树的示例：
HTML：
<!DOCTYPE html><html lang="en"><head> <title>React App Setup</title></head><body> <div id="foo"></div> <div id="bar"></div> <div id="baz"></div> <article> <h1>An existing title</h1> <p>An existing paragraph</p> <div> <div> <div> <h2>A form created by react lives here</h2> <!-- react can live anywhere inside our app --> <div id="nested-root"></div> </div> </div> </div> </article></body></html>JS:
import { createRoot } from 'react-dom/client';function Foo() { return <h1>Foo Root</h1>}function Bar() { return <h1>Bar</h1>}function Baz() { return <h1>Baz</h1>}// deeply nested authentication form// that lives with the regular htmlfunction Form() { return ( <form action="#"> <label htmlFor="username"> Username: <input type="text" id="username" /> </label> <label htmlFor="" id="password"> Password: <input type="password" id="password" /> </label> <button type="submit">Submit</button> </form> )}createRoot(document.getElementById('foo')).render(<Foo />);createRoot(document.getElementById('bar')).render(<Bar />);createRoot(document.getElementById('baz')).render(<Baz />);createRoot(document.getElementById('nested-root')).render(<Form />);react-scripts 的优点
反应脚本支持我们需要的每一个。 这两个要求是 src 和 public 文件夹。 如果我们尝试启动 dev-server，我们将收到一条消息，指出 public 和 src 文件夹丢失。
如果你喜欢文章，你知道该怎么做
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除