Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails loves React

Yuichiro MASUI
December 31, 2017

Rails loves React

Yuichiro MASUI

December 31, 2017
Tweet

More Decks by Yuichiro MASUI

Other Decks in Education

Transcript

  1. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit)

    React αʔόϩδοΫ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
  2. Rails + Rails • Webpacker + React (Rails 5.1͔Β •

    react-rails (React७ਖ਼ Rails࿈ܞ • react_on_rails
  3. Dockerfile FROM ruby:2.4 ENV LANG C.UTF-8 RUN apt-get update &&

    \ apt-get install -y nodejs mysql-client --no-install-recommends && \ rm -rf /var/lib/apt/lists/* && \ mkdir -p /usr/src/app WORKDIR /usr/src/app COPY Gemfile /usr/src/app/ COPY Gemfile.lock /usr/src/app/ RUN bundle install COPY . /usr/src/app EXPOSE 3000 CMD ["./bin/rails", "server", "-b", "0.0.0.0"]
  4. docker-compose.yml rails: build: . command: [ "bash", "-c", "rm -f

    tmp/pids/server.pid; ./bin/rails server -b 0.0.0.0" ] environment: DISABLE_SPRING: "1" ports: - "3000:3000" volumes: - ".:/usr/src/app" links: - “mysql" react: build: react volumes: - "./react/src:/usr/src/app/src" - "./app/assets/javascripts:/usr/src/app/dist" - "node_modules" command: [ "yarn", "run", "watch" ] mysql: image: mysql:5.6 environment: MYSQL_ROOT_PASSWORD: "passwd"
  5. ReactͷϏϧυ • browserifyΛ࢖͏
 browserify src/index.jsx -o dist/index -t [ babelify

    -- presets [ es2015 react ] ] • Parcel bundlerΛ࢖͏
 parcel src/index.jsx • watchͰ؂ࢹ
 watch -p "src/**/*.js*" -c "yarn run build”
  6. Pros / Cons • Pros • ಛผͳ࿈ܞϞδϡʔϧͳͲΛ༻͍ͳ͍ • Webpack͕ඞཁͳ͍ •

    Cons • Docker؀ڥ͕ඞཁ • Ϗϧυ࣌ʹRailsͱ࿈ಈ͠ͳ͍