How to start with React?

In the JavaScript world, a new framework is created almost every day :), but can React be called a framework? Can you compare it to, for example, Angular? Or maybe you've wondered what is this JSX or components and how does it all work together, but you do not know how to start? In this presentation I will try to answer all these questions. I will explain what it is, how it works and how to use React together with Webpack.

Transcript

1. How to start with React? Rafał Muszyński - Podlasie.dev - 26.10.2017
2. 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
3. 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
5. 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/
6. JSX... what? - A preprocessor that adds syntax similar to XML to JavaScript - ECMAScript extension - Syntax similar to XML in React
7. 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
8. JSX - example
9. 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
10. 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
11. Source code
12. More about React - React Native - mobile apps - Android - iOS - React VR - Interactive VR websites https://reactjs.org/docs
13. 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
14. 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
15. Webpack - installation yarn add webpack webpack-dev-server path
16. webpack.config.js
17. 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
18. Webpack - A list of loaders: https://webpack.js.org/loaders/ (e.g. react-vue-loader) - A list of plugins: https://webpack.js.org/plugins/
19. Webpack - Encore - webpack-encore for Symfony
20. Fire in the hole! yarn webpack-dev-server --progress --colors --content-base dist
21. 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
22. 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
23. Files size https://gist.github.com/Restuta/cda69e50a853aa64912d
24. 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
25. Thanks! muszynskirafa@gmail.com