How to start with React? Rafał Muszyński - Podlasie.dev - 26.10.2017

Agenda - What is React? - JSX - Components - React - installation/configuration - What is Webpack? - Webpack - installation - Webpack configuration - Webpack Encore - Running your first application - React.js vs Angular vs Vue.js

About me - Software Engineer & Scrum Master at Sourcefabric z.u. - Open-source contributor - An organizer of Podlasie.dev meetups in the city of Siedlce, Poland - https://blog.rafalmuszynski.pl @takeittt

No content

What is React.js? - An efficient JavaScript library for creating user interfaces - Created by Facebook - Published as an open-source library in 2013 - Layer presentation - V in MVC pattern - Very efficient - Declarative programming thanks to JSX - e.g. I want to display a button, I don’t care how it should be displayed - MIT license - https://reactjs.org/

JSX... what? - A preprocessor that adds syntax similar to XML to JavaScript - ECMAScript extension - Syntax similar to XML in React

JSX continued... - One duty / responsibility - Clean code - Very well structured presentation layer code - JavaScript and HTML mixed up together - wtf? - Some may say that this violates the principle of separation of responsibility (HTML and CSS) - Logic alone is not a responsibility, business logic is already - that is def. how your data will be updated - Displaying the name in the heeder - responsibility of the presentation layer - Babel converts JSX to JavaScript

JSX - example

Components - They divide UI into independent, reusable "pieces" - They isolate one part of the code from the other - The button, list of rows, forms, input field, etc. is a component - New components inherit from React.Component - They implement at least a "render" method that returns React, string or numbers, portals, null, boolean ES6: https://github.com/lukehoban/es6features

Components cd. - default props - propTypes - constructor - when you use “state” - setState - a “request” to re-render the component - componentWillMount - executed before “render” function - componentDidMount - executed after “render” function - e.g. fetching data from the API - shouldComponentUpdate - ... https://reactjs.org/docs/react-component.html#the-component-lifecycle

Source code

More about React - React Native - mobile apps - Android - iOS - React VR - Interactive VR websites https://reactjs.org/docs

React - installation npm install -g create-react-app create-react-app my-app cd my-app npm start Lub yarn init yarn add react react-dom … loaders yarn start yarn build - compiles all assets into static files for production env

Webpack - webpack.js.org - “Module bundler” - compiler - Recursively creates a dependency graph that contains all the necessary modules - Then it packs these modules into small "bundles" / packages that are loaded by the browser - Dependencies loading time optimization

Webpack - installation yarn add webpack webpack-dev-server path

webpack.config.js

Webpack - Babel loader - installation - Babel - JavaScript compiler - Allows to use ES i JSX w JavaScript - Installation: yarn add babel-loader babel-core babel-preset-es2017 babel-preset-react --dev - .babelrc config file

Webpack - A list of loaders: https://webpack.js.org/loaders/ (e.g. react-vue-loader) - A list of plugins: https://webpack.js.org/plugins/

Webpack - Encore - webpack-encore for Symfony

Fire in the hole! yarn webpack-dev-server --progress --colors --content-base dist

Angular vs React.js vs Vue.js - React is not a framework! - Angular is a MVC framework (services, controllers, factories, directives etc.) - Vue.js is a library, but when extending it by using extra components it can create a fully functional framework - Angular and React comparison makes no sense

https://trends.google.com/trends/explore?date=2013-01-01%202017-09-23&q=reactjs%20%2B%20react.js, vuejs%20%2B%20vue.js,backbone.js%20%2B%20backbonejs

Files size https://gist.github.com/Restuta/cda69e50a853aa64912d

Links: - https://yarnpkg.com/lang/en/docs/ - https://docs.npmjs.com/ - https://reactjs.org/ - https://webpack.github.io/docs/ - https://babeljs.io/ - https://github.com/babel/babel-loader - http://redux.js.org/ - https://symfony.com/doc/current/frontend/encore/installation.html - https://facebook.github.io/jsx/ - https://github.com/facebookincubator/create-react-app

Thanks! muszynskirafa@gmail.com