It seems as if React is everywhere - follow this tutorial to uncover the power of React and at the very least have a production ready webform.

So you’ve overheard two trendy Shoreditch lumberjacks chatting about the next React meet-up on the Silicon Milk Roundabout.

“State this”, “Component that” – what were they on about?

By the end of this series you’ll be able to:

• Build powerful React apps that will impress your friends and family.
• Write tests to squash bugs before they spread.
• Use styles to create a stunning user interface for your users.

Why we use React

At MyBuilder we use React to build our amazing user interfaces.

React allows us to break our interfaces into smaller, testable parts called Components. A Component is a small independent chunk of code that receives inputs (in the React universe these are called props), such as name and label, and the code inside Component controls how these props should be presented. Isolating components in this way means that your components can be reused again and again.

Being forced to break your code up in this way was my biggest gripe with the React. I came from jQuery where I was free to just dump everything into styles.js. However, as my React projects grew I realised that following this pattern removed the growing pains I’d experienced with jQuery.

Get yourself going with React

Assumed knowledge:

• A small bit of JS knowledge
• A small bit of command line knowledge
• CSS, HTML

What you need:

• Node JS – download it here

Creating an app

We’re going to be building a form app together - it’s going to allow users to enter their details, validate these details and send these details to an API. For now all we’re concerned about is its name. In this tutorial our app is aptly named formapp.

1. Open up terminal and cd to where you plan on keeping you react app (e.g. ~/Documents/code/)
2. Run npx create-react-app formapp
3. In terminal cd into formapp using cd formapp
4. Run npm start

After running npm start your default browser should pop open with the create-react-app landing page.

The files that make up formapp

When opening formapp with a text editor or finder, you’ll see that you’ve created a structure similar to this:

├── node_modules/  
├── public/ 
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
├── src/ 
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── logo.svg
│   ├── registerServiceWorker.js
├── .gitignore
├── package.json
└── README.md

• node_modules/: The home of all your 3rd party packages.
• public/: Files that you want exposed to the user can be stored here - images, favicons, flat html files etc…
• src/: This is where the magic happens. We’ll be building our app here.
• .gitignore: Prevents files from being included in your git repo.
• package.json: This file contains some meta data and the packages required for running.
• README.md: This is a markdown file where you can describe what your app actually does.

Wow - how much fun. Right, what have we just learnt:

• What MyBuilder uses React for - we’re hiring by the way.
• How to install Node
• Creating an app using create-react-app

Oh no – we haven’t actually written the next blog in this series yet. Follow @MyBuilderTech to find out when it is released.