Create single-page web apps with React.js and this awesome new tool

in #technology8 years ago (edited)

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

Coin Marketplace

STEEM 0.17
TRX 0.13
JST 0.027
BTC 60482.94
ETH 2613.04
USDT 1.00
SBD 2.63