ilonacodes
Blog
YouTube
Contact

A Cheat Sheet to never struggle again with a job search:
“Ultimate Professional Networking Cheat Sheet.”

Develop and expand your efficient and powerful Professional Network fast and easily.

Get my ultimate cheat sheet for professional networking, along with my regular blog newsletter for women in code, absolutely for free! Just hit the button below:

Grab FREE Cheat Sheet
24
Dec
2018
#web
#reactjs
#javascript
#tech
#ux

Hacking User Testing With ReactJS

24 Dec, 2018

source: https://bit.ly/2T8OJxc

There are many tools available for designers to create beautiful user interfaces and user experiences. And today I want to share another approach on how to build interactive design prototypes with ReactJS and why.

As known, ReactJS is a JavaScript library that supplies interfaces of many web applications. It’s not the primary tool for designers. However, it could be useful and efficient to learn and understand its core concept to prototype dynamic user interfaces and get feedback from user testing faster.

Moreover, if ReactJS becomes one of the go-to prototyping tools, then it could be much easier to communicate with the software engineers on the team and understand the fundamental principles of how the product is developed.

These are some advantages of using ReactJS as a prototyping tool mockup implementation:

  • Dividing design elements into components

The big “plus” that ReactJS allows creating reusable components. And it will help designers to style and restyle UI-elements faster (in case the project is organized and structured right) if it’s required.

  • Keeping the application stateful

With ReactJS it’s also possible to initialize and update the state after every user interaction, which can be passed to any component to be used. The bright example is the input fields in the form. The interface state would be updated and re-rendered in the web application preview.

  • Managing and handling application data

ReactJS is based on JavaScript concepts, rules and syntax, which means it’s easy to test and visualize the web application behavior with different or modified data.

  • Styling components

ReactJS applications allow installing different npm packages and libraries to style the app. For example, Bootstrap or Foundation – to write markup with minimal CSS.

  • App Deploying for testing

The Create-React-App CLI (ReactJS project starter) makes it also more comfortable to deploy the web application, for example, to GitHub pages. It implies that the prototypes can be published quickly to the world and the user testing could be performed.

For sure, ReactJS is not always the right choice of the design tool, and for many designers, it wouldn’t be especially useful. For example, any page-flow can be applied in Marvel and Framer could be better for the animations/transitions representation. But if you are curious about other ways like coding and want to try something new, then ReactJS is an excellent choice to do that.

Thank you for reading this post!

Happy holidays!

ilonacodes

Tags | #web #reactjs #javascript #tech #ux
Next: Fetching GitHub User with REST API and ReactJS
Ilona who codes
Software Engineer & Content Creator
Berlin, Germany

"I like to work hard for things that are worth it."
The latest articles:
3 Obvious Reasons Why You Should Become a Mentor Today
The Biggest Mistakes in App User Onboarding
Most Common Blogging Mistakes of Beginner Bloggers

Imprint
Privacy Policy
© 2019 ilonacodes
© 2019 ilonacodes
Imprint
Privacy Policy