Plötzlich ist das Bauen einer Umgebung so mühsam und schwach wie das morgendliche Rasieren. Wenn Sie diesen Artikel lesen, können Sie möglicherweise keine Umgebung erstellen.
Ich höre oft von Mitgliedern des Unternehmens, dass sie nicht so gut darin sind, eine Umgebung aufzubauen wie ein Yankee, der in einem Supermarkt rumhängt. Ich denke, diese erste Hürde beim Aufbau einer Umgebung behindert kreatives Handeln! Ich bin zuversichtlich, dass in dieser Welt mehr Dienste geschaffen werden, wenn wir uns die Mühe machen, eine Umgebung aufzubauen! Daher werden wir dieses Mal ein Konstruktionshandbuch für die Umgebung veröffentlichen, um einen Dienst zu erstellen, der "Rails als API-Server verwendet" und "mit React zeichnet"!
――Ich benutze einen Mac, weil er modisch aussieht! ――Seit ich die Programmierschule abgeschlossen habe, möchte ich eine persönliche App erstellen! ――Ich möchte ein modernes Javascript-Framework namens React.js lernen und etwas bewirken! ――Ich möchte die Interaktion zwischen Rails und React locker mit einer Methode koppeln, bei der Gem nicht verwendet wird, z. B. React-Rails! --Docker? Was ist es lecker? (Dieser Artikel erklärt Docker nicht)
| Name | Erläuterung |
|---|---|
| Ruby | Ich weiß es nicht |
| Rails | Ich weiß es nicht |
| MySQL | Ich weiß es nicht |
| brew | Paketverwaltung (hauptsächlich serverseitig) |
| yarn | Paketverwaltung (hauptsächlich Vorderseite) |
Schienen neuer App-Name-–skip-turbolinks --webpack=react --database=mysql --api
Es wird gemunkelt, dass der Wert eines Rails-Ingenieurs davon abhängt, wie oft Sie im Leben diesen Befehl "Rails New" ausgeführt haben. Übrigens können Sie die Optionen bei Bedarf neu schreiben.
Webpacker ist ein Modul-Bundler, der standardmäßig mit Rails geliefert wird und ein Wrapper für Webpack ist. Ein Bündler ist eine Person, die bündelt. Es ist ein Typ, der Dateien in verschiedenen Formaten wie HTML, CSS und JS bündelt.
Ein Rapper ist übrigens keine Person, die auf den Reim tritt. Es ist ein Rapper wie Saran Wrap. Es bedeutet "Wrap". Webpacker ist ein Wrapper für Webpack, da er Webpack intern aufruft.
Übrigens, wenn Sie sich für das Frontend interessieren, sollten Sie einige Kenntnisse über Webpack haben. Es ist GUT, wenn Sie sich an ein Set mit Wörtern wie "Babel" und "ES6" erinnern!
rails webpacker:install
rails webpacker:install:react
Dieses Mal werde ich MySQL für DB verwenden. Ich benutze PostgreSQL für meine tägliche Arbeit, aber ich denke, diejenigen, die die Programmierschule abgeschlossen haben, sind an MySQL gewöhnt. Ich bin der Meinung, dass viele neue Produkt-DB-Auswahlen diejenigen verwenden, die der Site vertraut sind. Es tut mir leid, wenn es anders ist. Abgesehen davon interessiere ich mich persönlich für NoSQLs MongoDB. Der Grund ist: "Es sieht aus wie ein cooler Ingenieur, wenn Sie es irgendwie wissen."
Dieses Mal werde ich MySQL über einen Paketmanager namens Brew installieren
brew install mysql
Erstellen Sie nach der Installation von MySQL einen Benutzer zur Verwendung mit dieser App. Ich werde jeden Befehl weglassen, da es anscheinend nicht notwendig ist, ihn im Detail zu erklären.
mysql -u root -p
create user'username '@' localhost 'identifiziert durch' password ';
select User,Host from mysql.user;
Gewähren Sie alles auf *. * für '[Benutzername]' @ 'localhost';
Verknüpfen Sie den erstellten Benutzer nach dem Erstellen des Benutzers mit Rails. In der Regel werden die Rails DB-Einstellungen in database.yml beschrieben.
default: &default
adapter: mysql2
encoding: utf8mb4
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: <%= ENV['DATABASE_USERNAME'] %>
password: <%= ENV['DATABASE_PASSWORD'] %>
host: <%= ENV['DATABASE_HOST'] %>
development:
<<: *default
database: app_name_development
test:
<<: *default
database: app_name_test
production:
<<: *default
database: app_name_production
username: <%= ENV['APP_NAME_DATABASE_USERNAME'] %>
password: <%= ENV['APP_NAME_DATABASE_PASSWORD'] %>
Bitte ersetzen Sie "app_name_ ○○" durch den App-Namen, wenn Rails new erstellt wurde. Da der Benutzername und das Passwort sichtbar sind, wenn Sie sie auf GitHub veröffentlichen Es wird empfohlen, es mit Edelstein "dotenv" usw. zu verstecken. Übrigens ist es bedeutungslos, es sei denn, Sie entfernen die von dotenv erstellte ".env" -Datei aus der Git-Verwaltung. Fügen Sie also ".env" zu ".gitignore" hinzu, sobald Sie sie erstellt haben! Wenn Sie nicht wissen, wovon Sie sprechen, lesen Sie "dotenv Umgebungsvariablen"! "Finden, was Sie nicht verstehen" ist die Basis eines Ingenieurs! Ich bin der Meinung, dass es eine Abkürzung für Wachstum ist, wie tief diese "Untersuchung" durchgeführt werden kann.
rake db:create
rails s
Der Umweltbau wird noch etwas länger dauern. Es geht schon um die 6. Station. Ein bisschen mehr.
Ein Webpack-Plugin, das Chunks automatisch aufteilt. Sie können die Dateigröße speichern, müssen dies aber nicht.
const { environment } = require('@rails/webpacker');
environment.splitChunks();
module.exports = environment;
app/views/top/show.html.erb Es bedeutet, auf die Datei mit dem Namen "index" in Javascript / packs / zu verweisen.
<%#Bei Verwendung von Split Chunks%>
<%= javascript_packs_with_chunks_tag 'index' %>
<%#Wenn Sie keine geteilten Stücke verwenden%>
<%= javascript_pack_tag 'index' %>
config/routes.rb
Rails.application.routes.draw do
#Root-Seiteneinstellungen
root "top#show"
end
app/controllers/top_controller.rb
class TopController < ApplicationController
def show
end
end
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Bewerbungstitel</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<div id="root">← Das ist
<%= yield %>
</div>
</body>
</html>
app/javascript/packs/index.jsx Datei, auf die in app / views / top / show.html.erb verwiesen wird Diese Datei ist der Eingang zu React. Asynchrone, Routing-, Statusverwaltungs- usw. Pakete für React werden importiert und festgelegt. Sie werden jedes Paket später installieren.
//Diese Datei ist die allererste Datei, die von Rails View (EntryPoint) aufgerufen wird.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import {
Router,
Route,
Switch,
IndexRoute,
useLocation
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { composeWithDevTools } from 'redux-devtools-extension';
// reducer
import rootReducer from '~/src/reducers/';
// Component
import Top from '~/src/components/tops/';
const middleWares = [thunk];
//Für die Entwicklungsumgebung Einstellungen für die Verwendung von Entwicklungstools
const enhancer = process.env.NODE_ENV === 'development' ?
composeWithDevTools(applyMiddleware(...middleWares)) : applyMiddleware(...middleWares);
const store = createStore(rootReducer, enhancer);
const customHistory = createBrowserHistory();
render(
<Provider store={store}>
<Router history={customHistory}>
<Route render={({ location }) => (
<div>
<Switch location={location}>
<Route exact path='/' component={Top} />
</Switch>
</div>
)}/>
</Router>
</Provider>,
document.getElementById('root')
)
app/javascript/src/components/tops/index.jsx Verwenden Sie eine Datei mit der Erweiterung jsx, um die React-Komponente zu beschreiben. Schreiben Sie HTML in die JS-Datei. Anfangs ist es mir unangenehm, HTML-Tags in JS zu schreiben, aber ich gewöhne mich daran.
import React from 'react';
const Top = () => (
<h1>
<center>Bewerbungstitel</center>
</h1>
)
export default Top;
app/javascript/src/reducers/index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import top from '~/src/modules/tops/';
export default combineReducers({
form: formReducer,
top,
});
Die Zusammenfassung hier wird im Redux-Store gespeichert. Redux ist ein Paket, das den Status zentral verwaltet. Ein Geschäft ist eine Box, in der der Status gespeichert wird. Dies ist das wichtigste Merkmal von Redux. Die Verwendung von Redux ist für die React-Entwicklung nicht unbedingt erforderlich, es ist jedoch besser, es von Anfang an einzubeziehen, da es schwierig wird, den Status zu verwalten, da die Größe des Produkts mit React allein zunimmt. Es muss keine LP oder ein kleines Produkt sein.
Die Verzeichnisstruktur verwendet das Entenmuster. Das Entenmuster ist die Idee, "Aktionstyp", "Aktionsersteller" und "Reduzierer" in einer Datei zu beschreiben. Es ist ein Designkonzept. Es geht nicht darum, etwas zu installieren.
app/javascript/src/modules/tops/index.js
// action-type
const TOP_INITIAL = 'TOP_INITIAL';
// reducer
const initialState = {
top: null,
}
export default function top(state = initialState, action) {
switch (action.type) {
case TOP_INITIAL:
return {
...state,
}
default:
return state
}
}
// action-creator
export const topInitial = () => ({
type: TOP_INITIAL,
});
Normalerweise werden Dateien für jeden "Aktionstyp", "Aktionsersteller" und "Reduzierer" erstellt. Wenn jedoch das Entenmuster enthalten ist, werden sie zu einer Datei zusammengefasst, sodass die Anzahl der Dateien einfach reduziert werden kann. Es wird empfohlen, da es sich um ein Designkonzept handelt, das auch mittelgroßen Produkten standhält. Wenn Sie sich fragen, was ein Aktionstyp ist, lesen Sie Redux Official!
Installieren Sie mit einem Paketmanager namens Garn. In einem ähnlichen Paketmanager gibt es "npm", aber "Garn" ist mit "npm" aufwärtskompatibel. Mit Garn installierte Pakete werden automatisch zu einer Datei mit dem Namen "package.json" direkt unter dem Stammverzeichnis hinzugefügt. Fügen Sie ein Paket mit "Garn Paketnamen hinzufügen" hinzu Entfernen Sie die Verpackung mit "Garn entfernen Paketname".
yarn add redux react-redux react-router-dom redux-devtools-extension redux-form redux-thunk axios @babel/preset-react babel-plugin-root-import
Wenn Sie interessiert sind, "@ reduxjs / toolkit", "@ material-ui / core" Wird auch empfohlen
Wenn Sie React selbst entwickelt haben, sollten Sie dies einmal gedacht haben. "Reagieren relativer Pfad ist in der Regel die Hölle." React neigt dazu, beim Importieren in die Hölle der relativen Pfadspezifikation zu fallen. Es wird empfohlen, "babel-plugin-root-import" einzuschließen, um dies zu verhindern. Tatsächlich ist es in "Garn hinzufügen" in 11. oben heimlich enthalten, sodass die Person, die den Befehl kopiert und ausgeführt hat, bereits in meinem Trick enthalten ist.
Erstellen Sie eine Datei mit dem Namen ".babelrc" und beschreiben Sie dort die Einstellungen. Der Speicherort zum Erstellen der Datei ".babelrc" befindet sich direkt unter dem Stammverzeichnis.
.babelrc
{
"plugins": [
[
"babel-plugin-root-import",
{
"paths": [
{
"rootPathSuffix": "./app/javascript/src",
"rootPathPrefix": "~/src/"
},
]
}
]
]
}
Mit den obigen Einstellungen wird nur die Pfadangabe "./app/javascript/src" festgelegt, sodass sie auch mit der Zeichenfolge "~ / src /" angegeben werden kann. Jetzt können Sie beim Importieren mit der React-Komponente "~ / src / ○○" verwenden, um aus der relativen Pfadhölle herauszukommen. Übrigens kann der Teil von "" ~ / src / "" mit "" ~ / "" oder "@ / src /" "beliebig eingestellt werden.
./bin/webpack-dev-server
Es ist ein Entwicklungsserver, der automatisch kompiliert wird. Wir überwachen den Code auch ständig. Wenn Sie also den React-Code neu schreiben, wird die Zeichnung automatisch im Browser neu geschrieben. (Übrigens, Rails Model, Controller, View usw. werden nicht überwacht. Selbst wenn Sie sie ändern, werden sie nicht automatisch gezeichnet. Aktualisieren wir den Browser gehorsam mit "Befehl + R".)
Sie sollten jetzt eine Rails & React-Entwicklungsumgebung haben ... Wenn "Anwendungstitel" in [http: // localhost: 3000 /](http: // localhost: 3000 /) angezeigt wird, ist dies erfolgreich! Viel Spaß beim Entwickeln von 3R (Ruby on Rails on React)!
An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/' succeeds before bundling.
Wenn die obige Fehlermeldung angezeigt wird und die Bundle-Installation fehlschlägt ↓
In einigen Fällen kann es mit "sudo xcodebuild -license accept" behoben werden
Recommended Posts