In this three part series, I want to prove just how easy it is to get started creating with React, even for complete beginners. First, I’ll give a crash course in what these tools actually are, and then I’ll be showing you how you can get started creating a React app, from scratch, in just minutes.
What is React?
React is a Javascript library, created by facebook, that is used for building user interfaces. To work in React, you break your view up into components, that slot together like lego bricks to make up your page.
You can break these components down as much as you like – it allows you to recycle them wherever they’re needed without having to rewrite anything. Your small components can join together to make bigger components, which can slot into even bigger components, something like this:
You build these components with JSX – which is basically a way of writing HTML within the JS code. This may seem weird at first but its great, because by looking at your JS files you can instantly tell what your stuff is going to look like. For example:
You can see that we’re giving two output options here: either “Hello <name>!” if a name exists, or “Hello, Strange person!” if it does not. No need to try and decipher what part of the DOM is being changed by what bit of JQuery or whatever. It’s just right there.
Yeah, But What is React Actually Supposed to Do?
Under the hood, React renders all your components into a Virtual DOM, which is a lightweight representation of the real DOM. When the state of one of our components change, a new Virtual DOM image is created. This image is then compared with the old Virtual Dom, and then it uses the diff of these two to make a small change to the real DOM – rather than recreating the whole thing. What does this mean? It means that React apps are SUPER fast, because the browsers don’t have to re-render the whole page, just the part of the app that actually changed. And that, you can say, is pretty REACTive.
What is CRA?
CRA stands for “Create-React-App”, a somewhat new tool made to help people get started with React.
Previously if asked, I would of said that one of the downsides of React is that it takes quite a bit of messing around to get your dev environment sorted. Even the most simple of “Hello world with React for Dummies!” guides would involve something like this:
“Oh, React is pretty simple! First you need to install Webpack so that you can bundle your applications, followed by Babel to transpile your ES6 into backwards compatible JS so it will actually render on the browser. Then you’ll need to configure your webpack bundlers to load your babel into webpack, using babel-loader. Then don’t forget to edit your babelrc file to allow react and ES6 as presets. You’ll also need webpack-dev-server and html-webpack plugin so that you can actually see your project on a browser. Oh yeah, and also you need to install React”
If you were like me, and just wanting to get to the part where you actually build an application and learn what-in-the-hell React is and how it works, all this boilerplate really, really, gets in the way. Lucky for us, there now exists a magical new tool: Create React App.
How can we start working with react now?
Step 1: “npx create-react-app my-app”
Step 2: have fun, you now have a React app.
Now don’t get me wrong- at some point you really should try your own React install from scratch, to get your head around how and why there is such a complicated boilerplate process behind it all. But this process can easily take around an hour per new project, IF it works right the first time – so these days its perfectly fine to rely on CRA to do all the dirty work for you.
Are There any Downsides to CRA?
The downside of allowing CRA to abstract React’s configuration is that you don’t get to mess around with it on your own. This probably won’t matter to you at all 90% of the time. However if you do really really need to change something, you’ll have to use their ‘eject’ feature to strip away CRA from your app and begin to maintain your React boilerplate on your own.
What Next?
Hopefully now you have a basic idea of React, why its cool and worth giving a go, and why CRA makes our life easy. In the next post I do, I’ll take you through getting started making your own app.
Very informative and easy to understand. However, I think there is a typo in step 1 of “How can we start working with React now”,. “npx” should be “npm “. Other than that, Well done Nicole. Keep up the great work!
npx is a package runner for npm. So when we want to run the Create React App npm package, we can use npx to do so!
Once you’ve learned the basics, you can use React-app-rewired to extend the default cra webpack config without ejecting. It’s very useful to add different loaders (I used to use it for svgs prior to cra adding a default loader for it).