Soudainement, créer un environnement est aussi gênant et faible que se raser tous les matins. Si vous lisez cet article, vous n'êtes peut-être pas doué pour créer un environnement.
Les membres de l'entreprise nous disent souvent qu'ils ne sont pas aussi doués pour créer un environnement qu'un yankee qui traîne dans un dépanneur. Je pense que ce premier obstacle à la construction d'un environnement freine l'action créative! Je suis convaincu que plus de services seront créés dans ce monde si nous nous épargnons la peine de créer un environnement! Par conséquent, cette fois, nous publierons un manuel de construction d'environnement pour créer un service qui "utilise Rails comme serveur API" et "dessine avec React"!
«J'utilise un Mac parce qu'il a l'air à la mode! ――Depuis que je suis diplômé de l'école de programmation, je souhaite créer une application personnelle! ――Je veux apprendre un framework Javascript moderne appelé React.js et faire la différence!
| Nom | La description |
|---|---|
| Ruby | Je ne sais pas |
| Rails | Je ne sais pas |
| MySQL | Je ne sais pas |
| brew | Gestion des packages (principalement côté serveur) |
| yarn | Gestion des paquets (principalement face avant) |
rail le nouveau nom de l'application-–skip-turbolinks --webpack=react --database=mysql --api
On dit que la valeur en tant qu'ingénieur Rails est déterminée par le nombre de fois dans la vie que vous appuyez sur cette commande "rails new". En passant, vous pouvez réécrire les options si nécessaire.
Webpacker est un bundler de modules fourni en standard avec Rails et est un wrapper pour Webpack. Un bundler est une personne qui regroupe. C'est un gars qui regroupe des fichiers dans divers formats tels que HTML, CSS et JS.
Au fait, un rappeur n'est pas une personne qui marche sur la rime. C'est un rappeur comme Saran Wrap. Cela signifie «envelopper». Webpacker est un wrapper pour Webpack car il appelle Webpack en interne.
Au fait, si vous êtes intéressé par le front-end, vous devriez avoir une certaine connaissance de Webpack. C'est BON si vous vous en souvenez comme un ensemble avec des mots comme "Babel" et "ES6"!
rails webpacker:install
rails webpacker:install:react
Cette fois, j'utiliserai MySQL pour DB. J'utilise PostgreSQL pour mon travail quotidien, mais je pense que ceux qui sont diplômés de l'école de programmation sont habitués à MySQL. Je pense que bon nombre des nouvelles sélections de base de données de produits utilisent celles qui sont familières au site. Je suis désolé si c'est différent. En passant, en passant, je suis personnellement intéressé par MongoDB de NoSQL. La raison en est: "Cela ressemble à un ingénieur cool si vous le connaissez d'une manière ou d'une autre."
Cette fois, je vais installer MySQL via un gestionnaire de paquets appelé brew
brew install mysql
Une fois MySQL installé, créez un utilisateur à utiliser avec cette application. J'omettrai chaque commande car il semble qu'il n'est pas nécessaire de l'expliquer en détail.
mysql -u root -p
create user'username '@' localhost 'identifié par'password';
select User,Host from mysql.user;
accorde tout sur *. * à '[nom d'utilisateur]' @ 'localhost';
Après avoir créé l'utilisateur, liez l'utilisateur créé à Rails. La règle est de décrire les paramètres de Rails DB dans database.yml.
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'] %>
Veuillez remplacer "app_name_ ○○" par le nom de l'application lorsque Rails nouveau a été fait. Puisque le nom d'utilisateur et le mot de passe seront visibles si vous les publiez sur GitHub Il est recommandé de le masquer en utilisant le gem "dotenv" etc. Au fait, cela n'a aucun sens à moins que vous ne supprimiez le fichier ".env" créé par dotenv de la gestion Git, alors assurez-vous d'ajouter ".env" à ".gitignore" une fois que vous l'avez créé! Si vous ne savez pas de quoi vous parlez, consultez les "variables d'environnement dotenv"! "Trouver ce que vous ne comprenez pas" est la base d'un ingénieur! Je pense que la profondeur de cette «enquête» est un raccourci vers la croissance.
rake db:create
rails s
La construction de l'environnement se poursuivra un peu plus longtemps. Il s'agit déjà de la 6ème station. Un peu plus.
Un plugin Webpack qui divise automatiquement les morceaux. Vous pouvez enregistrer la taille du fichier, mais ce n'est pas obligatoire.
const { environment } = require('@rails/webpacker');
environment.splitChunks();
module.exports = environment;
app/views/top/show.html.erb Cela signifie faire référence au fichier nommé "index" dans javascript / packs /.
<%#Lors de l'utilisation de morceaux fractionnés%>
<%= javascript_packs_with_chunks_tag 'index' %>
<%#Lorsque vous n'utilisez pas de morceaux fractionnés%>
<%= javascript_pack_tag 'index' %>
config/routes.rb
Rails.application.routes.draw do
#Paramètres de la page racine
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>Titre de l'application</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<div id="root">← C'est
<%= yield %>
</div>
</body>
</html>
app/javascript/packs/index.jsx Fichier référencé depuis app / views / top / show.html.erb Ce fichier est l'entrée de React. Les packages asynchrones, de routage, de gestion d'état, etc. pour React sont importés et définis. Vous installerez chaque package plus tard.
//Ce fichier est le tout premier fichier appelé par Rails View (EntryPoint)
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];
//Pour l'environnement de développement, paramètres d'utilisation des outils de développement
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 Utilisez un fichier avec l'extension jsx pour décrire le composant React. Écrivez du HTML dans le fichier JS. Au début, je me sens mal à l'aise d'écrire des balises HTML dans JS, mais je m'y habitue.
import React from 'react';
const Top = () => (
<h1>
<center>Titre de l'application</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,
});
Le résumé ici est stocké dans la boutique Redux. Redux est un package qui gère de manière centralisée l'état. Un magasin est une boîte qui stocke l'état. C'est la caractéristique la plus importante de Redux. L'utilisation de Redux n'est pas indispensable pour le développement de React, mais il est préférable de l'inclure dès le début car il devient difficile de gérer l'état à mesure que l'échelle du produit augmente avec React seul. Il n'est pas nécessaire que ce soit LP ou un petit produit.
La structure de répertoires utilise le modèle ducks. Le modèle des canards est l'idée de décrire le «type d'action», le «créateur d'action» et le «réducteur» dans un seul fichier. C'est un concept de design. Il ne s'agit pas d'installer quelque chose.
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,
});
Normalement, les fichiers sont créés pour chacun des "types d'action", "créateur d'action" et "réducteur", mais si le modèle des canards est incorporé, ils seront combinés en un seul fichier, de sorte que le nombre de fichiers peut être simplement réduit. Il est recommandé car il s'agit d'un concept de design capable de résister même à des produits de taille moyenne. Si vous vous demandez ce qu'est un type d'action, consultez Redux Official!
Installez à l'aide d'un gestionnaire de packages appelé yarn. Il existe un gestionnaire de paquets similaire, "npm", mais "yarn" est compatible avec le "npm". Les packages installés avec yarn sont automatiquement ajoutés à un fichier appelé "package.json" directement sous le répertoire racine. Ajouter un package avec "yarn add package name" Retirez le paquet avec "yarn remove package name".
yarn add redux react-redux react-router-dom redux-devtools-extension redux-form redux-thunk axios @babel/preset-react babel-plugin-root-import
Si vous êtes intéressé, "@ reduxjs / toolkit", "@ material-ui / core" Est également recommandé
Si vous avez développé React vous-même, vous auriez dû y penser une fois. "Le chemin relatif de réaction a tendance à être l'enfer." React a tendance à tomber dans l'enfer de la spécification de chemin relatif lors de l'importation. Il est recommandé d'inclure "babel-plugin-root-import" pour éviter que cela ne se produise. En fait, il est secrètement inclus dans "yarn add" en 11. ci-dessus, donc la personne qui a copié et exécuté la commande est déjà incluse par mon truc.
Créez un fichier appelé ".babelrc" et décrivez-y les paramètres. L'emplacement de création du fichier ".babelrc" se trouve directement sous le répertoire racine.
.babelrc
{
"plugins": [
[
"babel-plugin-root-import",
{
"paths": [
{
"rootPathSuffix": "./app/javascript/src",
"rootPathPrefix": "~/src/"
},
]
}
]
]
}
Les paramètres ci-dessus ne définissent que la spécification de chemin "./app/javascript/src" afin qu'elle puisse également être spécifiée avec la chaîne de caractères "~ / src /". Vous pouvez maintenant utiliser "~ / src / ○○" lors de l'importation avec le composant React, afin de pouvoir sortir de l'enfer relatif des chemins. Au fait, la partie de "" ~ / src / "" peut être définie comme vous le souhaitez avec "" ~ / "" ou "" @ / src / "".
./bin/webpack-dev-server
C'est un serveur de développement qui compile automatiquement. Puisque le code est constamment surveillé, la réécriture du code React réécrira automatiquement le dessin sur le navigateur. (À propos, le modèle de rails, le contrôleur, la vue, etc. ne sont pas surveillés, donc même si vous les modifiez, ils ne seront pas dessinés automatiquement. Mettons à jour le navigateur avec "commande + R" docilement.)
Vous devriez maintenant avoir un environnement de développement Rails & React ... Si "Application title" est affiché dans [http: // localhost: 3000 /](http: // localhost: 3000 /), c'est réussi! Amusons-nous à développer 3R (Ruby on Rails sur 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.
Si le message d'erreur ci-dessus s'affiche et que l'installation du bundle échoue ↓
Dans certains cas, il peut être résolu avec sudo xcodebuild -license accept
Recommended Posts