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

How to start with React?

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.

Rafał Muszyński

March 18, 2018

More Decks by Rafał Muszyński

Other Decks in Technology


  1. 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
  2. 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
  3. 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/
  4. JSX... what? - A preprocessor that adds syntax similar to

    XML to JavaScript - ECMAScript extension - Syntax similar to XML in React
  5. 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
  6. 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
  7. 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
  8. More about React - React Native - mobile apps -

    Android - iOS - React VR - Interactive VR websites https://reactjs.org/docs
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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