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
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
- 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
- Open up terminal and
cdto where you plan on keeping you react app (e.g.
npx create-react-app formapp
- In terminal
cdinto formapp using
npm start your default browser should pop open with the
create-react-app landing page.
The files that make up
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
Oh no – we haven’t actually written the next blog in this series yet. Follow @MyBuilderTech to find out when it is released.