An Introduction to React Life-cycle and Composition

Explore the life-cycle of #React components at the December #Triangle #ReactJS meetup -->

  • Doug Miller, a Sr.
  • Software Engineer, will discuss the life-cycle of React components and different ways to compose them together to share logic.
  • He will go over each of the 9 life-cycle methods, when they are called, and what you can do in each.
  • Doug will also cover how to use High Order Components (HOC), renderProps, or child functions to extend the functionality of components.

The December Triangle ReactJS Meetup will focus on the lifecycle of React Components and different ways to compose them together to share logic.
Continue reading “An Introduction to React Life-cycle and Composition”

Sprinkle a bit of Reason into Create React App

  • So you’ve decided to hop on the hype train and you want to try it out in your app, the thing is you already have a big project using and don’t want to have to rewrite it from scratch or eject and have to manage everything yourself.
  • Enter reason-scripts, it’s the equivalent of react-scripts and it’s easy enough to move from one to the other, the great thing is that your JavaScript code and code are interoperable, so you can migrate your components one at a time, instead of doing a great big rewrite, awesome!
  • If you’re looking for an introduction to Reason, I would recommend starting with the docs.
  • For and , I would start with: – – A ReasonReact Tutorial by @jaredforsyth – – A First Reason React app for Javascript developers by @ur_friend_james – – This part is the easy part!
  • Start by moving from react-scripts to reason-scripts.

So you’ve decided to hop on the Reason hype train and you want to try it out in your app, the thing is you already have a big project using Create React App and don’t want to have to rewrite it from scratch or eject and have to manage everything yourself.
Continue reading “Sprinkle a bit of Reason into Create React App”

Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so

Read our interview with @NorbertdeLangen about his recent work on Storybook:  #ReactJS

  • We strongly believe the problems Storybook solves are not unique to any single platform.Of course, we’re also going to be improving the features and performance of Storybook, and create new ways for you to extend Storybook and customise it for your use-case.
  • Finally: we’re really seeing the community getting involved with Storybook, we get pull requests making Storybook better in all sorts of ways we didn’t expect.
  • So who knows what will be included in the next release?Has rebranding from React Storybook changed its culture or direction?The culture certainly changed — now the community itself is driving Storybook forward.
  • If anything, I’d say our focus on helping the community co-maintain Storybook has had a major impact.Do your company clients adapt React style guides to their workflow?Yes in fact, most of them do.What do you think is the future of web and mobile development?Who knows?
  • I’m super excited about native support for ES modules in the modern browsers and Node.js!What are your favorite components, libraries, or community projects?Babel, Webpack, React, Glamorous, Yarn, Express, ESlint, Prettier, Jest, GraphQL.I’m also a huge fan of community-driven meetups.Pick one and tell us why: Redux or MobX?It depends.

Today, we’re opening our new series of interviews for React Day Berlin. Since Norbert de Langen is going to speak about building Storybook in Berlin in December, we decided to ask him a couple of…
Continue reading “Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so”

React Version 16.0 Released

#React Version 16.0 Released cc @CsharpCorner @PranavMTL  #ReactJS #React16

  • Facebook Inc. has released a new version of React, their very promising JavaScript Library for UI development.
  • The new React v16.0 contains a number of updates and new features.
  • “We’re excited to announce the release of React v16.0!
  • Though the documentation for most of the features has not been yet released, but according to the React v16.0 GitHub download page, the following are the significant features added to this new version of the library.
  • Further information, such as – breaking changes, details of these new features, and download links, can be found at the Official blog or on the GitHub repository

Facebook Inc. has released React v16.0.
Continue reading “React Version 16.0 Released”

Looking for QA Volunteers for Introduction to React Native

  • The QA process is a time for people to spot any glaring mistakes, spelling errors, broken links, mistakes in teachers notes, clarification on quiz questioning, and any other feedback.
  • With QA there’s a few other things you should know.
  • Those are the quirks of QA mode.
  • Please use email to provide feedback.
  • When in QA, we try to not talk about the course here on the Community forum until it’s officially released.

Participate in discussions with other Treehouse members and learn.
Continue reading “Looking for QA Volunteers for Introduction to React Native”

FlexView: the easiest way to use flex with React – buildo blog

FlexView: the easiest way to use #flex with React 

#ReactJS #webdev #developer

  • FlexView: the easiest way to use flex with ReactA powerful React component to create any layout on any browser using the power of flex.The problem: doing complex layouts on browsersImplementing complex layouts in web projects has always been a hassle for developers and designers.
  • The API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.For these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place?Introducing FlexView: our solution to the problemHere’s a typical CSS snippet using flexbox:.
  • flex-view { // flex display: flexbox; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; // direction webkit-box-flex-direction: row; moz-box-flex-direction: row; ms-flex-direction: row; webkit-flex-direction: row; flex-direction: row; // grow, shrink, basis webkit-box-flex: 1 1 200px; moz-box-flex: 1 1 200px; ms-flex: 1 1 200px; webkit-flex: 1 1 200px; flex: 1 1 200px;}And this is how you do it with FlexView:FlexView grow shrink basis=’200′ /Now that I have your attention let’s dig more into FlexView’s API :)FlexView is first of all a React component, and like any good React component it’s stateless and works exclusively through props:You may have already noticed that FlexView API does not reflect completely the flexbox one.
  • This is also the default for a row/FlexView/FlexViewFlexView hAlignContent=’center’ FlexViewhorizontally column hAlignContent=’right’ FlexViewright aligned (inside a column)/FlexView FlexViewright aligned (stacked below his column vAlignContent=’top’ FlexViewtop aligned!
  • /FlexView/FlexViewAnd of course they can be used together:Horizontal and VerticalFlexView hAlignContent=’center’ vAlignContent=’center’ FlexViewthe center of the is just an introduction to the features of FlexView.

A powerful React component to create any layout on any browser using the power of flex.
Continue reading “FlexView: the easiest way to use flex with React – buildo blog”

Free React Fundamentals Course Updated for React v15.5 – WordPress Tavern

Free React Fundamentals Course Updated for React v15.5  via @wptavern #WordPress #reactjs

  • If you’re looking for ways to expand your ReactJS knowledge, the free React Fundamentals course from ReactTraining.com has been updated for the latest React v15.5 release.
  • In the React Fundamentals course students will get an introduction to the React ecosystem and will learn how to set up a React component with NPM, Babel, and Webpack.
  • Complete beginners may struggle, so the course author recommends students enter with a basic understanding of HTML, CSS, and JavaScript.
  • Last year’s State of JavaScript survey results showed React as the clear winner among front-end frameworks in terms of developer interest and satisfaction.
  • In addition to React Training’s fundamentals course, Codeacademy has two free courses for learning React.js and Wes Bos has a free course to help students get started with React.js, Redux, and React Router.

If you’re looking for ways to expand your ReactJS knowledge, the free React Fundamentals course from ReactTraining.com has been updated for the latest React v15.5 release. The 48-lesson course takes approximately 287 minutes to complete. It was designed for a wide range of professionals, including backend engineers new to JavaScript, Bootcamp graduates and front-end developers who want to expand their skill sets, and JavaScript developers coming from other frameworks.
Continue reading “Free React Fundamentals Course Updated for React v15.5 – WordPress Tavern”