Create single-page web apps with React.js and this awesome new tool
Tell me if this scenario is familiar to you: So you heard about this new 'thing' in Javascript world called React. Everyone is talking about it and, naturally, you get curious. You watch couple of youtube tutorials, read article or two and you fall in love with it. You like it's conceptual simplicity, the fact that it's based on HTML inside Javascript, not the other way around like in Angular, the rich development experience and so on. Eagerly, you open up your code editor and start configuring your awesome 'Hello, World!' app.
And that's the moment things started to go wrong. After two hours of trying to setup this babel transpiler thing, implement hot reloading and configure humongous Webpack file, you feel like your brain is about to blow up. Let me stop you there, as you are trying to abandon this trip through the mountains of Mordor.
Awesome people at Facebook (responsible for this game-changing framework) took a hint of what's been bothering both new and experienced React developers. And they came up with this project called 'Create React App' that has all configuration and environmental settings prebuilt out of the box. That's right, all you need to do is type one command in your terminal and voila, you have an app waiting for you.
How it works
To install the package globally type the following command in your terminal:
npm install -g create-react-app
And now to create app:
create-react-app myawesomeapp
After it's finished installing all the packages, it generates minimal set of files:
favicon.ico
index.html
package.json
node_modules/
README.md
src/
App.css
App.js
index.css
index.js
logo.svg
And you'll get a message similar to this with some quick tips on how to use it.
All that is left is to enter your project directory and run:
npm start
It will even ask you to run on a different port if the default 3000 is used for something else. Other two commands: npm run build and npm run eject are used for creating production ready static files and breaking the dependency from this package.
Even though there are still some unsupported features like server rendering or Sass/Less, I'm very excited about this project and what future brings.
Thanks for reading! This article was originally posted on my blog at teofilex.com