React all the things - Milos Popovic
•
0 likes•205 views
This document discusses converting templates to React JSX. It begins by describing the current state of using Dust templates and MVC views. It then explains copying template code into view files and replacing template functions with JSX as an initial way to start converting to React. Further improvements discussed include using the ratt library to parse templates and the dust2jsx library for more complete AST parsing of Dust templates to convert them to JSX. The document concludes by mentioning how to implement the converted templates by changing file extensions and wrapping the output in a render function.
Report
Share
Report
Share
Download to read offline
Recommended
ITB2016 Intro To ColdBox MVC
This document provides an overview of the ColdBox MVC framework. It introduces MVC architecture and how ColdBox implements it using conventions over configurations. This allows developers to focus on code organization by placing components in the appropriate folders/locations rather than through configuration. ColdBox also supports modularity through reusable modules that extend core application functionality and interceptors that trigger actions at specific points in the request/response lifecycle.
Spring Boot
This document profiles Diego Pacheco and provides an overview of Spring Boot. It describes Diego as a software architect, agile coach, and speaker. It then summarizes the key features of Spring Boot, including its focus on creating production-ready spring applications with minimal configuration and no code generation. It provides links to sample code and documentation on specific Spring Boot features like SQL/NoSQL support, web MVC, messaging, and more.
Continuous Testing With React Storybook & WebdriverIO
This document summarizes Josh Cypher's presentation on continuous testing with React Storybook and WebdriverIO. It discusses using Storybook for UI development and testing React components in isolation. WebdriverIO is recommended for end-to-end acceptance testing through a real browser. A testing pyramid is presented with unit tests at the bottom and end-to-end tests at the top. Continuous testing should happen at all stages of development through unit, component, snapshot, and acceptance tests to catch errors early and reduce risks.
The Angular road from 1.x to 2.0
This presentation includes some thoughts and conclusion of mine after my research for the refactor of the Jexia interface. It will provide you useful tools for your refactor (or your new projects) and some tips.
Video with the speech: https://youtu.be/zbphdRs__DM
Om & React
This document discusses React.js, a JavaScript library for building user interfaces. It notes that React uses a declarative paradigm and composable reusable components to build UIs. Updates in React are efficient because the virtual DOM is diffed to only apply minimal changes rather than re-rendering the whole app on every update. The document recommends Pete Hunt's JSConf EU 2013 talk which presents an excellent overview of React's design decisions.
Magnolia CMS Tasks & Workflows
Learn how to create custom workflows for managing your editorial processes.This presentation covers Magnolia CMS process modelling and custom tasks, as well as how to implement a work item handler for executing custom tasks and configuring and putting the pieces together.
Better than Google.
This advertisement promotes a new search engine called Entireweb that claims to be better than Google, providing a link to try it out for free in just a few seconds and get the user's opinion on whether it truly is superior to Google or not.
Hudson and Drupal
This document discusses using Hudson as a continuous integration tool to automate deployment tasks. It notes that Hudson can help eliminate manual scripts, debugging of scripts, running scripts, and answering common questions about deployments. This makes the deployment process more stable, repeatable and boring, which ultimately makes projects more profitable. The document provides basic instructions on installing Hudson and creating a sample job to checkout code from an Acquia Drupal project. It also mentions that plugins can be easily added to Hudson via its graphical user interface.
Recommended
ITB2016 Intro To ColdBox MVC
This document provides an overview of the ColdBox MVC framework. It introduces MVC architecture and how ColdBox implements it using conventions over configurations. This allows developers to focus on code organization by placing components in the appropriate folders/locations rather than through configuration. ColdBox also supports modularity through reusable modules that extend core application functionality and interceptors that trigger actions at specific points in the request/response lifecycle.
Spring Boot
This document profiles Diego Pacheco and provides an overview of Spring Boot. It describes Diego as a software architect, agile coach, and speaker. It then summarizes the key features of Spring Boot, including its focus on creating production-ready spring applications with minimal configuration and no code generation. It provides links to sample code and documentation on specific Spring Boot features like SQL/NoSQL support, web MVC, messaging, and more.
Continuous Testing With React Storybook & WebdriverIO
This document summarizes Josh Cypher's presentation on continuous testing with React Storybook and WebdriverIO. It discusses using Storybook for UI development and testing React components in isolation. WebdriverIO is recommended for end-to-end acceptance testing through a real browser. A testing pyramid is presented with unit tests at the bottom and end-to-end tests at the top. Continuous testing should happen at all stages of development through unit, component, snapshot, and acceptance tests to catch errors early and reduce risks.
The Angular road from 1.x to 2.0
This presentation includes some thoughts and conclusion of mine after my research for the refactor of the Jexia interface. It will provide you useful tools for your refactor (or your new projects) and some tips.
Video with the speech: https://youtu.be/zbphdRs__DM
Om & React
This document discusses React.js, a JavaScript library for building user interfaces. It notes that React uses a declarative paradigm and composable reusable components to build UIs. Updates in React are efficient because the virtual DOM is diffed to only apply minimal changes rather than re-rendering the whole app on every update. The document recommends Pete Hunt's JSConf EU 2013 talk which presents an excellent overview of React's design decisions.
Magnolia CMS Tasks & Workflows
Learn how to create custom workflows for managing your editorial processes.This presentation covers Magnolia CMS process modelling and custom tasks, as well as how to implement a work item handler for executing custom tasks and configuring and putting the pieces together.
Better than Google.
This advertisement promotes a new search engine called Entireweb that claims to be better than Google, providing a link to try it out for free in just a few seconds and get the user's opinion on whether it truly is superior to Google or not.
Hudson and Drupal
This document discusses using Hudson as a continuous integration tool to automate deployment tasks. It notes that Hudson can help eliminate manual scripts, debugging of scripts, running scripts, and answering common questions about deployments. This makes the deployment process more stable, repeatable and boring, which ultimately makes projects more profitable. The document provides basic instructions on installing Hudson and creating a sample job to checkout code from an Acquia Drupal project. It also mentions that plugins can be easily added to Hudson via its graphical user interface.
Product Development at Flood IO
This document provides tips and guidance for product development. It discusses estimating timelines for complex products, planning iteratively, getting the right design, and shipping builds. The document is authored by Tim Koopmans and provides his tips, including that estimation is hard, there is no end to development so plan to iterate, get the right/design right, and if a build is completed then ship it. It also references resources on Agile processes, minimum viable products, and load testing with Flood.io.
Why you should consider a microframework for your next web project
1) Microframeworks are lightweight frameworks that only handle core tasks like routing and sessions, giving developers freedom over components, patterns, and conventions.
2) In contrast, full-stack frameworks like Rails are more rigid since they enforce certain development philosophies and replacing core components requires more work.
3) For small projects, microframeworks keep code small since only necessary components are included, whereas full-stack frameworks start at a larger size and grow from there.
React Component Library Design @WalmartLabs
At WalmartLabs, we've got lots of react component libraries and the number of libraries we have is always growing. This is the framework we're using on the Electrode React team to get component libraries up and running quickly.
Scaling Selenium
8 minute lightning talk from the September 23, 2011 NYC Selenium meetup at Etsy labs. http://bit.ly/p1duO3
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
The document discusses using Grunt.js to automate and improve workflows when building web sites and applications. It describes how Grunt.js can be used to speed up repetitive tasks like minification, compilation of CoffeeScript to JavaScript, compilation of LESS to CSS, running a web server, and automatically refreshing the browser on changes. The presenters then demonstrate setting up a Gruntfile to automate common tasks like compiling CoffeeScript and LESS, separating pre-compiled from production code, and watching for changes.
CoffeeScript the Awesome
This document discusses CoffeeScript, a programming language that compiles to JavaScript. It was created by Jeremy Ashkenas in 2009 based on the idea of creating your own programming language. CoffeeScript offers syntactic sugar over JavaScript through an initial compilation step, allowing for features like string interpolation and range comprehensions while still allowing use of JavaScript libraries. While debugging CoffeeScript directly is difficult, mapping between it and JavaScript is not. The document also provides an overview of CoffeeScript features like functions, objects, conditionals, operators, loops, classes, and more.
Untangling spring week4
This document provides an agenda and instructions for a class on HTML, CSS, and JavaScript. It includes information on presenting project work, using the online code editor JSFiddle, integrating HTML and JavaScript, using the class web server, and an introduction to CSS flexbox layout. For homework, students are asked to build a simple website using HTML and CSS with flexbox, host it on GitHub and their class web server, and include basic JavaScript console output.
How to develop reusable components with Babel and Rollup.js
We quite often develop nice features and tools for ourselves. Learning how to make it reusable and how to publish to the community is a must.
Reactjs workshop (1)
This document outlines a Reactjs workshop covering an introduction to Reactjs, its core concepts, and coding with Reactjs. The workshop introduces Reactjs as a library for building user interfaces, discusses its core concepts including components, virtual DOM, JSX, state and props, and demonstrates how to install and start coding with Reactjs. The document provides resources for further learning Reactjs.
ES6 katas - talk given at enterjs
The document discusses learning ECMAScript 2015 (ES6) through test-driven development and practice exercises. It promotes several online resources for practicing test-driven development and ES6 concepts like ES6Katas.org which provides a new coding exercise daily to help learn ES6 features like destructuring, arrow functions, and template strings. It encourages learning ES6 concepts by starting simply and taking on small proximal goals to build skills over time through live coding practice.
Headless drupal
This document discusses the evolution of the web and the rise of headless Drupal and APIs. It introduces key concepts like Web 1.0, 2.0, 3.0 and how Drupal 8 supports RESTful endpoints and works as a hub to provide content to other applications through its API. The document provides an overview of implementing headless Drupal and using frameworks like AngularJS to build applications that retrieve content from Drupal's API.
React Fundamentals - Jakarta JS, Apr 2016
This document discusses React fundamentals and why React is a good choice for building user interfaces. It explains that React uses a component-based approach where each component is a pure function of state. This makes the UI easy to reason about and improves testability, performance, and code reuse. It also notes that React uses immutable data structures and re-renders the entire UI when state changes, similar to how server-side rendering works. This avoids issues with directly manipulating the DOM and helps developers build more reliable software faster.
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Turbolinks stands against bloated single-page applications with speedy transitions between server-generated pages. Vue.js teaches the big client-side view-rendered how to be small and delightful. Using both together is a little tricky (it's the page restores), and in this talk, we'll go over an approach that works.
Intro to react_v2
This document provides an introduction to React including:
- React is a UI library that uses a component-based architecture and focuses on rendering views. It is not an MVC framework.
- React uses a virtual DOM for efficient updates rather than directly manipulating the real DOM. This improves performance.
- React components are self-contained pieces of code that receive data and return rendered output. An application is made of composable components.
- JavaScript knowledge is fundamental for React as components are written in JSX which compiles to JavaScript.
I Heard React Was Good
Presented at FITC Toronto 2016
See details at www.fitc.ca
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concept of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
Objective
Break down the concepts behind React and make it easy for people to start building with it.
Target Audience
JavaScript developers or project mangers looking to get a better understanding of React.
Assumed Audience Knowledge
Intermediate understanding of JavaScript.
Five Things Audience Members Will Learn
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Atomic design
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Sviluppo di interfacce web con React.JS
This document provides an introduction to React.js. It discusses how React uses components to build user interfaces, with components accepting data as properties and potentially holding internal state. Components re-render automatically in response to changes in their properties or state. This allows user interfaces to be updated efficiently based on changes to underlying data or user interactions like clicking a button.
Reactjs
React is a JavaScript library for building user interfaces using components. It introduces the concept of breaking the view into independent reusable components that receive data and return markup. Components allow encapsulating data and behavior to build complex UIs from small and isolated pieces of code called components. React implements a virtual DOM that improves performance by rendering only what has changed after state updates.
MeteorJS Session
This document provides an overview of building a photo blog application using the Meteor JavaScript framework. It discusses setting up the initial Meteor project and folder structure. It then walks through installing React and creating basic React components to display a header, navbar, and main content. Database functionality is added using MongoDB and publications/subscriptions. User accounts are integrated using the Meteor accounts packages. Key Meteor concepts covered include client-side vs server-side code, data publishing/subscribing, and security.
AngularJS with RequireJS
These are the slides from Johannes Weber's talk which were presented on AngularJS Lightning Talks #2 (2014-06-26) in Munich. More details about the event: http://www.meetup.com/AngularJS-Munich/events/164424472/
Refactoring: Code it Clean
An introduction presentation of Martin Fowler's 'Refactoring: Improving the Design of Existing Code' for beginners
Essentials in JavaScript App Bundling with Webpack
These slides were for the Webpack session (part of the fronteers meetup), you can find the examples in the following repo: https://github.com/KhaledElAnsari/Building-Apps-With-Wepback-Fronteers-Meetup
More Related Content
What's hot
Product Development at Flood IO
This document provides tips and guidance for product development. It discusses estimating timelines for complex products, planning iteratively, getting the right design, and shipping builds. The document is authored by Tim Koopmans and provides his tips, including that estimation is hard, there is no end to development so plan to iterate, get the right/design right, and if a build is completed then ship it. It also references resources on Agile processes, minimum viable products, and load testing with Flood.io.
Why you should consider a microframework for your next web project
1) Microframeworks are lightweight frameworks that only handle core tasks like routing and sessions, giving developers freedom over components, patterns, and conventions.
2) In contrast, full-stack frameworks like Rails are more rigid since they enforce certain development philosophies and replacing core components requires more work.
3) For small projects, microframeworks keep code small since only necessary components are included, whereas full-stack frameworks start at a larger size and grow from there.
React Component Library Design @WalmartLabs
At WalmartLabs, we've got lots of react component libraries and the number of libraries we have is always growing. This is the framework we're using on the Electrode React team to get component libraries up and running quickly.
Scaling Selenium
8 minute lightning talk from the September 23, 2011 NYC Selenium meetup at Etsy labs. http://bit.ly/p1duO3
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
The document discusses using Grunt.js to automate and improve workflows when building web sites and applications. It describes how Grunt.js can be used to speed up repetitive tasks like minification, compilation of CoffeeScript to JavaScript, compilation of LESS to CSS, running a web server, and automatically refreshing the browser on changes. The presenters then demonstrate setting up a Gruntfile to automate common tasks like compiling CoffeeScript and LESS, separating pre-compiled from production code, and watching for changes.
CoffeeScript the Awesome
This document discusses CoffeeScript, a programming language that compiles to JavaScript. It was created by Jeremy Ashkenas in 2009 based on the idea of creating your own programming language. CoffeeScript offers syntactic sugar over JavaScript through an initial compilation step, allowing for features like string interpolation and range comprehensions while still allowing use of JavaScript libraries. While debugging CoffeeScript directly is difficult, mapping between it and JavaScript is not. The document also provides an overview of CoffeeScript features like functions, objects, conditionals, operators, loops, classes, and more.
Untangling spring week4
This document provides an agenda and instructions for a class on HTML, CSS, and JavaScript. It includes information on presenting project work, using the online code editor JSFiddle, integrating HTML and JavaScript, using the class web server, and an introduction to CSS flexbox layout. For homework, students are asked to build a simple website using HTML and CSS with flexbox, host it on GitHub and their class web server, and include basic JavaScript console output.
How to develop reusable components with Babel and Rollup.js
We quite often develop nice features and tools for ourselves. Learning how to make it reusable and how to publish to the community is a must.
Reactjs workshop (1)
This document outlines a Reactjs workshop covering an introduction to Reactjs, its core concepts, and coding with Reactjs. The workshop introduces Reactjs as a library for building user interfaces, discusses its core concepts including components, virtual DOM, JSX, state and props, and demonstrates how to install and start coding with Reactjs. The document provides resources for further learning Reactjs.
ES6 katas - talk given at enterjs
The document discusses learning ECMAScript 2015 (ES6) through test-driven development and practice exercises. It promotes several online resources for practicing test-driven development and ES6 concepts like ES6Katas.org which provides a new coding exercise daily to help learn ES6 features like destructuring, arrow functions, and template strings. It encourages learning ES6 concepts by starting simply and taking on small proximal goals to build skills over time through live coding practice.
Headless drupal
This document discusses the evolution of the web and the rise of headless Drupal and APIs. It introduces key concepts like Web 1.0, 2.0, 3.0 and how Drupal 8 supports RESTful endpoints and works as a hub to provide content to other applications through its API. The document provides an overview of implementing headless Drupal and using frameworks like AngularJS to build applications that retrieve content from Drupal's API.
What's hot (11)
Why you should consider a microframework for your next web project
Why you should consider a microframework for your next web project
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
How to develop reusable components with Babel and Rollup.js
How to develop reusable components with Babel and Rollup.js
Similar to React all the things - Milos Popovic
React Fundamentals - Jakarta JS, Apr 2016
This document discusses React fundamentals and why React is a good choice for building user interfaces. It explains that React uses a component-based approach where each component is a pure function of state. This makes the UI easy to reason about and improves testability, performance, and code reuse. It also notes that React uses immutable data structures and re-renders the entire UI when state changes, similar to how server-side rendering works. This avoids issues with directly manipulating the DOM and helps developers build more reliable software faster.
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Turbolinks stands against bloated single-page applications with speedy transitions between server-generated pages. Vue.js teaches the big client-side view-rendered how to be small and delightful. Using both together is a little tricky (it's the page restores), and in this talk, we'll go over an approach that works.
Intro to react_v2
This document provides an introduction to React including:
- React is a UI library that uses a component-based architecture and focuses on rendering views. It is not an MVC framework.
- React uses a virtual DOM for efficient updates rather than directly manipulating the real DOM. This improves performance.
- React components are self-contained pieces of code that receive data and return rendered output. An application is made of composable components.
- JavaScript knowledge is fundamental for React as components are written in JSX which compiles to JavaScript.
I Heard React Was Good
Presented at FITC Toronto 2016
See details at www.fitc.ca
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concept of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
Objective
Break down the concepts behind React and make it easy for people to start building with it.
Target Audience
JavaScript developers or project mangers looking to get a better understanding of React.
Assumed Audience Knowledge
Intermediate understanding of JavaScript.
Five Things Audience Members Will Learn
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Atomic design
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Sviluppo di interfacce web con React.JS
This document provides an introduction to React.js. It discusses how React uses components to build user interfaces, with components accepting data as properties and potentially holding internal state. Components re-render automatically in response to changes in their properties or state. This allows user interfaces to be updated efficiently based on changes to underlying data or user interactions like clicking a button.
Reactjs
React is a JavaScript library for building user interfaces using components. It introduces the concept of breaking the view into independent reusable components that receive data and return markup. Components allow encapsulating data and behavior to build complex UIs from small and isolated pieces of code called components. React implements a virtual DOM that improves performance by rendering only what has changed after state updates.
MeteorJS Session
This document provides an overview of building a photo blog application using the Meteor JavaScript framework. It discusses setting up the initial Meteor project and folder structure. It then walks through installing React and creating basic React components to display a header, navbar, and main content. Database functionality is added using MongoDB and publications/subscriptions. User accounts are integrated using the Meteor accounts packages. Key Meteor concepts covered include client-side vs server-side code, data publishing/subscribing, and security.
AngularJS with RequireJS
These are the slides from Johannes Weber's talk which were presented on AngularJS Lightning Talks #2 (2014-06-26) in Munich. More details about the event: http://www.meetup.com/AngularJS-Munich/events/164424472/
Refactoring: Code it Clean
An introduction presentation of Martin Fowler's 'Refactoring: Improving the Design of Existing Code' for beginners
Essentials in JavaScript App Bundling with Webpack
These slides were for the Webpack session (part of the fronteers meetup), you can find the examples in the following repo: https://github.com/KhaledElAnsari/Building-Apps-With-Wepback-Fronteers-Meetup
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
In this talk, we will discover how to use MobX in our application by looking at a real world example and extracting patterns from it. We will discover how to structure how project maximising the reactiveness of our data model, reducing the amount of duplicated data and the amount of bugs. We will also cover hidden features of mobx like interceptReads to discover how to introduce some useful magic in our domain logic.
Deep dive into AngularJs for Beginners
Are you willing to start using AngularJs? Then try out this presentation to understand the basics.
This is an introduction level presentation of AngularJs and was first presented in "Front End Developers Apeldoorn" meetup in Jexia offices based on Apeldoorn, Netherlands.
Video of the speech: https://www.youtube.com/watch?v=vSbnPxoz74k
Reactjspdf
React is a JavaScript library for building user interfaces using components. It introduces unidirectional data flow and the use of components instead of templates. Components are functions that take raw data (props) and return React elements describing what should be rendered. The view is broken into individual components that can be updated efficiently.
Future proofing design work with Web components
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
React.js hooks feb 23rd meetup
This document discusses React hooks. It begins by outlining the agenda and logistics for the workshop. It then introduces hooks as a way to use state and other React features without writing a class. Some key hooks are described like useState, useEffect, and useReducer. The document argues that hooks help solve problems with classes by making components more modular and reusable. Code is more organized with hooks as related logic can be grouped together. Overall, hooks provide an alternative to classes and help address issues with explicit data flow and composability within components.
System webpack-jspm
This document discusses JavaScript module systems including CommonJS, RequireJS, Browserify, ES6 modules, Webpack, and JSPM. It begins with a history of JavaScript modules and loading external scripts. It then covers CommonJS for Node.js, RequireJS for asynchronous loading in browsers, and Browserify for using CommonJS modules in browsers. ES6 modules are described as the standard module solution. Webpack is presented as a module bundler with many features. Finally, JSPM is discussed as a package manager that works with SystemJS to provide modules from npm and GitHub for both browsers and Node.js.
React: The hottest JS lib for building UIs
Why the hottest? It's the 5th most popular github repo with 53165 stars. It makes every dev who uses it happy and for some it feels like the so far missing way of doing things right.
The presentation goes through the React fundamentals explaining each feature in detail while developing a web app (code+result) in parallel.
We cover:
* React components
* JSX
* Component Props and State
* Component lifecycle
* Events
* React ecosystem
React.js: The hottest JS lib for building UIs
In this presentation we talked about React.js on the Devstaff meetup (www.devstaff.gr) on November 10, 2016 at FORTH (Foundation for Research and Technology-Hellas), Heraklion, Crete.
Speakers:
Bastakis Stavros: https://gr.linkedin.com/in/bastakis
Kampitakis Nikos: https://gr.linkedin.com/in/kabitakis
Vourlakis Nikolas: https://gr.linkedin.com/in/nikolas-vourlakis
About the event: https://goo.gl/Lps3zW
Neo4j Stored Procedure Training Part 1
This document provides instructions for creating and testing a stored procedure in Neo4j using Java and Maven. It discusses setting up a Maven project with the necessary dependencies, creating a stored procedure class with the @Procedure annotation, returning results with a custom Result class, and testing the procedure using the Neo4jRule to start an embedded Neo4j instance with the procedure deployed. The document contains code snippets and step-by-step explanations for setting up the project structure, procedure, and test.
Similar to React all the things - Milos Popovic (20)
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Essentials in JavaScript App Bundling with Webpack
Essentials in JavaScript App Bundling with Webpack
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
More from FrontEnders
Intro to the Intersection Observer API - Tara Ojo
The document introduces the Intersection Observer API, which allows asynchronously observing changes in the intersection of an element with the viewport or parent element. It describes how to create an IntersectionObserver instance with a callback function that checks if an element is intersecting and makes changes to it, such as loading a real image. An example shows initializing an IntersectionObserver to observe a placeholder image element and replace the placeholder when it intersects the viewport.
Accessible client side routing - Nick Colley
The document discusses making client-side routing accessible in single-page applications. It notes that 1 in 5 people in the UK have a disability and accessibility is important for all users. Assistive technologies like screen readers rely on cues from the browser. Client-first frameworks render pages with JavaScript in the browser rather than on the server. To improve accessibility, techniques like announcer patterns and managing focus can be used. Links to examples and additional resources on the topic are provided.
Where are the women? - Dora Militaru
The document discusses diversity and inclusion in the workplace. It notes statistics showing gender imbalance in some industries and fields. It suggests that quotas may be needed to achieve true diversity. It also comments that companies should hire people who care about diversity and inclusion, check for biases, and reach out to underrepresented groups. Tolerating diversity is not the same as embracing it.
Optical alignment - Ivan Grekov
This document discusses optical alignment in user interfaces for frontend developers. It defines geometric and optical alignment and describes typical algorithms for each. Optical alignment helps define the proper center of shapes by accounting for their actual visual balance rather than just geometry. The document provides an algorithm for optical alignment using JavaScript and math formulas to calculate centroids. It also discusses existing solutions for optical alignment in tools like Photoshop and Sketch and libraries like D3.js.
Adventures with pattern libraries - Chris Gibbons
Auto Trader is the largest digital automotive marketplace in the UK and Ireland, with 9 million monthly visitors viewing over 500,000 vehicle advertisements from nearly 14,000 retailers. Seeking to modernize their legacy websites, Auto Trader embarked on a "rebrand" project to implement a pattern library to establish consistency across their digital properties. They took an iterative approach, starting small with a core team to establish naming conventions and documentation before expanding usage and gaining company-wide buy-in for the new standards.
Henry Charge - It's your job to make things accessible
Henry Charge is an interaction designer with over 10 years of experience building websites. He discusses his journey to realizing the importance of accessibility and inclusive design. Some key lessons he learned include: accessibility is about universality, not just disability; many people without disabilities use accessibility features; and testing with real users is important. He provides tips on writing for plain language, describing visual content, keyboard-only use, and allowing for customization like adjusting contrast.
Rebecca Topps - Mobile Accessibility
The document discusses why mobile websites should be accessible and provides tips for improving mobile accessibility. Some key points include:
- Around 11 million people in the UK have a disability and over 1 billion people worldwide have a long-term disability, so accessibility is important.
- Mobile accessibility can benefit all users, for example when screens need to be zoomed or when assistive technologies are used.
- Guidelines are provided for making content accessible, including ensuring adequate color contrast, providing text alternatives for non-text elements, and ensuring all functionality can be accessed via assistive technologies.
- Developers are encouraged to test their mobile sites using screen readers and other assistive technologies to identify and address accessibility issues.
Jonathan Hassell - The past, present and future of accessibility
The document summarizes the past, present, and future of accessibility in three parts:
1) In the past, accessibility was seen as a compliance issue that was an overhead. Only a few were interested in it.
2) In the present, accessibility is expected as best practice and embraced when convenient. Interest has grown but is still niche.
3) In the future, accessibility will be normalized as personalization that is important for innovation. It will be embraced as good design that benefits everyone. Accessibility and inclusive design will become widely accepted.
More from FrontEnders (8)
Henry Charge - It's your job to make things accessible
Henry Charge - It's your job to make things accessible
Jonathan Hassell - The past, present and future of accessibility
Jonathan Hassell - The past, present and future of accessibility
Recently uploaded
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
ABSTRACT: A prima vista, un mattoncino Lego e la backdoor XZ potrebbero avere in comune il fatto di essere entrambi blocchi di costruzione, o dipendenze di progetti creativi e software. La realtà è che un mattoncino Lego e il caso della backdoor XZ hanno molto di più di tutto ciò in comune.
Partecipate alla presentazione per immergervi in una storia di interoperabilità, standard e formati aperti, per poi discutere del ruolo importante che i contributori hanno in una comunità open source sostenibile.
BIO: Sostenitrice del software libero e dei formati standard e aperti. È stata un membro attivo dei progetti Fedora e openSUSE e ha co-fondato l'Associazione LibreItalia dove è stata coinvolta in diversi eventi, migrazioni e formazione relativi a LibreOffice. In precedenza ha lavorato a migrazioni e corsi di formazione su LibreOffice per diverse amministrazioni pubbliche e privati. Da gennaio 2020 lavora in SUSE come Software Release Engineer per Uyuni e SUSE Manager e quando non segue la sua passione per i computer e per Geeko coltiva la sua curiosità per l'astronomia (da cui deriva il suo nickname deneb_alpha).
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
20240607 QFM018 Elixir Reading List May 2024
Everything I found interesting about the Elixir programming ecosystem in May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Everything I found interesting about machines behaving intelligently during May 2024
Artificial Intelligence for XMLDevelopment
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Programming Foundation Models with DSPy - Meetup Slides
Prompting language models is hard, while programming language models is easy. In this talk, I will discuss the state-of-the-art framework DSPy for programming foundation models with its powerful optimizers and runtime constraint system.
Communications Mining Series - Zero to Hero - Session 1
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Full-RAG: A modern architecture for hyper-personalization
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
How to Get CNIC Information System with Paksim Ga.pptx
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-und-domino-lizenzkostenreduzierung-in-der-welt-von-dlau/
DLAU und die Lizenzen nach dem CCB- und CCX-Modell sind für viele in der HCL-Community seit letztem Jahr ein heißes Thema. Als Notes- oder Domino-Kunde haben Sie vielleicht mit unerwartet hohen Benutzerzahlen und Lizenzgebühren zu kämpfen. Sie fragen sich vielleicht, wie diese neue Art der Lizenzierung funktioniert und welchen Nutzen sie Ihnen bringt. Vor allem wollen Sie sicherlich Ihr Budget einhalten und Kosten sparen, wo immer möglich. Das verstehen wir und wir möchten Ihnen dabei helfen!
Wir erklären Ihnen, wie Sie häufige Konfigurationsprobleme lösen können, die dazu führen können, dass mehr Benutzer gezählt werden als nötig, und wie Sie überflüssige oder ungenutzte Konten identifizieren und entfernen können, um Geld zu sparen. Es gibt auch einige Ansätze, die zu unnötigen Ausgaben führen können, z. B. wenn ein Personendokument anstelle eines Mail-Ins für geteilte Mailboxen verwendet wird. Wir zeigen Ihnen solche Fälle und deren Lösungen. Und natürlich erklären wir Ihnen das neue Lizenzmodell.
Nehmen Sie an diesem Webinar teil, bei dem HCL-Ambassador Marc Thomas und Gastredner Franz Walder Ihnen diese neue Welt näherbringen. Es vermittelt Ihnen die Tools und das Know-how, um den Überblick zu bewahren. Sie werden in der Lage sein, Ihre Kosten durch eine optimierte Domino-Konfiguration zu reduzieren und auch in Zukunft gering zu halten.
Diese Themen werden behandelt
- Reduzierung der Lizenzkosten durch Auffinden und Beheben von Fehlkonfigurationen und überflüssigen Konten
- Wie funktionieren CCB- und CCX-Lizenzen wirklich?
- Verstehen des DLAU-Tools und wie man es am besten nutzt
- Tipps für häufige Problembereiche, wie z. B. Team-Postfächer, Funktions-/Testbenutzer usw.
- Praxisbeispiele und Best Practices zum sofortigen Umsetzen
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
ここ3000字までしか入らないけどタイトルの方がたくさん文字入ると思います。
20240609 QFM020 Irresponsible AI Reading List May 2024
Everything I found interesting about the irresponsible use of machine intelligence in May 2024
UiPath Test Automation using UiPath Test Suite series, part 5
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Presentation of the OECD Artificial Intelligence Review of Germany
Consult the full report at https://www.oecd.org/digital/oecd-artificial-intelligence-review-of-germany-609808d6-en.htm
Building Production Ready Search Pipelines with Spark and Milvus
Spark is the widely used ETL tool for processing, indexing and ingesting data to serving stack for search. Milvus is the production-ready open-source vector database. In this talk we will show how to use Spark to process unstructured data to extract vector representations, and push the vectors to Milvus vector database for search serving.
Recently uploaded (20)
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
React all the things - Milos Popovic
- 1. CONVERTING TEMPLATES TO REACT JSX TEMPLATES
- 2. REACT ALL THE THINGS CONVERTING TEMPLATES TO REACT JSX TEMPLATES
- 5. FRONTEND APPLICATION CURRENT STATE ▸ Dust templates ▸ MVC Views
- 6. FRONTEND APPLICATION BUT.. WE ARE DEVELOPERS!
- 7. FRONTEND APPLICATION BUT.. WE ARE DEVELOPERS! ▸ what-do-we-want.jpg
- 8. FRONTEND APPLICATION BUT.. WE ARE DEVELOPERS! ▸ what-do-we-want.jpg
- 9. REACT ALL THE THINGS HAVE TO START SOMEHOW ▸ Copy-paste templates into View files ▸ It’s not like having Components, but it’s 1/2 way there
- 10. REACT ALL THE THINGS HAVE TO START SOMEHOW ▸ Copy-paste templates into View files ▸ It’s not like having Components, but it’s 1/2 way there ▸ Replace `template.render()` with JSX code ▸ Replace "class" with “className" etc..
- 11. REACT ALL THE THINGS IT’S ALIVE! ▸ https://www.npmjs.com/package/ratt
- 12. REACT ALL THE THINGS IT’S ALIVE! ▸ https://www.npmjs.com/package/ratt ▸ Some AST parsing (Esprima), but not all ▸ Unit tests FTW
- 13. MORE AST PARSING
- 14. MORE AST PARSING DUST TEMPLATES SYNTAX ▸ https://github.com/linkedin/ dustjs/tree/master/src
- 15. MORE AST PARSING DUST TEMPLATES SYNTAX -> PEG.JS PARSER ▸ https://github.com/linkedin/ dustjs/tree/master/src ▸ PEG.js - Parser Generator for JavaScript ▸ https://pegjs.org/online ▸ AST for your template
- 17. DUST2JSX ▸ https://www.npmjs.com/package/dust2jsx ▸ Doing /only/ text translation ▸ AST parsing all the way ▸ More unit tests FTW IMPROVEMENTS
- 18. MAKING USE OF IT
- 19. MAKING USE OF IT ▸ Change template extension ▸ Wrap to a { render() } using Webpack loader ▸ Use instead of normal templates, as usual ▸ No change to code outside templates
- 20. THANK YOU ❤