Announcing “Advanced React.js Online” – componentDidBlog

  • I can barely believe it, but over the last 27 months, Michael Jackson and I have taught React.js to over 3,500 developers at 91 workshops in eight different countries (Oh, and one prison cell in the UK, but I digress…)In that time we’ve learned a lot about React as library authors, product developers, and teachers.We’re the authors of React Router.
  • That kind of usage has exposed us to the needs of all sorts of applications, pushing us to find simpler ways to be composable as library authors.Meeting 3,500 people (and more at the meet ups we regularly attend in our travels) has put a lot of code in front of us, and even more conversations about code.
  • It’s been fun learning the unique needs of all these people and figuring out ways to make their code better as product developers.Teaching React to thousands has helped us identify parts that some folks initially struggle with.
  • This helps us refine our material one workshop at a time, making us much better teachers.We’re happy to announce that we’re bringing all of that experience to you in our very first online course: Advanced React.js.
  • We’ve taken the most popular parts of our workshops and put them into the course.

Ninety-one. I can barely believe it, but over the last 27 months, Michael Jackson and I have taught React.js to over 3,500 developers at 91 workshops in eight different countries (Oh, and one prison…
Continue reading “Announcing “Advanced React.js Online” – componentDidBlog”

How to make Jenkins build NodeJS, Ruby, and Maven on Docker

How To Make Jenkins Build #NodeJS, #Ruby, And #Maven On #Docker  #reactjs #devops

  • Jenkins can speed up repetitive tasks that robots are much better performing and Docker simplifies spinning up VM’s for your application in a very simple and repeatable way.
  • What I’m going to cover here is how to setup your Jenkins server in a Docker container and how to fix some of the limits of the Jenkins official image.
  • While it is nice of Jenkins to offer an official docker image, you’ll quickly run into a few issues if you are doing anything even slightly other than compiling plain Java.
  • For instance, Maven, the popular dependency management tool for Java, is not included in the Docker container.
  • You’ve learned to create a Jenkins Docker-container that’s ready to run jobs for Java, Ruby and NodeJS projects.

Setup your Jenkins server in a Docker container and fix some of the limits of the official image I discovered so you can get up and building faster.
Continue reading “How to make Jenkins build NodeJS, Ruby, and Maven on Docker”

Why React is winning and how you can win with it? – Shival Gupta

  • Angular is still the reigning champion of front end frameworks, but React is the most loved.
  • Angular maybe in King’s Landing for now, but React is king in the north.
  • And React has a steep learning curve.
  • With React Native spearheading the war on the mobile apps front (and performing awesomely), it is worth it to investigate React in your freetime and make the decision yourself.
  • I’ll write more on learning and working with React if this post crosses 5 comments.

React.js is the king in the north.  Angular is still the reigning champion of front end frameworks, but React is the most loved. And there are particular reasons to it. I made the jump from using Angular 1.x to Angular 2 earlier this year and then to React. The experience and developer productivity that I…
Continue reading “Why React is winning and how you can win with it? – Shival Gupta”

Extracting Logic from React Components

Extracting Logic from #ReactJS Components:  by @Jack_Franklin #Javascript

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

ReactJs: Using stores to improve your code – Doyin Olarewaju – Medium

ReactJs: Using stores to improve your code  #reactjs #react #javascript #reactjs

  • ImagesOne of the first steps i take is to create an ImageStore.
  • This helps me keep all images in one place, helps ensure my images are compiled with react and also helps me not worry about relative links to my app root.So some code://say the name of this file is ImageStore located at stores/ImageStoreimport UserImage from FriendImage from default { UserImage, FriendImage}Then to import it in your viewsimport ImageStore from ‘.
  • /stores/ImageStore// excluded some imports for brevity sake………export default class TestClass extends Component {render() img src={ImageStore.UserImage} alt=’User’ / … … }}Thats it.
  • Just add all images you wish to use in your app into the store and import the ImageStore.
  • No relative links required, the image gets compiled into your app and best of all, if the image location needs to change for any reason all you need to do is change in the ImageStore file and it changes everywhere.

I’m a sucker for well written code. When code is badly written, the app kinda gets boring and it becomes a task to work on the codebase. I love stores in js, especially since es6. Simple classes with…
Continue reading “ReactJs: Using stores to improve your code – Doyin Olarewaju – Medium”

Extracting Logic from React Components

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”