DEV Community

Maria Campbell
Maria Campbell

Posted on

My first time using React 16.0

Yesterday I started working on a new React project which I am calling for the time being React Universal Blog. I set up my basic workflow, directory structure, and files. I set up for Jest testing, initially mocking out stylesheets and images to make sure everything was working properly. Later I'll switch over to mocking CSS Modules, because I use them with POSTCSS. It's not necessary to do that unless you intend to use Jest Snapshot Testing, and I do! I really want to check it out, and it just makes sense when you do use CSS Modules in development.

But that's not why I am writing this post. I started this new project yesterday. And guess what big event took place yesterday! React 16.0 was released! And guess what happened in my project. I installed React 16.0.

Before I realized all this, I decided to make sure that my Jest configuration was working, so today I typed npm run test in Terminal. This is what was printed out to the console:

> react-universal-blog-app@1.0.0 test /Users/mariacam/Development/react-universal-blog-app
> jest

PASS  src/sum.test.js
PASS  src/App.test.js
  ● Console

    console.error node_modules/fbjs/lib/warning.js:33
      Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills


Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.669s
Ran all test suites.

Notice something different?

console.error node_modules/fbjs/lib/warning.js:33
  Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

That's what reminded me that React 16.0 was released yesterday, and that my project must be using it! I wonder what other new goodies I will encounter!

Happy coding!

Top comments (5)

Collapse
 
ben profile image
Ben Halpern

As someone who's familiar with the React API/ecosystem but hasn't actually followed in a while, what are the latest features and trends with this release and in general?

Collapse
 
letsbsocial1 profile image
Maria Campbell

Very good question Ben! Your question prompted me to go into the official documentation and find out. There is ALOT that is changing with v16.0. I can't even begin to summarize it in a comment, as I haven't studied it very closely. I however, have written a second article regarding next steps I took to make my React app version 16 compatible, and it covers a good portion of what needs to take place in order for your React App to return no errors or warnings in Terminal/console. I will posting my second article shortly. And here is the link to the official docs for React v16.0: facebook.github.io/react/blog/2017...

Collapse
 
ben profile image
Ben Halpern

Oh cool, all looks good. I like improved server-render support and library size reduction.

Collapse
 
iamjoross profile image
Jose Ross Barredo

Thanks for this! Haven't been updated with React in a while. Is it a full release?

Collapse
 
letsbsocial1 profile image
Maria Campbell

Very much so. I just published another article about what I had to add to my package.json/workflow just based on running npm run test in Terminal. I am working on a new project that I started yesterday and inadvertently installed React 16. I will be writing posts about my experiences building it with React 16. That's how I will be approaching going over the new features/upgrades/downgrades/deprecations etc. Glad you enjoyed it and perhaps even got something out of it. Thanks!