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.
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
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
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.
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 :)