Day 1: Simple React App

#100DaysOfCode : Building a React App

Day 1 was mostly about getting things setup and running. Created a website (harinilabs.com) which will track my progress at a high level. Planning to post more detailed steps of the daily projects here.

Project: Github repo search app that shows user profile along with note taking capability. Will be working on this project for next few days. Creation of the cliched “Hello World” setup React App transpiled using Babel with webpack module loader.

All the code for this project can be found on my github

Step 1: Install all the required modules and packages using NPM dependency manager tool in your terminal.

mkdir reactApp
cd reactApp
npm init
npm install --save-dev react react-dom babel-core babel-loader babel-preset-es2016 babel-preset-react
npm install webpack -g

This creates package.json and node_modules in your project directory with react, babel and relevant modules. Webpack installation above sets it up as global module on your computer and in case of any permission issue comes up, add “sudo” at the beginning of the command and then enter password.

In the end your nodes_modules should have these directories

babel-core 
react
babel-loader
react-dom
babel-preset-es2016
webpack
babel-preset-react

Note that babel transpiles JSX (HTMLish looking code) into ES6 or JavaScript.

Step 2: Create your skeleton index page

Create the following index.html in a public directory under you main project in reactApp.

Step 3: Create webpack module loader

Webpack object contains all the configuration objects that specify what loaders to use for what transpiling (babel in our case) and what to do with output code spitted out by it (js in out case).

Create the following “webpack.config.js” file in your main project directory.

React is composed of many components so you need to tell webpack what is the root component that it needs to start processing with, as specified above in “entry”. In the module section, we configure which loader we use (babel) and what presets query properties to use (transpile JSX to ES6 using react, es2015 module, which we already installed in Step 1). Finally, we tell webpack after it is done transpiling “entry” and its children, where to throw out the new generated code in “output”, bundle.js in our case.

Step 4: Create the first react component

In your main app directory, create the following directory structure

mkdir app
cd app
mkdir component
touch main.js

Add this to main.js

In the above code, require pulls the react module that we already installed. React.createClass() -> creates new react component that gets rendered to the view on the server side using reactDOM.

Step 5: Run webpack

Finally go to ur app directory in terminal and run the following command which will use babel to create bundle.js as per the webpack config.

webpack -w

Now opening index.html on your browser gives you the awesome “Hello World” tadaa!

Day 1 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)